Accessibilità di colore e contrasto

Dave Gash

Meggin Kearney

Rachel Andrew

Rob Dodson

Se hai una buona vista, puoi supporre che i colori o la leggibilità del testo siano tutti percepiti come te. Ovviamente non è così. Come puoi immaginare, alcune combinazioni di colori che alcune persone possono leggere bene sono difficili o impossibili per altre. Ciò è causato di solito dal contrasto di colore, la relazione tra la luminanza dei colori in primo piano e di sfondo. Quando i colori sono simili, il rapporto di contrasto è basso; quando sono più diversi, il rapporto di contrasto è più alto.

Le linee guida di WebAIM consigliano un rapporto di contrasto AA (minimo) di 4,5:1 per tutto il testo. Esistono eccezioni per il testo molto grande (120-150% più grande del corpo del testo predefinito), per cui il rapporto può scendere a 3:1. Nota la differenza nei rapporti di contrasto mostrati qui:

Il testo con un rapporto di contrasto basso rispetto allo sfondo è più difficile da leggere.

Il rapporto di contrasto di 4,5:1 è stato scelto per il livello AA perché compensa la perdita di sensibilità al contrasto solitamente sperimentata dagli utenti con una perdita della vista equivalente a circa 20/40 della visione. 20/40 è la tipica acutezza visiva delle persone di circa 80 anni. Per gli utenti ipovedenti o con problemi di colore, possiamo aumentare il contrasto fino a 7:1 per il corpo del testo.

Puoi usare il controllo dell'accessibilità in Lighthouse per controllare il contrasto di colore. Per eseguire il report:

1. Apri DevTools.
2. Fai clic su Controlli.
3. Seleziona Accessibilità.

Un avviso di contrasto di colore insufficiente da un report sull'accessibilità di Lighthouse.

Chrome include anche una funzionalità sperimentale che ti consente di rilevare tutto il testo a basso contrasto nella tua pagina. Puoi anche utilizzare i suggerimenti per i colori accessibili per correggere il testo a basso contrasto.

Un suggerimento di colore accessibile.

Per un report più completo, installa l'estensione Informazioni sull'accessibilità. I relativi report Fastpass includono dettagli su tutti gli elementi che non superano i controlli del contrasto di colore.

Un report sul contrasto di colore di Informazioni sull'accessibilità.

Algoritmo di contrasto percettivo avanzato (APCA, Advanced Perceptual Contrast Algorithm)

L'algoritmo APT (Advanced Perceptual Contrast Algorithm) è un nuovo modo di calcolare il contrasto basato sulla ricerca moderna sulla percezione del colore.

Rispetto alle linee guida AA e AAA, l'APCA dipende più dal contesto.

Il contrasto viene calcolato in base alle seguenti caratteristiche:

• Proprietà spaziali (spessore del carattere e dimensione del testo)
• Colore del testo (differenza di luminosità percepita tra testo e sfondo)
• Contesto (luce ambientale, ambiente e scopo previsto del testo)

Chrome include una funzionalità sperimentale che sostituisce le linee guida sul rapporto di contrasto AA/AAA con l'APCA.

Un report sul contrasto dell'APCA.

Non comunicare le informazioni solo con il colore

Ci sono circa 320 milioni di persone in tutto il mondo con discromatopsia. Circa 1 uomo su 12 e 1 su 200 soffrono di una qualche forma di daltonismo, il che significa che circa il 5% degli utenti non usufruirà del tuo sito nel modo previsto. Affidarsi ai colori per trasmettere le informazioni spinge questo numero a livelli inaccettabili.

Nota: il termine daltonismo viene spesso utilizzato per descrivere una condizione visiva in cui una persona ha difficoltà a distinguere i colori. Pochissime persone sono davvero daltoniche; la maggior parte delle persone con carenza di colore può vedere alcuni o la maggior parte dei colori, ma ha difficoltà a distinguere tra alcuni colori, come il rosso e il verde (i più comuni), marroni e arancioni, blu e viola.

Ad esempio, in un modulo di input, un numero di telefono potrebbe essere sottolineato in rosso per indicare che non è valido. A un utente con problemi di colore o di screen reader queste informazioni vengono comunicate in modo scorretto o per niente. Per questo motivo, devi sempre provare a fornire all'utente più modalità di accesso a informazioni fondamentali.

Per alcuni utenti, una linea rossa che indica che un errore è impercettibile.

Nella sezione 1.4.1 l'elenco di controllo WebAIM afferma che "il colore non deve essere utilizzato come unico metodo per trasmettere contenuti o distinguere gli elementi visivi". Inoltre, sottolinea che "il colore da solo non deve essere utilizzato per distinguere i link dal testo circostante", a meno che non soddisfino determinati requisiti di contrasto. Al contrario, l'elenco di controllo consiglia di aggiungere un indicatore aggiuntivo come un trattino basso (utilizzando la proprietà text-decoration CSS) per indicare quando il link è attivo.

Un modo semplice per correggere l'esempio precedente è aggiungere un altro messaggio al campo, annunciando che non è valido e perché.

L'aggiunta di una spiegazione testuale non solo garantisce che gli utenti con disabilità visiva sappiano che c'è un errore, ma offre anche informazioni importanti per correggere l'errore anche se sono già vedenti.

Quando crei un'app, tieni a mente questi aspetti e fai attenzione alle aree in cui potresti fare troppo affidamento sui colori per trasmettere informazioni importanti.

Se vuoi sapere come il tuo sito viene visualizzato da persone diverse o se fai molto affidamento sull'uso dei colori nella tua UI, puoi utilizzare DevTools per simulare varie forme di problemi visivi. Chrome include la funzionalità Emula difetti di visione. Per accedervi, apri DevTools, quindi apri la scheda Rendering nel riquadro a scomparsa. Da qui, puoi emulare le seguenti carenze di colore:

• Protanopia: l'incapacità di percepire alcun semaforo rosso.
• Deuteranopia: l'incapacità di percepire la luce verde.
• Tritanopia: incapacità di percepire la luce blu.
• Acromatopsia: incapacità di percepire alcun colore ad eccezione delle sfumature del grigio (estremamente raro).

Utilizza DevTools per vedere come la tua pagina viene visualizzata dalle persone con diversi tipi di daltonismo.

Modalità ad alto contrasto

La modalità ad alto contrasto consente all'utente di invertire i colori in primo piano e di sfondo, il che spesso contribuisce a mettere in risalto il testo. Per le persone ipovedenti, la modalità ad alto contrasto può semplificare notevolmente la navigazione dei contenuti nella pagina. Esistono diversi modi per eseguire una configurazione ad alto contrasto sul tuo computer:

I sistemi operativi come Mac OSX e Windows offrono modalità ad alto contrasto che possono essere abilitate per qualsiasi operazione a livello di sistema.

Un esercizio utile è attivare le impostazioni ad alto contrasto e verificare che tutta l'UI dell'app sia ancora visibile e utilizzabile.

Ad esempio, una barra di navigazione potrebbe utilizzare un leggero colore di sfondo per indicare la pagina selezionata. Se la visualizzi in un'estensione ad alto contrasto, la delicatezza scompare completamente e il lettore potrà capire quale pagina è attiva.

Sottili contrasti di colore potrebbero non essere visibili in modalità ad alto contrasto.

Allo stesso modo, nell'esempio precedente, la sottolineatura rossa nel campo del numero di telefono non valido potrebbe essere visualizzata in un colore blu/verde difficile da distinguere.

I colori invertiti nella modalità ad alto contrasto potrebbero introdurre nuovi problemi di contrasto.

Se stai raggiungendo i rapporti di contrasto illustrati in precedenza, non dovresti avere problemi quando si tratta di supportare la modalità ad alto contrasto. Tuttavia, per maggiore tranquillità, ti consigliamo di installare l'estensione di Chrome High Contrast e di controllare una volta che la pagina funzioni e abbia l'aspetto previsto.