Verifica il contrasto dei colori

Scegli il colore del testo e quello dello sfondo per sapere se il tuo design è leggibile e accessibile. Ti diamo il rapporto di contrasto, se supera i livelli AA e AAA delle linee guida WCAG e, se non basta, il colore del testo più simile che li supera.

Testo e sfondo

Accetta HEX, rgb(), hsl(), oklch() o nomi CSS. Se il testo è semitrasparente, viene fuso con lo sfondo.

Testo grande di esempio

Questo è un testo di dimensione normale. L'accessibilità web significa che chiunque, anche chi è ipovedente o daltonico, possa leggere e usare la tua pagina.

Pulsante

Rapporto di contrasto

Testo normale (4,5:1) AA
Testo normale (7:1) AAA
Testo grande (3:1) AA
Testo grande (4,5:1) AAA
Icone e componenti (3:1) AA

Che cos'è il rapporto di contrasto?

Il rapporto di contrasto confronta la luminanza relativa di due colori e va da 1:1 (lo stesso colore) a 21:1 (nero su bianco). È definito dalle linee guida di accessibilità WCAG 2 del W3C ed è il riferimento usato dalle norme sull'accessibilità (in Italia la Legge Stanca e lo standard europeo EN 301 549) e da strumenti come Lighthouse.

Livelli AA e AAA

AA è il livello richiesto di solito: 4,5:1 per il testo normale e 3:1 per il testo grande (da 24 px, o 18,66 px in grassetto). AAA è il livello rafforzato: rispettivamente 7:1 e 4,5:1. Icone, bordi dei campi dei moduli e altri componenti dell'interfaccia richiedono almeno 3:1 rispetto ai colori circostanti.

Loghi e testi puramente decorativi o di elementi disattivati sono esenti.

Come migliorare il contrasto

Quasi sempre basta scurire il testo (o schiarirlo sugli sfondi scuri) senza cambiare tonalità: per questo ti proponiamo lo stesso colore con un'altra luminosità, calcolata nello spazio OKLCH perché la modifica sia la più piccola possibile. Evita il testo grigio chiaro su bianco e il testo sopra le immagini senza un livello scuro intermedio.