Contrasto dei colori per testo, pulsanti e icone

Perché il contrasto conta

Un testo pallido costa lettori. Le persone ipovedenti, i lettori più anziani e chiunque guardi il telefono in piena luce hanno bisogno di una differenza chiara tra testo e sfondo. Le Web Content Accessibility Guidelines (WCAG) del W3C fissano quindi valori minimi per il testo, per controlli come pulsanti e campi di inserimento, e per icone e grafici. Si possono misurare e controllare prima della pubblicazione.

Come funziona il rapporto di contrasto

Il rapporto di contrasto confronta la luminosità di due colori. Le WCAG non guardano la tonalità, ma la luminanza relativa: un valore tra 0 per il nero più scuro e 1 per il bianco più chiaro. I tre canali rosso, verde e blu vengono convertiti e pesati: il verde conta di più, il rosso meno e il blu meno di tutti. Il rapporto è (L1 + 0,05) / (L2 + 0,05), dove L1 è la luminanza del colore più chiaro. Il risultato sta tra 1:1 per due colori uguali e 21:1 per il nero su bianco.

In pratica contano due regole del W3C. Primo, i valori non si arrotondano: un rapporto di 4,499:1 non raggiunge il limite di 4,5:1. Secondo, il contrasto si misura rispetto allo sfondo impostato per il testo. Se una pagina imposta solo un colore del testo e nessun colore di sfondo, il W3C lo considera un errore, perché lo sfondo predefinito del visitatore non è noto. Imposta sempre entrambi i colori insieme.

I tre criteri di successo

• 1.4.3 Contrasto (minimo), livello AA: testo e immagini di testo hanno bisogno di almeno 4,5:1, il testo grande di almeno 3:1.
• 1.4.6 Contrasto (avanzato), livello AAA: il testo ha bisogno di almeno 7:1, il testo grande di almeno 4,5:1. È il livello più severo e aiuta soprattutto con i testi lunghi.
• 1.4.11 Contrasto non testuale, livello AA: almeno 3:1 rispetto ai colori adiacenti, per tutto ciò che serve vedere per riconoscere un controllo e il suo stato (per esempio il bordo di un campo o un indicatore di focus) e per le parti dei grafici necessarie a capire il contenuto, come icone o linee in un grafico.

Cosa conta come testo grande

Il testo grande è di almeno 18 punti, o di almeno 14 punti in grassetto. Il W3C lo converte in circa 24 pixel e circa 18,5 pixel in grassetto. Il testo grande può avere meno contrasto perché le lettere sono più grandi e i tratti più larghi. Attenzione ai font sottili: secondo il W3C, l’anti-aliasing può far sembrare font sottili o insoliti più tenui del colore definito. Raccomanda font più spessi o una coppia di colori chiaramente sopra il minimo.

Cosa non deve rispettare i valori

• Componenti inattivi, come un pulsante disabilitato.
• Pura decorazione e testo che nessuno può vedere.
• Testo che fa parte di un logo o di un nome di marchio.
• Testo casuale in un’immagine con altro contenuto significativo, come un cartello stradale in una foto.

Errori comuni

• Grigio chiaro su bianco. Il grigio per date, didascalie o testo secondario è spesso troppo pallido: #999999 su bianco arriva solo a 2,84:1. Il grigio puro più chiaro che rispetta AA per il testo normale su bianco è #767676 con 4,54:1.
• Testo su immagini. Il contrasto cambia con ogni parte della foto. Il W3C indica le immagini di sfondo senza contrasto sufficiente come errore (F83). Metti il testo su un’area piena, scurisci l’immagine dietro o metti il testo accanto all’immagine. Controlla il punto più chiaro dietro il testo.
• Testo del placeholder. Il suggerimento grigio in un campo vuoto è testo, e vale il criterio 1.4.3. Un grigio chiaro come #9ca3af su bianco arriva solo a 2,53:1. Un placeholder, inoltre, non sostituisce un’etichetta visibile.
• Stati hover e focus. Il testo che compare o cambia al passaggio del mouse o con il focus della tastiera deve rispettare gli stessi valori. Un effetto hover non deve ridurre il contrasto di un controllo né indebolire l’indicatore di focus. Un indicatore di focus disegnato da te ha bisogno di 3:1 rispetto allo sfondo adiacente.
• Testo bianco su colori del brand accesi. Pulsanti arancioni, gialli, verde chiaro o turchesi con testo bianco spesso non bastano: bianco su #ff6600 arriva a 2,93:1.
• Bordi e icone pallidi. Se il bordo è l’unica cosa che mostra dove si trova un campo, ha bisogno di 3:1: #cccccc su bianco ha 1,60:1. Anche le icone che hanno un significato senza testo, come la freccia di un menu a tendina o l’icona di chiusura, hanno bisogno di 3:1.
• Controllare un solo tema. Se il tuo sito ha una modalità scura, controlla a parte le sue coppie di colori. Un colore che funziona sul bianco può non funzionare su uno sfondo scuro.

Correggere una palette senza perdere il brand

1. 1Annota ogni colore con il suo ruolo: testo, sfondo, accento o pulsante, bordo. Molti problemi nascono quando un solo colore fa tutto.
2. 2Tieni il colore del brand dove le regole sono più facili da rispettare o non valgono: nel logo, sulle grandi superfici, per la decorazione e per i titoli grandi.
3. 3Per il testo e gli elementi piccoli usa una sfumatura più scura o più chiara della stessa tonalità. Se cambia solo la luminosità, il colore resta riconoscibile: testo bianco su #c74f00, un arancione più scuro, arriva a 4,61:1.
4. 4Oppure cambia il colore del testo. Un testo scuro su un colore del brand acceso spesso funziona meglio del bianco: #1a1a1a su #ff6600 arriva a 5,92:1.
5. 5Definisci un grigio per il testo secondario che rispetti i valori, per esempio #767676 su bianco, e usalo ovunque al posto di vari grigi pallidi.
6. 6Controlla ogni stato: normale, hover, focus, errore e modalità scura. Salva i colori finali come variabili nel foglio di stile, così nessuno sceglie di nuovo a mano un colore pallido.

Controlla i tuoi colori con Do4U

Il Controllo del contrasto cromatico calcola questi valori per i tuoi colori. Inserisci i colori, uno per riga, e dai a ciascuno un ruolo: testo, sfondo, accento (per esempio un pulsante) o bordo. Il codice controlla ogni coppia sensata rispetto ad AA e AAA per testo normale e grande e rispetto a 3:1 per bordi, icone e aree dei pulsanti, senza arrotondare per eccesso. Per ogni coppia che non basta ricevi il colore più vicino che rispetta il valore, una volta più scuro e una volta più chiaro, nella stessa tonalità. Do4U crea anche una palette adattata, la controlla di nuovo nel suo insieme e la esporta come proprietà personalizzate CSS, SCSS o JSON. Tutto funziona nel codice, senza IA, e il controllo è gratuito.

Il controllo conosce solo le coppie di colori che inserisci. Non vede dimensioni dei font, immagini dietro il testo, trasparenze o stati hover e focus, quindi verifica anche le pagine finite. Do4U crea la bozza, tu controlli e decidi.