Verificatore di Contrasto
Il Contrast Checker calcola il rapporto di contrasto WCAG 2.1 tra un colore del testo e un colore di sfondo e mostra se la coppia supera i livelli AA e AAA per testo normale e grande.
Informazioni su questo strumento
Il Contrast Checker calcola il rapporto di contrasto WCAG 2.1 tra un colore del testo e un colore di sfondo e mostra se la coppia supera i livelli AA e AAA per testo normale e grande.
Come si usa
- Inserisci o scegli il colore del testo.
- Inserisci o scegli il colore di sfondo (funzionano i valori esadecimali, anche in forma abbreviata a 3 cifre).
- Leggi il rapporto di contrasto e i risultati AA/AAA per testo normale e grande.
- Regola uno dei due colori finché il livello che ti serve non viene superato.
Da sapere
- WCAG 2.1 AA richiede un rapporto di contrasto di almeno 4.5:1 per il testo normale e 3:1 per il testo grande.
- WCAG 2.1 AAA richiede almeno 7:1 per il testo normale e 4.5:1 per il testo grande.
- Per testo grande si intende almeno 18 pt (24 px) normale o 14 pt (circa 18.66 px) in grassetto.
- I rapporti di contrasto vanno da 1:1 (colori identici) a 21:1 (nero su bianco).
- Il rapporto viene calcolato dalla luminanza relativa di ciascun colore, secondo la formula WCAG.
Funziona interamente nel tuo browser: nulla di ciò che inserisci viene caricato o salvato.
Domande frequenti
Quale rapporto di contrasto serve per l'accessibilità?
Per WCAG 2.1 livello AA, il testo normale richiede almeno 4.5:1 e il testo grande almeno 3:1. Il livello AAA alza i valori a 7:1 e 4.5:1.
Il testo bianco su verde è accessibile?
Dipende dalla tonalità. Molti verdi brillanti non superano il livello AA con testo bianco; i verdi più scuri di solito sì. Inserisci i tuoi valori esadecimali esatti per verificarlo.
Cosa si intende per testo grande nelle WCAG?
Un testo di almeno 18 punti (24 px) con peso normale, oppure di almeno 14 punti (circa 18.66 px) in grassetto.
Il contrasto WCAG vale anche per pulsanti e icone?
Il criterio di successo WCAG 2.1 1.4.11 richiede un contrasto di almeno 3:1 per i componenti dell'interfaccia e le grafiche significative rispetto a ciò che li circonda.