Rapporto di contrasto e testo leggibile

Il grigio #767676 su bianco ha un rapporto di contrasto di 4.54:1 e supera il minimo WCAG per il testo corrente; un passo più chiaro, #777777, dà 4.48:1 e non lo supera.

Luminanza relativa

Per decidere se un testo si può leggere, le Web Content Accessibility Guidelines non usano la tonalità né la luminosità HSL. Usano la luminanza relativa, un numero da 0 per il nero a 1 per il bianco che segue quanta luce un colore manda all'occhio. WCAG 2.2 la definisce in due passi. Primo, ogni canale viene trasformato in un numero da 0 a 1 dividendo per 255 e poi annullando la curva sRGB: se il valore è al massimo 0.04045, lo si divide per 12.92; altrimenti si calcola ((valore + 0.055) / 1.055) elevato alla potenza 2.4. Secondo, i tre risultati vengono pesati e sommati: L = 0.2126 R + 0.7152 G + 0.0722 B.

I pesi spiegano molto. Il verde porta più del 70% del totale, il blu appena il 7%. Per questo il blu puro #0000ff ha una luminanza di soli 0.0722 e il giallo puro, rosso più verde, ha 0.9278. La specifica registra anche una piccola storia: prima di maggio 2021 la soglia era scritta 0.03928, copiata da un documento più vecchio. Fu corretta in 0.04045, e WCAG nota che questo non ha effetti pratici sui risultati.

Rapporto di contrasto

Il rapporto di contrasto confronta due luminanze: (L1 + 0.05) / (L2 + 0.05), dove L1 è il colore più chiaro e L2 il più scuro. Lo 0.05 rappresenta un po' di luce diffusa che raggiunge sempre l'occhio, e mantiene finito il rapporto per il nero. I rapporti vanno da 1:1, un colore contro se stesso, a 21:1, nero contro bianco: (1 + 0.05) / (0 + 0.05) = 21. Per #767676 su bianco la luminanza è 0.1812, quindi il rapporto è 1.05 / 0.2312 = 4.54.

Ecco l'intero calcolo per il blu #2273c3 usato nell'unità 2, rgb(34 115 195). Divisi per 255, i canali sono 0.1333, 0.4510 e 0.7647. Tutti e tre sono sopra 0.04045, quindi ciascuno passa per la formula della potenza, dando 0.0160, 0.1714 e 0.5457. Pesati, diventano 0.0034 dal rosso, 0.1226 dal verde e 0.0394 dal blu, e la somma è una luminanza di 0.1654. Contro il bianco il rapporto è 1.05 / 0.2154 = 4.87, quindi questo blu supera il livello AA per il testo corrente su una pagina bianca. Contro il nero è 0.2154 / 0.05 = 4.31, per poco insufficiente.

Le soglie

WCAG 2.2 trasforma il rapporto in indicazioni «Superato» o «Non superato». Il criterio di successo 1.4.3, al livello AA, chiede almeno 4.5:1 per il testo normale e 3:1 per il testo di grandi dimensioni. Grandi dimensioni significa almeno 18 punti, o 14 punti in grassetto; WCAG nota che sono circa 1.5 em e 1.2 em in grassetto per i comuni caratteri del testo corrente. Il criterio 1.4.6, al livello AAA, alza l'asticella a 7:1 e 4.5:1. Il criterio 1.4.11 chiede 3:1 per le parti di pulsanti, campi di modulo e icone che le persone devono vedere. Il rosso puro #ff0000 su bianco dà 4.00:1, che va bene per un titolo grande ma non supera il test per il testo corrente. Il blu #0000ff su bianco dà 8.59:1 e supera tutto.

Un altro fatto utile emerge dalla formula. Un colore con luminanza circa 0.179 ha lo stesso contrasto contro il bianco e contro il nero, circa 4.58:1. Più scuro di così, il testo bianco si legge meglio su di esso; più chiaro di così, il testo nero. Il pannello sotto il modello mostra entrambi i rapporti e indica la scelta migliore.