Come funziona
Inserisci un colore per il testo e uno per lo sfondo per ottenere il rapporto di contrasto, un'anteprima dal vivo e l'esito superato o non superato per ogni livello WCAG. Se la coppia non supera il controllo, lo strumento suggerisce il colore del testo più vicino, con la stessa tonalità, che raggiunge 4,5:1, e basta un tocco per applicarlo.
Rapporto di contrasto = (luminanza più chiara + 0,05) ÷ (luminanza più scura + 0,05)
Requisiti WCAG
- Testo normale: almeno 4,5:1 per AA e 7:1 per AAA.
- Testo grande (24 px, o 18,66 px in grassetto): almeno 3:1 per AA e 4,5:1 per AAA.
- Pulsanti, icone e bordi dei moduli: almeno 3:1 rispetto a ciò che li circonda.
Consigli
- Il testo grigio su bianco spesso non supera il controllo — verifica anche placeholder e didascalie.
- Un buon contrasto aiuta tutti, anche chi legge all'aperto sullo smartphone.
- Usa il pulsante di inversione per verificare un testo chiaro su sfondo scuro.
Standard e fonti
- La formula e le soglie di contrasto seguono i criteri di successo 1.4.3, 1.4.6 e 1.4.11 delle WCAG 2.2 (W3C)
Ultima revisione 7 ottobre 2026
Domande frequenti
Che rapporto di contrasto serve?
Il testo normale richiede 4,5:1 per il livello WCAG AA e 7:1 per AAA. Il testo grande richiede 3:1 per AA e 4,5:1 per AAA.
Cosa si intende per testo grande?
Un testo di almeno 24 px, o di almeno 18,66 px se in grassetto.
Cosa faccio se i miei colori non superano il controllo?
Usa il colore suggerito. Mantiene tonalità e saturazione e cambia solo la luminosità finché la coppia non raggiunge 4,5:1.
Il contrasto conta anche per pulsanti e icone?
Sì. Le WCAG chiedono almeno 3:1 tra gli elementi dell'interfaccia, come pulsanti, icone e bordi dei campi, e ciò che li circonda.
La trasparenza influisce sul risultato?
Lo strumento usa colori pieni. Per un testo semitrasparente, verifica il colore che vedi effettivamente sopra lo sfondo.