Controllo Contrasto Colori (WCAG)
Verifica che i tuoi colori rispettino gli standard di accessibilità WCAG — gratis, istantaneo.
Cos'è
Il Controllo Contrasto Colori è uno strumento gratuito per l'accessibilità che calcola il rapporto di contrasto tra un colore in primo piano e uno di sfondo secondo la specifica WCAG 2.1. Inserisci o scegli due colori e lo strumento mostra immediatamente il rapporto di contrasto, se supera il livello WCAG AA e AAA per testo normale e grande, e un'anteprima live di come appare effettivamente il testo su quello sfondo.
Come si usa
- Scegli il colore del testo usando il selettore colore o digitando un codice hex.
- Scegli il colore di sfondo allo stesso modo.
- Il rapporto di contrasto e i badge WCAG pass/fail si aggiornano istantaneamente.
- Controlla l'anteprima live per vedere quanto è leggibile il testo.
- Clicca "Esporta Report PNG" per scaricare un'immagine riepilogativa del risultato.
Perché usarlo
L'accessibilità web non è solo una buona pratica — in molti paesi è un requisito legale. Le linee guida WCAG 2.1 specificano che il testo normale deve avere un rapporto di contrasto di almeno 4,5:1 (AA) e idealmente 7:1 (AAA). Rilevare i problemi di contrasto nelle prime fasi del design evita costose correzioni successive.
Domande frequenti
Qual è il requisito di contrasto WCAG?
WCAG 2.1 Livello AA richiede un rapporto 4,5:1 per testo normale e 3:1 per testo grande. Livello AAA richiede 7:1 per testo normale e 4,5:1 per testo grande.
Cosa si intende per "testo grande" nel WCAG?
Il testo grande è definito come almeno 18 punti (24px) per peso normale, o almeno 14 punti (18,66px) per peso grassetto.
Posso inserire i colori come RGB o HSL invece di hex?
I campi di input accettano codici hex, e puoi usare il selettore colore integrato. Il rapporto viene calcolato dai valori sRGB indipendentemente da come hai inserito il colore.
Superare il livello AA garantisce l'accessibilità del sito?
Il contrasto è un fattore importante, ma la piena accessibilità include anche dimensione del font, spaziatura, navigazione da tastiera e compatibilità con i lettori di schermo.
Cosa contiene il PNG esportato?
Il PNG mostra entrambi i colori come campioni, il rapporto di contrasto e lo stato pass/fail per tutti e quattro i criteri WCAG.