Contrast Checker: verifica il contrasto cromatico secondo le WCAG

Il Contrast Checker è gratis e non richiede registrazione. Il rapporto di contrasto viene calcolato direttamente nel tuo browser: i tuoi colori non vengono inviati a un server.

Seguendo la formula WCAG 2.x, lo strumento calcola prima la luminanza relativa (L) di entrambi i colori, poi divide L del colore più chiaro più 0.05 per L del colore più scuro più 0.05. Il risultato va da 1:1 (colori identici) a 21:1 (nero su bianco); l'ordine dei colori non conta. Più alto è il valore, più facile è leggere il testo sullo sfondo.

Per il livello AA, il testo normale richiede almeno 4.5:1 e il testo grande 3:1. Il livello AAA, più rigoroso, richiede 7:1 per il testo normale e 4.5:1 per quello grande. I componenti UI e gli elementi grafici, come i bordi dei campi di input o le icone, richiedono 3:1. La maggior parte dei requisiti di legge fa riferimento al livello AA; AAA è un livello più rigoroso e facoltativo.

Il testo è considerato grande a partire da 18pt (24px), oppure da 14pt (18.66px) se è anche in grassetto. Per il testo grande si applicano requisiti minimi di contrasto inferiori (3:1 anziché 4.5:1 per AA), perché i caratteri più grandi restano leggibili anche con un contrasto minore.

Valori esadecimali con o senza #, a tre o sei cifre (#fff o #ffffff), rgb() e rgba(), nonché valori semplici come 34, 34, 34. Puoi anche scegliere ogni colore nel selettore colori. Per rgba(), il valore alfa viene ignorato: lo strumento usa il colore opaco. Se inserisci un valore non valido, il campo resta contrassegnato finché non lo correggi.

Se la tua combinazione non raggiunge il livello AA per il testo normale (4.5:1), con un clic lo strumento suggerisce il colore più vicino che raggiunge questa soglia. Modifica solo la luminosità del testo o dello sfondo, scegliendo il colore che richiede la modifica minore. Con «Applica» puoi usare il colore suggerito. Esempio: #777777 su #ffffff raggiunge 4.48:1; il colore suggerito #767676 raggiunge 4.54:1.

Sì. Il Contrast Checker inserisce automaticamente nell'URL i colori attuali del primo piano e dello sfondo. Se copi il link dalla barra degli indirizzi, chi lo apre vedrà la stessa combinazione. Tramite i link sotto l'anteprima puoi anche passare il colore del primo piano al simulatore di daltonismo o al generatore di schemi di colori.

Leggi come l'European Accessibility Act (EAA) e le sue attuazioni nazionali, o l'ADA negli Stati Uniti, impongono a molti siti web e app un livello minimo di accessibilità, facendo generalmente riferimento alle WCAG. Un contrasto del testo sufficiente è uno dei requisiti verificati più spesso. Questo strumento non sostituisce una consulenza legale, ma ti aiuta a verificare i valori tecnici di contrasto previsti dalle WCAG.