Un testo grigio chiaro su fondo bianco può sembrare elegante in una mockup e diventare difficile da leggere su un telefono al sole. Un pulsante che comunica lo stato solo cambiando colore può essere ambiguo per chi distingue male alcune tonalità.
Il contrasto non è quindi soltanto una preferenza estetica: è una componente dell’accessibilità visiva.
Le soglie principali
Per il testo, le soglie più note delle WCAG sono:
| Situazione | AA | AAA |
|---|---|---|
| Testo normale | 4,5:1 | 7:1 |
| Testo grande | 3:1 | 4,5:1 |
Per alcuni elementi grafici e componenti necessari all’uso dell’interfaccia, il criterio sul contrasto non testuale utilizza generalmente 3:1 rispetto ai colori adiacenti rilevanti.
Questi numeri non descrivono però tutta l’accessibilità. Un’interfaccia può superare il test del testo e restare problematica se gli errori dipendono solo dal rosso, i bordi dei campi sono invisibili o gli stati focus non si distinguono.
Cos’è il rapporto di contrasto?
Confronta la luminanza relativa di due colori. Va da 1:1, quando la luminanza è uguale, fino a 21:1 per nero e bianco.
Non misura direttamente differenza di tonalità, saturazione, distanza HSL o qualità estetica. Due colori molto diversi come hue possono avere luminanze relativamente vicine.
Il verificatore di contrasto permette di calcolare rapidamente il rapporto.
Perché la lightness HSL non basta?
Due colori con L=50% in HSL non hanno necessariamente la stessa luminanza percepita. Giallo e blu possono condividere una lightness HSL numericamente identica e produrre livelli di contrasto molto diversi.
La L di HSL non è la luminanza relativa usata dalle WCAG. Non dedurre quindi il contrasto dalla sola lightness.
Formula del contrasto
La formula è:
(L1 + 0,05) / (L2 + 0,05)con L1 luminanza del colore più chiaro e L2 quella del più scuro. Le componenti sRGB devono essere linearizzate prima della ponderazione.
Nella pratica è meglio usare un calcolatore; conoscere la formula serve soprattutto a capire che si tratta di una misura precisa, non di un’impressione soggettiva.
Cosa significa 4,5:1?
Per il testo corrente, il livello AA richiede almeno 4,5:1 salvo le eccezioni previste dal criterio. Se il rapporto è inferiore, occorre modificare testo, sfondo o entrambi.
Non cercare però soltanto di superare la soglia di pochi centesimi: un margine ragionevole rende il design più robusto rispetto a variazioni di rendering e stati dell’interfaccia.
Testo grande
La soglia scende a 3:1 per testo considerato grande secondo le definizioni WCAG. Non bisogna usare questa eccezione come scorciatoia per rendere testi importanti appena più grandi e mantenere colori deboli.
La leggibilità dipende anche da font, peso, dimensione, schermo e condizioni di visione.