DevToolPal
IT

Verifica del contrasto colori (WCAG)

Verifica il rapporto di contrasto WCAG 2.x tra colore del testo e dello sfondo, con esito AA e AAA per testo normale, testo grande e interfaccia, anteprima dal vivo e il colore conforme più vicino.

Eseguito in locale, mai caricato

Colori

Colore del testo
Colore di sfondo

I colori trasparenti vengono prima miscelati: il testo sopra lo sfondo, lo sfondo sopra il bianco.

Anteprima

Testo grande

Il testo del corpo deve essere facile da leggere per tutti, comprese le persone ipovedenti o con lo schermo poco luminoso.

Pulsante

Rapporto di contrasto

—

Colori conformi più vicini

Cosa fa

La verifica del contrasto ti dice se un colore del testo è leggibile su un colore di sfondo secondo le Linee guida per l’accessibilità dei contenuti Web (WCAG 2.x). Inserisci qualsiasi colore CSS per testo e sfondo — HEX, rgb(), hsl(), un nome di colore o un colore trasparente — e vedrai il rapporto di contrasto, l’esito di ogni criterio AA e AAA e un’anteprima dal vivo. Se la coppia non supera la verifica, lo strumento suggerisce i colori di testo e di sfondo conformi più vicini, mantenendo la stessa tinta. Tutto avviene nel tuo browser.

Come si usa

  1. Inserisci o scegli il Colore del testo e il Colore di sfondo. Scambia li inverte.
  2. Leggi il Rapporto di contrasto e l’elenco degli esiti per testo normale, testo grande e componenti dell’interfaccia.
  3. Se un livello non è superato, guarda Colori conformi più vicini: ogni suggerimento mostra il nuovo colore, il suo rapporto, un pulsante di copia e Usa per applicarlo.
  4. Attiva APCA per vedere anche il contrasto di luminosità (Lc) della bozza WCAG 3.

I colori semitrasparenti vengono miscelati prima della verifica: il testo sopra lo sfondo e lo sfondo sopra il bianco.

Esempio

#767676 on #ffffff  →  4.54:1  passes AA normal text
#777777 on #ffffff  →  4.47:1  fails AA normal text, passes AA large text
#000000 on #ffffff  →  21:1    the maximum

Come si calcola il rapporto

La luminanza relativa di ogni colore si calcola dai canali sRGB (linearizzati e pesati 21% rosso, 72% verde e 7% blu). Il rapporto è (più chiaro + 0,05) / (più scuro + 0,05) e va da 1:1 per colori identici a 21:1 per nero su bianco. Conta solo la luminosità, non la tinta: rosso puro su verde puro sembra vivace ma arriva appena a circa 1,3:1.

I suggerimenti cambiano solo la luminosità del colore (in HSL) e scelgono la direzione, più scura o più chiara, che richiede il cambiamento minore. A volte nessuna tonalità basta: su uno sfondo grigio medio nessun colore del testo raggiunge 7:1.

Domande frequenti

› Che rapporto di contrasto serve?

Il livello AA delle WCAG 2.x richiede almeno 4,5:1 per il testo normale e 3:1 per il testo grande e per i componenti dell'interfaccia come bordi dei campi, icone e indicatori di focus. Il livello AAA richiede 7:1 per il testo normale e 4,5:1 per quello grande. La maggior parte delle leggi e delle policy fa riferimento al livello AA.

› Cosa si intende per testo grande?

Testo di almeno 24px (18pt) di peso normale, oppure di almeno 18,66px (14pt) in grassetto. Tutto ciò che è più piccolo è testo normale e richiede il rapporto più alto.

› Perché 4,49:1 non è superato?

Le soglie WCAG sono esatte: un rapporto di 4,499 non raggiunge 4,5. Per questo lo strumento tronca il rapporto mostrato invece di arrotondarlo per eccesso, e decide in base al valore esatto.

› Che cos'è APCA?

APCA (Accessible Perceptual Contrast Algorithm) è il metodo di contrasto proposto per la bozza delle WCAG 3. Restituisce un valore di contrasto di luminosità Lc che dipende da quale colore è il testo e si adatta meglio alla modalità scura. Non è ancora uno standard legale, quindi qui è mostrato solo come indicazione aggiuntiva.