Verifica del contrasto
Scegli il colore del testo e lo sfondo, e il rapporto di contrasto viene calcolato e confrontato con le WCAG.
Rapporto di contrasto
16,69:1
La scala va da 1:1 con due colori uguali fino a 21:1 con nero su bianco.
Ecco come appare
Titolo in testo grande
Il testo corrente in questa dimensione pone i requisiti più alti al contrasto, perché le lettere sono sottili.
Requisiti secondo le WCAG
- Testo corrente, AASotto i 18 punti, o sotto i 14 punti in grassetto · 4,5:1Soddisfa
- Testo corrente, AAASotto i 18 punti, o sotto i 14 punti in grassetto · 7:1Soddisfa
- Testo grande, AADai 18 punti, o 14 punti in grassetto · 3:1Soddisfa
- Testo grande, AAADai 18 punti, o 14 punti in grassetto · 4,5:1Soddisfa
- Elementi di interfaccia e grafica, AABordi, icone e altro che porta significato · 3:1Soddisfa
Come funziona
Il rapporto di contrasto misura la differenza di luminanza relativa fra due colori. Va da 1:1 con due colori uguali fino a 21:1 con nero su bianco.
Le WCAG chiedono per il testo corrente almeno 4,5:1 al livello AA e 7:1 al livello AAA. Per il testo grande – dai 18 punti, o 14 punti in grassetto – bastano 3:1 e 4,5:1.
Gli elementi di interfaccia e la grafica che porta significato hanno bisogno di 3:1 rispetto a ciò che li circonda. Vale per esempio per il bordo di un campo di inserimento e per le icone senza testo accanto.
Il rapporto si calcola dalla luminanza dei colori, non da quanto appaiano diversi. Due colori con la stessa luminosità ma tonalità molto diverse, per esempio rosso (#ff0000) e verde (#009400), ottengono rapporto 1,00 e sono illeggibili, anche se sembrano diversi.
I requisiti sono un limite minimo, non un traguardo. Un testo esattamente a 4,5:1 resta faticoso da leggere al sole o su uno schermo scadente.
Come calcola lo strumento
Ogni canale si divide per 255 e si rende lineare: i valori fino a 0,04045 si dividono per 12,92, e i valori v più grandi diventano ((v + 0,055) / 1,055) elevato a 2,4. La luminanza relativa è 0,2126 R + 0,7152 G + 0,0722 B, e il rapporto è (L1 + 0,05) / (L2 + 0,05), con il colore più chiaro come L1. La soglia 0,04045 è nelle WCAG da maggio 2021; prima era 0,03928, e il W3C dice che il cambio non ha effetti pratici. Per i colori hex non cambia niente, perché nessun valore di canale cade fra le due: 10/255 è 0,0392 e 11/255 è 0,0431.
Esempio
#767676 su bianco: il canale 118/255 = 0,463 diventa 0,181 una volta reso lineare, e siccome i tre canali sono uguali anche la luminanza è 0,181. Il rapporto è (1 + 0,05) / (0,181 + 0,05) = 4,54, che soddisfa AA per il testo corrente. Un passo più chiaro, #777777 dà 4,478 e non lo soddisfa. Il grigio più chiaro che soddisfa AAA, cioè 7:1, su bianco è #595959 con 7,0047; il passo successivo, #5a5a5a, dà 6,897.
Nessun arrotondamento
La spiegazione del W3C al criterio di successo 1.4.3 dice che il rapporto non va arrotondato: 4,499:1 non raggiunge 4,5:1. Lo strumento giudica sul valore non arrotondato e tronca la cifra invece di arrotondarla. #0080aa su bianco dà 4,4986 e non soddisfa il requisito per il testo corrente. Arrotondato si leggerebbe 4,50 accanto a un esito negativo, quindi lo strumento mostra 4,49:1, e #777777 compare come 4,47:1.
Testo grande, caratteri sottili e siti pubblici
La soglia per il testo grande è espressa in punti. Con 1 punto pari a 1,333 pixel CSS, 18 punti sono circa 24 pixel e 14 punti circa 18,5 pixel, secondo la stessa spiegazione, che avverte anche che i caratteri sottili possono apparire più chiari del loro colore per l’antialiasing. Lo strumento lavora solo con colori hex pieni, senza trasparenza e senza immagini sotto.
In Italia le Linee guida sull’accessibilità degli strumenti informatici dell’AgID (21 dicembre 2022), che attuano la legge 4/2004, chiedono ai siti delle pubbliche amministrazioni e degli altri soggetti indicati all’articolo 3 di quella legge la conformità al livello AA delle WCAG 2.1, tramite la norma UNI CEI EN 301549. Il criterio 1.4.3 è di livello AA, quindi per quei siti il minimo è 4,5:1 per il testo corrente e 3:1 per quello grande.