Il controllo del contrasto WCAG si svolge in pochi semplici passaggi. Niente lascia il tuo browser.
- Inserisci un colore di primo piano e uno di sfondo. Lo strumento analizza i valori hex, rgb(), hsl() o i colori CSS con nome nei loro valori di canale rosso, verde e blu.
- Ogni canale RGB viene linearizzato usando la funzione di trasferimento sRGB. Questo converte i valori di visualizzazione codificati con gamma in intensità luminose lineari.
- I valori lineari vengono ponderati in base alla sensibilità dell'occhio umano per ogni canale — 0,2126 per il rosso, 0,7152 per il verde, 0,0722 per il blu. La somma è la luminanza relativa del colore.
- Il rapporto di contrasto è (L1 + 0,05) ÷ (L2 + 0,05), dove L1 è la luminanza del colore più chiaro e L2 quella del più scuro. Lo 0,05 aggiuntivo mantiene la formula valida per il nero puro.
- Il rapporto viene confrontato con le soglie WCAG: il testo normale AA richiede almeno 4,5:1, il testo grande AA 3:1, il testo normale AAA 7:1 e il testo grande AAA 4,5:1. Per testo grande si intende almeno 18pt o 14pt in grassetto.
FAQ
Domande frequenti sul controllo del contrasto WCAG.
Qual è la differenza tra AA e AAA?
AA è il livello minimo di conformità per la maggior parte dei contenuti web. Richiede un rapporto di contrasto di almeno 4,5:1 per il testo normale e 3:1 per il testo grande. AAA è uno standard più elevato che richiede 7:1 per il testo normale e 4,5:1 per il testo grande. Puoi puntare ad AAA per i contenuti chiave come il corpo del testo di un sito di notizie, mentre usi AA per il design generale. Raggiungere AAA ovunque può essere difficile con i colori del brand, quindi molti team puntano ad AA in generale e portano il testo chiave ad AAA dove possibile.
Cosa si intende per «testo grande» secondo WCAG?
WCAG 2.x definisce testo grande come almeno 18 punti (24px) per il peso normale, o 14 punti (circa 19px) per il grassetto. I simboli e le icone che fanno parte di un carattere seguono le stesse soglie. Se non sei sicuro di quale soglia si applichi alla tua interfaccia, controllale entrambe — AA Grande ha una barriera più bassa (3:1), quindi la maggior parte delle coppie di colori che non superano AA Normale superano AA Grande quando il testo è abbastanza grande.
Perché la mia coppia supera AA Grande ma non AA Normale?
Perché AA Grande richiede solo un rapporto di 3:1 mentre AA Normale richiede 4,5:1. WCAG stabilisce una soglia più bassa per il testo grande perché i caratteri più grandi sono più facili da leggere anche con meno contrasto. Una coppia di colori che ottiene, ad esempio, 4,0:1 supera AA Grande (soglia 3:1) ma non supera AA Normale (soglia 4,5:1). Questo è molto comune con i colori del brand chiari usati come primo piano su sfondi bianchi.
Posso affidarmi solo a questo strumento per l'audit dell'accessibilità?
Questo strumento verifica una cosa — il rapporto di contrasto WCAG 2.x tra due colori solidi. L'accessibilità reale implica molto di più: indicatori di focus, dimensione e peso del carattere, il colore come unico modo per veicolare informazioni e la compatibilità con lettori di schermo e strumenti di zoom. Usa questo controllo del contrasto insieme ad altri metodi di audit per avere un quadro completo dell'accessibilità della tua applicazione.
Quali formati di colore accetta l'input?
Puoi incollare codici hex a 3, 4, 6 o 8 cifre (con o senza #), valori rgb() e rgba() in sintassi tradizionale con virgole o sintassi moderna separata da spazi, hsl() e hsla() con qualsiasi unità di tonalità standard (deg, rad, grad, turn), hsv(), hwb() e uno qualsiasi dei 150 colori CSS con nome della specifica CSS Color Module Level 4. Il colore viene analizzato interamente sul tuo dispositivo.