Verificatore di contrasto dei colori

Che cosa fa

Questo verificatore misura il contrasto tra un colore del testo e il suo sfondo con la formula delle linee guida di accessibilità WCAG 2.2, adottata da molte leggi sull'accessibilità. Mostra il rapporto di contrasto, da 1:1 (nessun contrasto) a 21:1 (nero su bianco), e se la coppia supera i livelli AA e AAA per il testo normale, il testo grande e i componenti dell'interfaccia come icone e bordi. Quando una coppia non supera la verifica, suggerisce il colore più vicino, con la stessa tonalità, che la supera.

Come si usa

1. Inserisci o scegli il colore del testo e il colore di sfondo.
2. Leggi il rapporto di contrasto e i risultati AA e AAA, e controlla l'anteprima dal vivo.
3. Se non supera, premi Usa su un colore suggerito, poi copia il link per condividere il risultato.

Domande frequenti

Di quale rapporto di contrasto ho bisogno?
Il livello AA, l'obiettivo di legge abituale, richiede 4,5:1 per il testo normale e 3:1 per il testo grande e per icone e bordi dell'interfaccia. Il livello AAA richiede 7:1 per il testo normale e 4,5:1 per il testo grande.

Che cosa si intende per testo grande?
Un testo di almeno 24 pixel CSS (18 punti), oppure di almeno 18,7 pixel CSS circa (14 punti) se in grassetto. I titoli sono spesso grandi; il testo dei paragrafi di solito no.

Perché #777777 su bianco non supera la verifica?
Il suo rapporto è 4,47:1, appena sotto il 4,5:1 richiesto per il testo normale. I rapporti non vengono arrotondati per eccesso, quindi un grigio leggermente più scuro come #767676 (4,54:1) è il grigio più chiaro che supera la verifica su bianco.

W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)
W3C — WCAG 2.2, 1.4.11 Non-text Contrast