Calcolatore del rapporto di contrasto

Un numero tra 1 e 21

Riesci a leggere un testo quando è nettamente più chiaro o più scuro di ciò che ha dietro. La tinta conta poco. Rosso puro su verde puro sono due colori molto diversi con quasi la stessa luminosità, e le lettere sembrano vibrare. Per questo WCAG misura la differenza di luminanza relativa, la quantità di luce che un colore manda all’occhio su una scala da 0 (nero) a 1 (bianco).

Per calcolarla, ciascuno dei canali rosso, verde e blu viene convertito dal valore memorizzato in luce lineare, poi i tre vengono pesati secondo la sensibilità dell’occhio a ciascuno:

L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L lighter + 0.05) ÷ (L darker + 0.05)

Il verde conta per più del 70% del risultato e il blu per circa il 7%. Ecco perché il blu puro #0000ff si comporta come un colore scuro e il giallo puro come un colore chiaro. Due colori identici danno 1:1. Nero su bianco dà 21:1. Scambiare testo e sfondo non cambia il rapporto.

Le soglie e dove si applicano

AA è il livello a cui rimandano in genere leggi e regole sugli appalti, tra cui la norma europea EN 301 549 e la Section 508 negli Stati Uniti. AAA è un obiettivo per i contesti in cui si legge a lungo. Loghi, controlli disattivati e testo puramente decorativo sono esenti.

Un riferimento comodo è il grigio #767676, che raggiunge 4.54:1 sul bianco e passa AA. Un gradino più chiaro, #777777 dà 4.47:1 e non passa.

Come viene scelta la tonalità suggerita

Quando un testo di dimensione normale resta sotto 4.5:1, il calcolatore converte il colore del testo in tinta, saturazione e luminosità. Tiene le prime due e sposta la luminosità a passi di mezzo punto percentuale, alternando più scuro e più chiaro, finché il rapporto con il tuo sfondo arriva a 4.5. Il primo risultato è la tonalità più vicina che passa, così il tuo blu resta il tuo blu. A volte nessuna luminosità del colore del testo può passare, tipicamente su uno sfondo a tono medio. In quel caso prova a regolare lo sfondo allo stesso modo. Seleziona Usa per applicare il suggerimento.

Gli sfondi a tono medio sono il caso difficile. Un grigio medio come #808080 dà circa 3.9:1 contro il bianco e 5.3:1 contro il nero, quindi ci funziona sopra solo un testo molto scuro. Gli arancioni di marca e i verdi accesi hanno lo stesso problema con il testo bianco. Dovrai scurire lo sfondo o passare a un testo scuro.

Inserire ed estrarre i colori

Entrambi i campi accettano tutto ciò che un browser riconosce come colore CSS: #1d3557, 1d3557, rgb(29 53 87), hsl(215 50% 23%) o un nome come teal. Per leggere un colore da una pagina dal vivo, apri gli strumenti per sviluppatori, seleziona il testo e copia i valori calcolati di color e background-color.

L’indirizzo della pagina si aggiorna a ogni modifica, nella forma ?fg=1d3557&bg=ffffff. Copialo per mandare a un collega esattamente la coppia su cui state discutendo. Per verificare un’intera palette di marca in un colpo solo, usa la griglia di contrasto della palette.

Cosa un rapporto non ti dice

• Trasparenza. Qualsiasi valore alfa viene ignorato. Per un testo semitrasparente, misura il colore risultante che lo schermo finisce per mostrare.
• Immagini e sfumature. Una foto di sfondo ha molti colori. Verifica la zona più chiara e quella più scura dietro il testo, oppure mettici sotto un pannello pieno.
• Peso e dimensione del carattere sotto le soglie. Un carattere sottile da 12 px a 4.6:1 passa sulla carta ed è comunque difficile da leggere.
• Temi scuri. La formula di WCAG 2 è nota per sopravvalutare alcune coppie scure. Se un testo chiaro su sfondo scuro passa a malapena, guardalo anche con i tuoi occhi, per esempio nel simulatore di visione.