Verifica del contrasto cromatico

La luminanza è il canale che sopravvive sempre

Il colore ha due componenti su cui un progettista può appoggiarsi: la tinta e la chiarezza. Solo una delle due è affidabile per l’intero pubblico.

La discriminazione di tinta varia enormemente. Circa un uomo su dodici ha una carenza rosso-verde, e per lui una differenza di tinta che a voi appare ovvia può non portare alcuna informazione. La discriminazione di chiarezza è assai più uniforme. Una persona con una carenza della visione dei colori, una con acuità ridotta, una davanti a uno schermo di telefono slavato in pieno sole e una con vista del tutto tipica percepiscono tutte una grande differenza di chiarezza come una grande differenza.

Ecco perché il rapporto di contrasto è la metrica di accessibilità che regge la struttura. Misura la relazione di chiarezza fra due colori ignorando del tutto la tinta, ed è esattamente ciò che serve, perché dice che cosa resta quando il canale della tinta non è affidabile.

Il rapporto va da 1:1, dove due colori hanno la stessa luminanza relativa e il confine fra loro è invisibile a chiunque, fino a 21:1 per il nero puro sul bianco puro. Il calcolo è definito con precisione in WCAG: convertire ciascun canale sRGB in luce lineare, pesare i canali secondo il loro contributo alla luminanza percepita e confrontare il risultato più chiaro con quello più scuro.

Le soglie e ciò che le fonda

4,5:1 — testo normale (WCAG AA). La base per il corpo del testo. Il valore deriva dalla perdita di sensibilità al contrasto associata a un’acuità di circa 20/40, frequente negli adulti anziani, correggibile ma spesso non corretta.

3:1 — testo grande (WCAG AA). Si applica da 18 pt normale o 14 pt grassetto. I caratteri più grandi hanno tratti più spessi e restano leggibili con un contrasto minore.

3:1 — contrasto non testuale (WCAG AA). Copre i componenti d’interfaccia e la grafica significativa: bordi dei campi, stati degli interruttori, indicatori di focus, icone che veicolano informazioni e le parti essenziali di un grafico. È il criterio più spesso mancato, ed è di solito il punto in cui un’interfaccia elegante e poco contrastata fallisce una verifica.

7:1 e 4,5:1 — testo normale e grande (WCAG AAA). Un livello più severo, pensato per un’acuità di circa 20/80. Vale la pena adottarlo per la lettura lunga anche quando non è richiesto.

Il contrasto è necessario, non sufficiente

L’errore più comune nel lavoro sulle tavolozze accessibili è considerare un rapporto di contrasto superato come la fine del lavoro. Ci sono due domande indipendenti a cui rispondere:

1. Ogni colore è leggibile sul proprio sfondo? Questo è il contrasto, e questo verificatore risponde.
2. I colori che significano cose diverse sono distinguibili fra loro? Questa è la separazione di tinta, e il rapporto di contrasto non dice nulla al riguardo.

Un grafico con una serie rossa e una verde può superare il contrasto con margine, entrambe sono scure su sfondo bianco, e risultare del tutto illeggibile per un deuteranope, perché le due serie sono indistinguibili fra loro. Fate passare tali tavolozze anche dal simulatore della visione dei colori.

E ogni volta che il colore porta significato, aggiungete un secondo indizio. Il criterio WCAG sull’uso del colore lo richiede, e la tecnica G111 descrive l’approccio consueto: abbinare il colore a un motivo, a una forma, a una posizione o a un’etichetta esplicita. In pratica significa etichettare direttamente le serie di un grafico anziché usare una legenda cromatica, mettere un’icona accanto a un messaggio d’errore rosso, sottolineare i collegamenti nel testo e differenziare per forma gli stati di successo e di errore.

Lavorare con il verificatore

Inserite un colore di primo piano e uno di sfondo e lo strumento riporta il rapporto e le soglie soddisfatte. Alcune abitudini lo rendono più utile:

• Verificate la coppia reale. Sovrapposizioni semitrasparenti, sfumature e immagini di sfondo fanno sì che lo sfondo effettivo non sia il colore del vostro foglio di stile. Campionate ciò che viene davvero disegnato.
• Verificate entrambi i temi. La luminanza non si inverte in modo pulito; una tavolozza scura richiede una verifica propria.
• In una sfumatura verificate il caso peggiore, non la media.
• Includete gli stati disabilitato e segnaposto. Vengono comunque letti.
• Verificate gli indicatori di focus su ogni superficie in cui compaiono. Un anello di focus che soddisfa 3:1 sul bianco può sparire su una scheda.

Per il quadro complessivo, progettare per il daltonismo tratta la costruzione delle tavolozze, e rendere accessibili i grafici affronta nello specifico la visualizzazione dei dati.