Rispettare il contrasto cromatico WCAG senza tirare a indovinare

Per il testo corrente normale, il livello AA delle WCAG chiede un rapporto di contrasto di almeno 4,5:1 rispetto al suo sfondo. Il testo grande richiede 3:1. I componenti di interfaccia e la grafica significativa richiedono 3:1. Il livello AAA porta il testo a 7:1 e il testo grande a 4,5:1. I rapporti vanno da 1:1 (colori identici) a 21:1 (nero puro su bianco puro).

Non puoi giudicarlo a occhio. Due coppie che sul tuo monitor sembrano ugualmente leggibili possono trovarsi su lati opposti della soglia, quindi il rapporto va calcolato.

Le soglie

Derivano da tre criteri di successo: 1.4.3 Contrasto (minimo) al livello AA, 1.4.6 Contrasto (avanzato) al livello AAA e 1.4.11 Contrasto del contenuto non testuale al livello AA, che riguarda i confini visivi dei controlli e le parti di un elemento grafico che servono per capirlo.

Testo grande significa almeno 18 punti, o 14 punti se in grassetto, il che corrisponde all'incirca a 24px normale o a circa 18,5px in grassetto. Non significa «un titolo»: per le regole un titolo da 20px è testo normale e richiede tutti i 4,5:1.

Alcune cose sono esentate: il testo puramente decorativo, il testo in un controllo disattivato, il testo che fa parte di un'immagine contenente altro contenuto visivo significativo e i logotipi. Il testo segnaposto e quello di aiuto non sono esentati.

Che cosa misura davvero il rapporto

La formula confronta la luminanza relativa dei due colori:

ratio = (L_lighter + 0.05) / (L_darker + 0.05)

La luminanza relativa è un numero da 0 (nero) a 1 (bianco) che rappresenta quanta luce emette un colore. Si calcola annullando la curva gamma sRGB su ciascun canale e poi pesando i canali fra loro:

L = 0.2126 R + 0.7152 G + 0.0722 B     (on linearised channels)

Lo 0.05 aggiunto a entrambi i lati modella un po' di luce ambientale riflessa dallo schermo, ed è il motivo per cui il massimo è 21 e non infinito.

Ne seguono due cose. Il rapporto dipende solo dalla luminanza, non dalla tinta, quindi due colori possono avere tinte completamente diverse ed essere comunque quasi invisibili l'uno sull'altro. Ed è simmetrico, quindi non importa quale dei due chiami primo piano.

La luminanza relativa non è la brillantezza

Guarda quei pesi. Il verde contribuisce per circa il 72% della luminanza, il rosso per circa il 21% e il blu per appena il 7%. È un modello della visione umana, non di quanto vivido appare un colore, e produce risultati che sembrano sbagliati finché non ci si abitua.

• Il giallo puro #FFFF00 su bianco sta intorno a 1,07:1, quasi invisibile, nonostante il giallo dia l'impressione di essere un colore forte.
• Lo stesso giallo su nero sta intorno a 19,6:1, quasi quanto il bianco su nero.
• Il blu puro #0000FF su nero sta intorno a 2,4:1 e non supera nulla, anche se appare deciso e saturo.

È anche il motivo per cui la luminosità di HSL è un cattivo sostituto. Due colori possono stare entrambi al 50% di luminosità in HSL e avere luminanze molto diverse, perché HSL tratta tinta e luminosità come indipendenti mentre la visione no. Converti e poi misura, invece di dare per scontato che un gradino di luminosità sia un gradino di contrasto.

Gli errori che continuano a ripetersi

Testo corrente grigio su bianco. Questo è il grande classico. Il grigio più chiaro che supera il livello AA su bianco è circa #767676, che arriva a 4,54:1. Un gradino più chiaro, #777777, sta a 4,48:1 e non passa. I grigi «smorzati» molto usati come #999999 si fermano intorno a 2,9:1, meno di due terzi del requisito. Se vuoi il livello AAA su bianco ti serve all'incirca #595959, che è esattamente 7:1.

Testo segnaposto e testo di aiuto. Vengono impostati diverse tonalità più chiare del testo corrente perché sono secondari. Restano comunque testo e richiedono comunque 4,5:1.

Colori semitrasparenti. Un rapporto calcolato sul colore dichiarato non significa nulla se l'elemento sta al 60% di opacità. Ricava il colore composito che compare davvero a schermo e misura quello.

Testo sopra immagini, gradienti e video. Il rapporto cambia da pixel a pixel e quello che conta è il pixel peggiore. La soluzione abituale è un velo dietro al testo, invece di sperare che la foto resti scura.

Pulsanti nel colore del marchio. Il testo bianco su un colore di marchio di tono medio finisce molto spesso fra 3:1 e 4,5:1, superando la prova come oggetto grafico e fallendola come etichetta. Scurisci il pulsante, oppure accetta il fallimento in modo consapevole.

Indicatori di focus e pulsanti con la sola icona. Entrambi ricadono sotto la regola del 3:1 per il contenuto non testuale. Un anello di focus in una tonalità appena diversa dello stesso colore è una svista frequente, così come un'icona grigia che è l'unico contenuto di un pulsante.

Tema scuro ottenuto per inversione. Ribaltare una palette chiara non conserva i rapporti, perché la luminanza non è simmetrica rispetto al centro. Il bianco puro su nero puro dà il massimo di 21:1, ma molte persone trovano fastidioso l'alone che ne deriva, quindi un bianco sporco su un grigio molto scuro, come #E6E6E6 su #121212 intorno a 15:1, è un compromesso frequente.

Misurare da uno screenshot. Un contagocce sul bordo di un testo con antialiasing campiona una miscela di testo e sfondo, non il colore del testo. Campiona il centro di un tratto spesso, o meglio ancora leggi i valori dal tuo CSS.

Un metodo di lavoro che evita di tirare a indovinare

Fissa prima lo sfondo, poi scurisci o schiarisci il primo piano finché non supera la soglia con un piccolo margine, e annota quella coppia. Costruisci la palette a partire da coppie approvate invece che da colori approvati: un colore non è accessibile da solo, lo è solo in combinazione. Controlla anche tutti gli stati, non solo quello a riposo, ed entrambi i temi se pubblichi anche una modalità scura.

Un'ultima nota. Un modello percettivo più recente, APCA, è in sviluppo per una versione futura delle WCAG e si comporta in modo piuttosto diverso, in particolare per il testo chiaro su sfondi scuri. Vale la pena conoscerlo, ma i numeri a cui conformarsi oggi sono i rapporti delle WCAG 2 riportati sopra.