Verificatore di contrasto dei colori

Cos'è Verificatore di contrasto dei colori?

Il Verificatore di contrasto dei colori è uno strumento online gratuito per il rapporto di contrasto WCAG, pensato per designer, sviluppatori e tester di accessibilità. Prende un colore di primo piano (testo) e uno di sfondo, calcola la luminanza relativa di ciascuno e riporta il rapporto di contrasto come valore da 1:1 a 21:1. Poi ti indica se quel rapporto soddisfa il livello AA di WCAG 2.1 (4.5:1 normale, 3:1 grande) e il livello AAA (7:1 normale, 4.5:1 grande), e mostra i due colori in un'anteprima dal vivo con testo di esempio così da valutare la leggibilità a colpo d'occhio. Usalo per verificare che corpo del testo, pulsanti, link ed etichette siano leggibili prima di pubblicare un design.

Come usare Verificatore di contrasto dei colori

1. Digita o incolla il colore di primo piano (testo) come valore HEX, oppure fai clic sul suo selettore di colore nativo per sceglierlo visivamente.
2. Fai lo stesso per il colore di sfondo su cui poggia il testo.
3. Leggi l'output del rapporto di contrasto, mostrato come un valore tipo 4.5:1 (1:1 sono colori identici, 21:1 è nero puro su bianco).
4. Controlla i badge AA e AAA per testo normale e per testo grande (18pt / 14pt grassetto e oltre) per vedere quali livelli vengono superati.
5. Guarda l'anteprima con testo di esempio renderizzata con i tuoi due colori per confermare che il testo sia comodamente leggibile.
6. Regola l'uno o l'altro colore finché non raggiungi il livello di contrasto di cui il tuo design ha bisogno.

Esempi

Primo piano #595959, Sfondo #ffffff

Rapporto 7.00:1 — supera AA e AAA per testo normale e grande

Primo piano #999999, Sfondo #ffffff

Rapporto 2.85:1 — non supera AA normale né AAA, non soddisfa nulla di quanto richiesto per il corpo del testo

Primo piano #767676, Sfondo #ffffff

Rapporto 4.54:1 — supera AA normale e AA grande, ma non AAA normale

Domande frequenti

Quali rapporti di contrasto richiede WCAG?

Il livello AA di WCAG 2.1 richiede almeno 4.5:1 per testo normale e 3:1 per testo grande. Il livello AAA è più rigoroso: 7:1 per testo normale e 4.5:1 per testo grande. Questo verificatore mostra un badge di superato/non superato per ciascuna di queste quattro soglie.

Cosa conta come testo grande?

WCAG definisce il testo grande come 18pt (circa 24px) e oltre, o 14pt (circa 18.66px) e oltre se in grassetto. Il testo grande ha un requisito di contrasto inferiore perché i glifi più grandi sono più facili da leggere, ed è per questo che i badge del testo grande possono essere superati quando quelli del testo normale no.

Come viene calcolato il rapporto di contrasto?

Usa la formula ufficiale WCAG: la luminanza relativa di ciascun colore è calcolata dai suoi canali sRGB linearizzati, e il rapporto è (più chiaro + 0.05) / (più scuro + 0.05). Il risultato va da 1:1 (colori identici) a 21:1 (nero su bianco).

Supporta alfa, RGB o colori con nome?

L'input è solo HEX (#rgb abbreviato o #rrggbb), con un selettore di colore nativo per ogni campo. Non tiene conto di alfa/opacità né di trasparenza parziale — combina prima i livelli semitrasparenti in un colore pieno, poi verifica quello.

I miei colori vengono inviati a un server?

No. I calcoli di luminanza e rapporto vengono eseguiti interamente nel tuo browser con JavaScript — nessun colore viene caricato e nulla viene inviato a un server, quindi funziona in modo privato e persino offline una volta caricata la pagina.