Verifica contrasto colori

Verifica una coppia di colori

1. Inserisci ogni colore in HEX a tre o sei cifre oppure usa il selettore. Lo sfondo deve essere uniforme e opaco.
2. Lascia l’opacità del primo piano al 100% per testo opaco, oppure inserisci una percentuale inferiore. I risultati si aggiornano quando tutti e tre i valori sono validi.
3. Leggi il rapporto e i risultati separati per testo normale, testo grande e dettagli non testuali. Valuta il contesto reale e, se necessario, copia il rapporto con le sue precisazioni.

Interpretare i risultati

Per il testo normale le soglie numeriche sono 4,5:1 per AA e 7:1 per AAA. Il calcolo confronta la luminanza relativa, non la differenza tra i nomi dei colori.

Per il testo grande le soglie sono 3:1 per AA e 4,5:1 per AAA. Il testo grande misura almeno 18 pt normale o 14 pt grassetto, o una dimensione equivalente per altre scritture: circa 24 e 18,67 pixel CSS. La tipografia effettiva va comunque verificata.

L’opacità del primo piano cambia il colore risultante sullo sfondo scelto. Al 100% è opaco; allo 0% scompare nello sfondo e il rapporto è 1:1. La trasparenza dello sfondo non è prevista.

La riga non testuale 3:1 confronta questa coppia per dettagli visivi essenziali rispetto al colore adiacente. Le decisioni usano il rapporto non arrotondato; le due cifre decimali servono solo alla lettura.

Esempi da verificare

Nero #000000 su bianco #FFFFFF al 100% di opacità produce 21:1 e raggiunge tutte le cinque soglie numeriche mostrate. Scambiare i colori opachi non cambia il rapporto.

Grigio #777777 su bianco produce circa 4,48:1. Non raggiunge 4,5:1 per il testo normale AA, ma supera 3:1 per il testo grande AA.

Nero al 50% di opacità su bianco produce circa 3,98:1 in questo calcolo sRGB. Ridurre l’opacità può diminuire il contrasto anche quando la coppia opaca iniziale è molto contrastata.

La coppia è solo una parte dell’accessibilità

Lo strumento valuta colori sRGB uniformi con sfondo opaco e opacità facoltativa del primo piano. Non esamina pagine o caratteri, non campiona immagini o sfumature, non simula la visione dei colori e non valuta tutti i requisiti e le eccezioni WCAG.

Il raggiungimento di una soglia numerica non certifica l’accessibilità di una pagina o di un prodotto. Verifica dimensione e peso effettivi del testo, colori adiacenti, forme e stati significativi e altri requisiti. Anche rendering e antialiasing possono influire sulla leggibilità.

Calcolo nel browser

Il confronto avviene nel browser, senza caricamenti aggiunti dallo strumento né cronologia dei colori salvata. Il rapporto viene copiato negli appunti solo su richiesta. Servizi normali del sito e impostazioni del consenso restano separati.