Colori e design
Verifica contrasto WCAG
Scopri in pochi secondi se i tuoi colori sono leggibili da tutti.
Rapporto di contrasto
- AA testo normale
- AA testo grande
- AAA testo normale
- AAA testo grande
Anteprima
Ma la volpe col suo balzo ha raggiunto il quieto Fido.
Ma la volpe col suo balzo ha raggiunto il quieto Fido.
Quel grigio delicato su sfondo bianco potrebbe costarti dei lettori. Questo strumento calcola il rapporto di contrasto esatto tra qualsiasi colore di testo e di sfondo secondo le WCAG 2.1, poi mostra verdetti chiari — superato o non superato — per i livelli AA e AAA, sia per il testo normale che per quello grande. Un’anteprima dal vivo mostra una frase reale con i colori scelti, così giudichi il risultato con i tuoi occhi, e i selettori più lo scambio in un clic ti permettono di iterare finché non centri l’obiettivo. Usalo per pulsanti, testi, grafici — ovunque il testo incontri il colore. Indispensabile per un design accessibile e conforme alla legge, completamente gratuito e senza account.
Come funziona?
- Imposta il colore del testo e quello dello sfondo (digita un valore o usa il selettore).
- Il rapporto di contrasto appare all’istante con i verdetti AA e AAA.
- Controlla la resa reale del testo nell’anteprima.
- Ritocca i colori finché non raggiungi il livello che ti serve.
Domande frequenti
Quale rapporto di contrasto devo raggiungere?
Il livello AA delle WCAG richiede 4,5:1 per il testo normale e 3:1 per il testo grande. Il livello AAA, più severo, richiede 7:1 e 4,5:1. La maggior parte dei siti punta alla conformità AA.
Cosa si intende per « testo grande »?
Un testo di almeno 18 pt (circa 24 px), oppure 14 pt (circa 18,5 px) se in grassetto. I titoli rientrano spesso in questa categoria, per questo è ammesso un rapporto leggermente più basso.
Perché il contrasto è così importante?
Circa una persona su dodici ha una qualche forma di daltonismo, e tutti facciamo fatica con un testo a basso contrasto in pieno sole. Un buon contrasto migliora la leggibilità per tutti ed è un requisito legale di accessibilità in un numero crescente di paesi.
I miei colori non passano il test: come li correggo?
Scurisci il testo o schiarisci lo sfondo invece di cambiare completamente tonalità. Di solito basta un piccolo ritocco di luminosità per superare la soglia mantenendo riconoscibili i colori del tuo marchio.