Un colore gradevole non è automaticamente leggibile. Dimensione del testo, peso del carattere, luminosità dello sfondo e condizioni visive cambiano il risultato. Il rapporto di contrasto offre un controllo ripetibile, ma va affiancato a una progettazione che non comunichi informazioni soltanto con il colore.
Che cosa misura il rapporto di contrasto
Il rapporto confronta la luminanza relativa di due colori e varia da 1:1, colori identici, a 21:1, nero e bianco. Non misura la differenza tra tonalità percepite e non dice se una combinazione sia esteticamente adatta: indica quanto testo e sfondo si distinguono secondo una formula definita.
Le WCAG 2.2 richiedono per il livello AA almeno 4,5:1 per il testo normale e 3:1 per il testo grande. Per componenti dell’interfaccia e elementi grafici necessari alla comprensione, il riferimento AA è 3:1 rispetto ai colori adiacenti.
Controlla gli stati reali, non solo la palette
Verifica collegamenti, pulsanti, testo secondario, messaggi di errore, campi disabilitati, segnaposto e stati al passaggio del mouse o al focus. Una coppia di colori può superare il test nel componente principale e fallire quando l’opacità riduce il contrasto.
Esegui il controllo sia nel tema chiaro sia in quello scuro. Usa i valori finali calcolati dal browser se sovrapposizioni e trasparenze modificano il colore dichiarato nel foglio di stile.
Checklist
- Testo principale e secondario
- Link distinguibili anche senza colore
- Focus da tastiera visibile
- Errori con testo o icona
- Stati hover, attivo e disabilitato
- Tema chiaro e scuro
Come correggere una combinazione
Se il rapporto è basso, scurisci il testo o schiarisci lo sfondo mantenendo un margine sopra la soglia. Modificare soltanto la saturazione spesso non basta, perché il calcolo dipende soprattutto dalla luminanza. Per un pulsante colorato puoi usare testo molto scuro invece del bianco, oppure riservare il colore del marchio a bordo e icona.
Non progettare esattamente sulla soglia: rendering, antialiasing e schermi diversi possono ridurre la leggibilità percepita. Prova l’interfaccia con zoom elevato, luce intensa e caratteri ingranditi.
Il colore non deve essere l’unico segnale
Affianca una scritta o un’icona agli stati verde e rosso; sottolinea i link nel testo; aggiungi pattern o etichette ai grafici. Questo aiuta chi ha difficoltà nella percezione dei colori e rende il significato più chiaro anche su stampe in scala di grigi.
Un controllo automatico trova molte combinazioni insufficienti, ma non sostituisce una prova con tastiera, zoom e lettura reale della pagina. La conformità di una singola coppia non equivale alla conformità dell’intero sito.
Fonti e approfondimenti
Domande frequenti
Qual è il contrasto minimo per il testo normale?
Per il livello WCAG AA il riferimento è 4,5:1; il requisito cambia per testo grande e per il livello AAA.
Il bianco va bene su qualunque pulsante colorato?
No. Su colori chiari il testo bianco può avere poco contrasto; occorre misurare la coppia effettiva.