Lo strumento usa la formula ufficiale WCAG per la luminanza relativa, quindi i valori coincidono con quelli del checker WebAIM e della maggior parte degli strumenti di audit per l'accessibilità. Tutto gira nel browser - i colori non vengono mai inviati a server esterni e non ci sono limiti d'uso.
Controllo contrasto colori
Funziona interamente nel browser: nessun caricamento, nessuna registrazione.
Rapporto di contrasto
Superatorichiede 4.5:1
Superatorichiede 3:1
Non superatorichiede 7:1
Superatorichiede 4.5:1
Grande = 18pt (24px), o 14pt (18,66px) in grassetto.
Che cos'è un controllo del contrasto colori?
Il controllo del contrasto colori misura il rapporto di contrasto tra il colore del testo e quello dello sfondo, e indica se soddisfa gli standard di accessibilità WCAG. Restituisce un valore da 1:1 a 21:1 e mostra il risultato per AA e AAA, sia per testo normale che per testo grande.
Come si usa
- 1Inserisci i colori. Digita un codice hex, un valore rgb() o il nome di un colore CSS per il testo e lo sfondo, oppure sceglili con il selettore colore.
- 2Leggi il rapporto. Il rapporto di contrasto si aggiorna in tempo reale, con un'anteprima del testo sul suo sfondo.
- 3Controlla i badge. Ogni badge mostra il risultato per WCAG AA e AAA, per testo normale e testo grande.
A chi serve
- Designer che testano i colori del brand prima di passarli agli sviluppatori.
- Sviluppatori front-end che verificano i colori di pulsanti, link ed etichette rispetto ai requisiti WCAG AA.
- Auditor dell'accessibilità che documentano le anomalie di contrasto con i rapporti esatti.
- Team di content e di email marketing che si assicurano che il testo rimanga leggibile su sfondi colorati.
Domande frequenti
Il controllo del contrasto colori è gratuito?
Sì - è completamente gratuito, senza registrazione e senza limiti. Funziona interamente nel browser.
Quale rapporto di contrasto serve per WCAG AA?
WCAG 2.1 Livello AA richiede un rapporto di contrasto di almeno 4,5:1 per il testo normale e 3:1 per il testo grande. Il Livello AAA alza la soglia a 7:1 per il testo normale e 4,5:1 per il testo grande.
Cos'è il testo grande?
Il testo grande è almeno 18pt (circa 24px) con peso normale, oppure 14pt (circa 18,66px) in grassetto. Per il testo grande è ammesso un rapporto di contrasto inferiore, perché i caratteri più grandi sono più facili da leggere.
Come si calcola il rapporto di contrasto?
La formula è (L1 + 0,05) / (L2 + 0,05), dove L1 e L2 sono la luminanza relativa del colore più chiaro e di quello più scuro. La luminanza si calcola dai canali sRGB rosso, verde e blu secondo la definizione WCAG 2.x.
Supporta hex, RGB e nomi colore?
Sì. Puoi inserire hex a 3, 4, 6 o 8 cifre, valori rgb() e rgba(), oppure qualsiasi nome colore CSS come 'teal'. Puoi anche scegliere il colore con il selettore nativo.
Perché lo stesso rapporto a volte supera il test e a volte no?
Il rapporto richiesto dipende dalla dimensione del testo e dal livello target. Un rapporto di 3,5:1 non supera AA per il testo normale, ma lo supera per il testo grande - controlla sempre in base alle dimensioni e al livello che usi davvero.