Accessibilità Web: Capire il Contrasto dei Colori

Il contrasto dei colori è essenziale per l'accessibilità ed è un requisito legale in molti paesi. Scopri cosa richiedono le linee guida WCAG.

Un uomo su dodici e una donna su duecento hanno qualche forma di deficit nella visione dei colori. Un contrasto adeguato garantisce che il tuo sito sia leggibile per tutti, incluse persone con disabilità visive, anziani e chi usa uno schermo alla luce solare diretta.

Lo standard di contrasto WCAG

Le Web Content Accessibility Guidelines (WCAG) definiscono rapporti di contrasto minimi. Il livello AA richiede 4,5:1 per il testo normale e 3:1 per il testo grande (18pt o 14pt grassetto). Il livello AAA richiede 7:1 per il testo normale — lo standard d'oro per la massima accessibilità.

Come viene calcolato il rapporto di contrasto

Il rapporto di contrasto è derivato dalla luminanza relativa di due colori. Un rapporto di 1:1 significa nessun contrasto, mentre 21:1 è il massimo teorico (nero puro su bianco puro). La formula tiene conto di come l'occhio umano percepisce la luminosità.

Consigli pratici per un contrasto migliore

Il testo scuro su sfondi chiari quasi sempre supera il testo chiaro su sfondi colorati. Evita il testo grigio chiaro su bianco — una tendenza di design comune che non supera i controlli di accessibilità. Verifica sempre il contrasto quando usi i colori del brand per il testo.

Come usare il verificatore di contrasto

Inserisci i colori di primo piano e sfondo tramite il selettore di colori o i campi esadecimali. Lo strumento calcola istantaneamente il rapporto di contrasto e mostra quali livelli WCAG vengono superati. L'anteprima live mostra come appare realmente la tua combinazione di testo.