Come si usa
- Inserisci il colore del testo (primo piano) e quello dello sfondo in HEX, rgb(), hsl() o un altro formato CSS, oppure usa i selettori.
- Controlla il rapporto di contrasto e l’esito positivo o negativo per ogni requisito WCAG.
- Se un requisito non è soddisfatto, scegli un obiettivo e applica il colore suggerito: mantiene la tonalità e modifica solo la luminosità.
- Usa «Inverti» per verificare la combinazione opposta, ad esempio testo chiaro su un pulsante scuro.
Come funziona
Il rapporto segue la definizione WCAG 2.2: la luminanza relativa di ciascun colore viene calcolata a partire dai suoi canali sRGB e il rapporto è (più chiaro + 0.05) ÷ (più scuro + 0.05). Varia da 1:1 (colori identici) a 21:1 (nero su bianco).
Requisiti verificati: il criterio di successo 1.4.3 (AA) richiede 4.5:1 per il testo normale e 3:1 per il testo grande; il criterio 1.4.6 (AAA) richiede rispettivamente 7:1 e 4.5:1; il criterio 1.4.11 richiede 3:1 per gli elementi dell’interfaccia e gli elementi grafici significativi, come i bordi dei campi e le icone. Il testo grande è almeno 24px in carattere normale o circa 18.66px in grassetto. WCAG non consente di arrotondare per eccesso: 4.49:1 non supera il livello AA, anche se ci va vicino; il rapporto mostrato qui è troncato, non arrotondato.
Il suggerimento mantiene la tonalità e la cromaticità del colore del testo in OKLCH e cerca la luminosità più vicina, più scura o più chiara, che soddisfa il requisito. Il rapporto di contrasto è solo uno degli aspetti della leggibilità: contano anche lo spessore e la dimensione del carattere e le differenze nella percezione dei colori. WCAG 2.2 è l’attuale raccomandazione W3C a cui fanno riferimento la maggior parte delle leggi sull’accessibilità.
Esempi
Testo grigio che non supera il requisito per poco
Il grigio #777777 sul bianco ha un rapporto di 4.48:1. È sufficiente per il testo grande e gli elementi dell’interfaccia, ma non raggiunge il livello AA per il testo normale. Il grigio più vicino che supera il requisito è circa #767676, con un rapporto di 4.54:1.
Testo bianco su un pulsante del brand
Il bianco su #ff8800 ha un rapporto di circa 2.4:1, insufficiente persino per il livello 3:1 previsto per il testo grande. Di solito si risolve scurendo l’arancione o usando un testo scuro; il suggerimento mostra quanto dovrebbe essere scuro il colore del testo.
Verifica del bordo di un campo del modulo
Un bordo grigio chiaro #cccccc sul bianco ha un rapporto di circa 1.6:1. In base al criterio 1.4.11, il bordo che identifica un campo di input deve raggiungere 3:1: serve quindi un colore come #949494 o più scuro.
Domande frequenti
Quale rapporto di contrasto serve per WCAG AA?
4.5:1 per il testo normale, 3:1 per il testo grande (24px o 18.66px in grassetto) e 3:1 per gli elementi dell’interfaccia e gli elementi grafici significativi. Il livello AAA richiede 7:1 per il testo e 4.5:1 per il testo grande.
Il testo dei loghi o dei pulsanti disabilitati deve rispettare il requisito?
No. WCAG esenta il testo nei loghi e nei nomi dei brand, il testo puramente decorativo e quello negli elementi dell’interfaccia inattivi (disabilitati).
Perché il mio risultato differisce leggermente da quello di un altro strumento?
Alcuni strumenti arrotondano il rapporto a una cifra decimale o per eccesso. WCAG confronta il valore esatto, quindi questo strumento tronca il risultato a due cifre decimali. Anche l’inserimento di colori con canale alfa può causare piccole differenze.
E il nuovo metodo di contrasto APCA?
APCA è un metodo diverso, proposto per una futura versione delle WCAG. Non fa parte delle WCAG 2.2, che questo strumento misura e a cui fanno riferimento le attuali norme di accessibilità.
Privacy
I colori vengono verificati nel browser. Non vengono caricati né salvati.