Contrasto dei colori

Il grigio chiaro #999999 su bianco ha un rapporto di contrasto di 2.85:1, molto sotto il 4.5:1 che le WCAG 2.2 chiedono per il testo normale.

Perché il contrasto conta

Un testo pallido rispetto allo sfondo è difficile da leggere per gli ipovedenti, per molti lettori anziani e per chiunque usi il telefono al sole. Le WCAG 2.2 non lasciano «pallido» al gusto personale. Misurano la luminanza relativa dei due colori, un numero da 0 per il nero a 1 per il bianco, e li confrontano con il rapporto di contrasto (L1 + 0.05) / (L2 + 0.05), dove L1 è il colore più chiaro. Il risultato va da 1:1, un colore su sé stesso, a 21:1, nero su bianco. Il corso di teoria del colore svolge la formula passo per passo; qui la usiamo.

I valori da rispettare

Il criterio di successo 1.4.3 Contrasto (minimo), di livello AA, chiede almeno 4.5:1 per il testo normale e 3:1 per il testo grande, che le WCAG definiscono come almeno 18 punti, o 14 punti in grassetto. Il criterio 1.4.6, di livello AAA, alza questi valori a 7:1 e 4.5:1. Il criterio 1.4.11 Contrasto in contenuti non testuali chiede 3:1 per le parti dei controlli e della grafica che le persone devono vedere, come il bordo di un campo di testo o le linee di un grafico. Loghi e testo puramente decorativo o parte di un controllo inattivo sono esenti.

Vale la pena ricordare alcuni valori. Il grigio #767676 dà 4.54:1 su bianco, ed è spesso citato come il grigio semplice più chiaro che supera AA; #777777 dà 4.48:1 e non supera. Il più scuro #595959 arriva a 7.00:1 e supera AAA. I colori saturi possono ingannare: il rosso puro #ff0000 su bianco dà solo 4.00:1, mentre il rosso più profondo #c01c28 arriva a 6.11:1. Il testo segnaposto dentro i campi dei moduli è un errore frequente, perché i designer spesso lo rendono molto chiaro di proposito.

Controllare i colori nella pratica

Raramente serve calcolare la formula a mano. Quando ispezioni un elemento di testo, il selettore di colore negli strumenti per sviluppatori dei principali browser mostra il suo rapporto di contrasto con lo sfondo, spesso con una linea che segna le soglie AA e AAA. Due casi richiedono più attenzione. Il testo sopra una foto o una sfumatura non ha un unico sfondo, quindi controllalo rispetto alla parte più chiara su cui si trova, oppure mettigli dietro un pannello pieno. E un sito con tema scuro va controllato due volte, perché un colore che supera su bianco può non superare su un quasi nero: il blu #1a5fb4 dà 6.29:1 su bianco ma solo 3.34:1 sul nero puro.

Mai solo il colore

Il contrasto tra testo e sfondo è metà della storia. Il criterio 1.4.1 Uso del colore, di livello A, dice che il colore non deve essere l'unico modo di mostrare un'informazione. Il rosso #c01c28 e il blu #1a5fb4 si leggono bene entrambi su bianco, ma l'uno contro l'altro il loro rapporto è solo 1.03:1. In scala di grigi, o per chi non distingue il rosso dal blu, diventano lo stesso grigio. Quindi un campo obbligatorio segnato solo da un'etichetta rossa, o un link che si distingue dal testo intorno solo per il colore, ha bisogno di un secondo segnale: una parola, un'icona, una sottolineatura.