Il contrasto dei colori spiegato: rapporti WCAG, testo leggibile e formati di colore

Aggiornato: 3 novembre 2026

Un testo si legge bene quando si stacca dallo sfondo, e le Linee guida per l’accessibilità dei contenuti Web (WCAG) lo traducono in un numero: il rapporto di contrasto. WCAG 2.2, la versione in vigore, è Raccomandazione del W3C dal 12 dicembre 2024. Questa guida spiega come si calcola il rapporto, le soglie per il testo e per i controlli, e il legame con i modi più comuni di scrivere un colore.

Come si calcola il contrasto

Ogni colore viene trasformato in luminanza relativa, da 0 per il nero a 1 per il bianco. Prima i valori di rosso, verde e blu vengono riportati a intensità luminosa, perché i valori sRGB non sono proporzionali alla luce: un valore fino a 0,04045 (su una scala da 0 a 1) si divide per 12,92, i valori più alti seguono una curva di potenza 2,4. Poi si pesano secondo quanto l’occhio li percepisce luminosi: 0,2126 il rosso, 0,7152 il verde e 0,0722 il blu. Prima di maggio 2021 la soglia era scritta 0,03928; il W3C precisa che la modifica non ha effetti pratici.

Il rapporto è (L1 + 0,05) ÷ (L2 + 0,05), dove L1 è il colore più chiaro. Va da 1:1 per due colori identici a 21:1 per il nero sul bianco. Non si arrotonda mai: la spiegazione ufficiale delle WCAG dice che 4,499:1 non raggiunge 4,5:1, ed è per questo che gli strumenti che arrotondano a un decimale possono mostrare come superato ciò che non lo è.

Verifica del contrasto dei colori

Le soglie

Le WCAG hanno tre livelli, A, AA e AAA; AA è il livello a cui mirano la maggior parte delle politiche e delle verifiche di accessibilità. Tre criteri di successo fissano i contrasti minimi:

Criterio	Si applica a	Minimo	Livello
1.4.3 Contrasto (minimo)	Testo normale	4,5:1	AA
1.4.3 Contrasto (minimo)	Testo grande	3:1	AA
1.4.6 Contrasto (avanzato)	Testo normale	7:1	AAA
1.4.6 Contrasto (avanzato)	Testo grande	4,5:1	AAA
1.4.11 Contrasto non testuale	Controlli, indicatori di focus, icone e parti di grafici	3:1	AA

Testo grande significa almeno 18 punti, o 14 punti in grassetto, che il W3C colloca a circa 24 e 18,5 pixel CSS. Il testo di un logo, quello puramente decorativo e quello dei controlli disattivati non hanno requisiti di contrasto. Il contrasto non testuale riguarda ciò che bisogna vedere per usare una pagina: il bordo di un campo di testo, una casella di controllo, l’indicatore di focus, un’icona senza etichetta, le linee di un grafico.

Quali colori passano sul bianco

Rapporti sul bianco, troncati a due decimali come li mostra la verifica:

Testo / sfondo	Contrasto	Cosa supera
#000000 / #ffffff	21:1	Il massimo: supera tutto
#0000ff / #ffffff	8,59:1	AAA per tutto il testo
#595959 / #ffffff	7:1	Esattamente AAA per il testo normale
#767676 / #ffffff	4,54:1	Supera AA per il testo normale
#777777 / #ffffff	4,47:1	Non supera AA per il testo normale; solo testo grande e grafica
#ff0000 / #ffffff	3,99:1	Solo testo grande e grafica
#949494 / #ffffff	3,03:1	Solo testo grande e grafica
#959595 / #ffffff	2,99:1	Non supera nulla, nemmeno bordi e icone
#ffff00 / #ffffff	1,07:1	Quasi invisibile

#777777 e #767676 sembrano uguali, eppure uno non passa e l’altro sì: il confine è così sottile. Il rosso puro, comune per gli errori, arriva solo a 3,99:1 sul bianco, abbastanza per un’icona o un testo grande ma non per un messaggio di errore in testo normale; un rosso un po’ più scuro come #ee0000 arriva a 4,53:1.

Perché 4,5:1

Il W3C spiega che 4,5:1 compensa la perdita di sensibilità al contrasto che di solito accompagna una vista di circa 20/40, frequente con l’età, e 7:1 quella di una vista di circa 20/80. Un buon contrasto aiuta anche tutti gli altri: un telefono al sole, uno schermo economico, un proiettore in una sala illuminata.

I formati di colore e cosa dicono del contrasto

#1a73e8, rgb(26 115 232), hsl(214 82% 51%) e oklch(57.4% 0.195 257.9) sono lo stesso blu scritto in quattro modi. HEX e RGB danno direttamente le quantità di rosso, verde e blu; HEX può aggiungere una quarta coppia per la trasparenza, come #1a73e880 per il 50%. HSL descrive tinta, saturazione e luminosità, ma la sua luminosità non è quella che vede l’occhio: giallo e blu al 50% di luminosità HSL hanno il 96,8% e il 45,2% di luminosità OKLCH, ed è per questo che il testo blu passa sul bianco e quello giallo no.

OKLCH, di CSS Color livello 4, è costruito perché passi uguali di luminosità appaiano uguali, il che lo rende il formato più utile per progettare una tavolozza con un contrasto prevedibile. I browser lo supportano da Chrome ed Edge 111, Firefox 113 e Safari 15.4, ed è Baseline ampiamente disponibile da novembre 2025. Il contrasto si calcola comunque sul colore sRGB effettivamente mostrato, quindi controlla la coppia finale con una verifica del contrasto.

Convertitore di colori

Correggere un colore che non passa

Mantieni la tinta e cambia la luminosità: scurisci il testo o schiarisci lo sfondo finché il rapporto passa. La verifica propone il colore conforme più vicino nella stessa tinta.
Controlla tutti gli stati: hover, link visitati, testi segnaposto su cui fai affidamento, pulsanti disattivati che devono restare visibili e la modalità scura, che ha gli stessi requisiti.
Misura un testo su un’immagine o una sfumatura rispetto alla zona più chiara che ha dietro, oppure metti il testo su un riquadro a tinta unita.
Non affidarti solo al colore: il criterio 1.4.1 delle WCAG 2.2 chiede un altro segnale, come la sottolineatura dei link o un’icona e una parola per gli errori.

Oltre le WCAG 2

Le bozze delle WCAG 3 hanno sperimentato un altro metodo di contrasto, spesso chiamato APCA, che tiene conto di dimensione e spessore del carattere e tratta diversamente il testo chiaro su sfondo scuro. È una bozza, non uno standard, quindi verifiche e leggi usano ancora il rapporto delle WCAG 2. Nell’Unione europea l’Atto europeo sull’accessibilità (direttiva 2019/882) si applica dal 28 giugno 2025 a molti prodotti e servizi, tra cui il commercio elettronico.

Domande frequenti

4,47:1 è abbastanza vicino a 4,5:1?

No. Il rapporto non si arrotonda, quindi 4,47:1 non raggiunge il minimo di 4,5:1 per il testo normale. Raggiunge però 3:1 per testo grande e grafica.

Che cosa conta come testo grande?

Almeno 18 punti, circa 24 pixel CSS, o 14 punti in grassetto, circa 18,5 pixel CSS.

Bordi e icone devono avere contrasto?

Sì, quando servono a capire o usare la pagina: 3:1 rispetto ai colori vicini. Il bordo di un campo di testo, una casella di controllo e l’indicatore di focus sono esempi.

La modalità scura cambia le regole?

No. Gli stessi rapporti valgono per ogni schema di colori, quindi controlla anche la tavolozza scura.

Più contrasto si legge sempre meglio?

Fino a un certo punto. Un contrasto molto alto, come il bianco puro sul nero puro, può risultare duro per alcuni lettori; da 7:1 in su la lettura è comoda per la maggior parte dei testi.