Contrasto (minimo)

Cosa richiede

Il testo e le immagini di testo devono avere un rapporto di contrasto di almeno 4,5:1 rispetto allo sfondo. Il testo grande — definito come 18pt (24px) con peso normale o 14pt (18,66px) in grassetto — richiede solo 3:1. Il rapporto viene calcolato sulla luminanza relativa di primo piano e sfondo. Loghi, nomi di marchi e testo puramente decorativo sono esentati. I controlli inattivi sono anch’essi esentati, ma attenzione: tale esenzione è più ristretta di quanto i designer generalmente ritengano.

Come soddisfare questo criterio

• Verificare ogni combinazione testo-sfondo con uno strumento di controllo del contrasto (axe DevTools, WebAIM, Stark, plugin per Figma). Raggiungere come minimo 4,5:1.
• Per il testo segnaposto di colore grigio chiaro nei campi modulo, portarlo ad almeno 4,5:1 rispetto allo sfondo del campo — il testo segnaposto è pur sempre testo.
• Verificare le sezioni in evidenza con testo sopra immagini. Il colore di sfondo varia pixel per pixel: occorre controllare la zona peggiore oppure aggiungere una sovrapposizione scura.
• Per la modalità scura, ricalcolare ogni rapporto — i token di colore che superano la soglia su bianco spesso non la superano su quasi-nero.
• Per i colori di marca che non passano su bianco, scurire il colore per il solo uso testuale, mantenendo l’originale per la grafica.
• Per i pulsanti, ciò che conta è il contrasto tra l’etichetta e lo sfondo del pulsante, non tra il pulsante e la pagina.

Errori comuni

• Testo di aiuto in grigio chiaro (#999 su #fff = 2,85:1) nei campi modulo — non supera la soglia.
• Testo bianco su un pulsante del colore del brand quando tale colore ha una saturazione media (arancione, giallo-verde, turchese).
• Titoli in evidenza posizionati sopra fotografie senza alcuna sovrapposizione — il contrasto varia sull’immagine e spesso scende sotto 3:1.
• Testo segnaposto che usa lo stesso colore dell’etichetta ma con peso inferiore, rendendolo l’elemento a contrasto più basso nella pagina.
• Pulsanti «inattivi» o «disabilitati» stilizzati a 2:1, il che va bene se sono davvero non interattivi — ma spesso sono ancora raggiungibili da tastiera, invalidando l’esenzione.
• Token per la modalità scura che rispecchiano la modalità chiara senza ricalcolare i rapporti — #bbb su #222 è prossimo alla conformità ma non la raggiunge.

Perché è importante

Il criterio 1.4.3 è il singolo errore più citato negli audit di accessibilità, senza eccezioni. Lighthouse, axe, Stark e tutti gli strumenti automatizzati lo segnalano in modo affidabile, quindi è anche il più economico da rilevare. La correzione consiste solitamente in una modifica a un singolo token di design che si propaga sull’intero sistema — si effettua una volta, si testa una volta, si pubblica. Ignorarla è quasi sempre un compromesso tra identità visiva e accessibilità che sfocia in una segnalazione.