Daltonismo e web design: cosa devi sapere

Più comune di quanto la maggior parte dei designer creda

Il deficit della visione dei colori — comunemente chiamato daltonismo — colpisce circa l’8% degli uomini e lo 0,5% delle donne. Si tratta di circa 1 uomo su 12 e 1 donna su 200, il che lo rende più diffuso della maggior parte delle altre disabilità affrontate dagli standard di accessibilità web.

Eppure viene regolarmente trascurato nella progettazione. I team testano con gli screen reader e la navigazione da tastiera, eseguono una scansione WCAG automatizzata e considerano concluso il lavoro sull’accessibilità — senza mai verificare se la loro palette di colori sia leggibile per gli utenti daltonici.

Comprendere il daltonismo, e cosa fa realmente alle interfacce web che progetti, è il primo passo per correggerlo.

I tipi e ciò che comportano

Il deficit della visione dei colori si presenta in diverse forme, e non producono tutte la stessa esperienza.

Deficit rosso-verde (i più comuni)

Protanopia — assenza completa dei fotorecettori dei coni rossi. Il rosso appare scuro o nero. Le distinzioni rosso-verde vengono perse.

Protanomalia — ridotta sensibilità al rosso. Il rosso, l’arancione e il giallo si spostano verso il verde, e l’esperienza complessiva è più smorta, come se il canale del rosso fosse stato abbassato.

Deuteranopia — assenza completa dei recettori dei coni verdi. La forma più comune di daltonismo. Il verde e il rosso vengono confusi; il mondo sembra filtrato attraverso una lente giallo-marrone.

Deuteranomalia — ridotta sensibilità al verde. Simile alla deuteranopia ma più lieve. Il tipo più diffuso in assoluto, che colpisce circa il 5% degli uomini.

Deficit blu-giallo (più rari)

Tritanopia — assenza dei recettori dei coni blu. Il blu appare verde e il giallo appare pallido o invisibile. Raro.

Tritanomalia — ridotta sensibilità al blu. Il blu-verde e il rosso-viola vengono confusi.

Monocromia (molto rara)

Acromatopsia — assenza di tutti i recettori dei coni dei colori. Si percepisce solo la luminosità; il mondo appare in sfumature di grigio. Spesso accompagnata da sensibilità alla luce e ridotta acuità visiva.

Come il daltonismo compromette i pattern web comuni

Conoscere i tipi in astratto è meno utile che sapere quali scelte di design specifiche causano problemi. Questi sono i più comuni.

Stati di errore indicati solo dal rosso

Rendere rosso il bordo di un campo di un modulo per mostrare un errore di validazione è uno dei pattern più diffusi nel web design. Per gli utenti con deficit rosso-verde, il rosso su bianco o il rosso su grigio può essere quasi invisibile, o indistinguibile da un normale stato non attivo.

Questo è trattato direttamente dal criterio WCAG 2.2 1.4.1 Uso del colore (Livello A): il colore non deve essere l’unico mezzo per trasmettere un’informazione, indicare un’azione, sollecitare una risposta o distinguere un elemento visivo.

La soluzione è semplice: abbina il colore a un secondo indicatore visivo — un’icona, un’etichetta di testo, un cambiamento nello spessore del bordo o qualsiasi altro segnale non cromatico.

<!-- Affidarsi solo al colore: non supera 1.4.1 -->
<input type="email" class="field--error">

<!-- Colore più icona più testo: supera -->
<div class="field-wrapper">
  <input type="email" class="field--error" aria-describedby="email-err">
  <p id="email-err">
    <span aria-hidden="true">⚠</span> Inserisci un indirizzo email valido.
  </p>
</div>

Contrasto insufficiente

Il basso contrasto è un problema distinto dal daltonismo, ma si intersecano. Molte palette di colori che appaiono leggibili a chi ha una visione dei colori tipica diventano ancora più difficili da leggere con un deficit della visione dei colori, perché la differenza percepita tra primo piano e sfondo si riduce ulteriormente.

Il criterio WCAG 1.4.3 richiede un rapporto di contrasto minimo di 4.5:1 per il testo normale e 3:1 per il testo grande. Testare il contrasto con uno strumento come il selettore di colori dei DevTools del browser o un verificatore dedicato è irrinunciabile — non affidarti all’ispezione visiva.

Visualizzazioni di dati codificate solo nel colore

Un grafico a torta con sei segmenti differenziati solo dal colore. Una mappa con un gradiente dal rosso al verde. Un grafico a linee in cui quattro set di dati si distinguono solo per la tonalità.

Per gli utenti con deuteranopia, il rosso e il verde diventano indistinguibili. Il significato del grafico crolla completamente. Per saperne di più, consulta la nostra guida sulla visualizzazione accessibile dei dati.

Link che si distinguono dal testo del corpo solo tramite il colore

Per impostazione predefinita, i browser sottolineano i link. Molti designer rimuovono questa sottolineatura e si affidano solo al colore per distinguere i link dal testo circostante. Gli utenti con deficit della visione dei colori — e soprattutto quelli che usano temi a basso contrasto — possono non riuscire a identificare affatto i link.

Il criterio WCAG 1.4.1 si applica anche qui. Se il colore del link è l’unico indicatore visivo (nessuna sottolineatura, nessun grassetto, nessun altro elemento distintivo), il link non è accessibile per gli utenti daltonici.

La soluzione più semplice: ripristinare la sottolineatura. In alternativa, assicurati che il colore del link abbia un contrasto sufficiente sia rispetto al colore del testo del corpo sia rispetto allo sfondo.

Progettare tenendo conto del daltonismo

Usa la codifica ridondante

Aggiungi un secondo canale visivo accanto al colore. Nei grafici: aggiungi motivi, texture o etichette dei dati. Negli indicatori di stato: aggiungi icone. Negli stati dei moduli: aggiungi testo. L’obiettivo è che qualcuno che rimuova completamente il colore dal design possa comunque capire tutto.

Testa con strumenti di simulazione

I Chrome DevTools hanno una simulazione integrata del daltonismo. Apri DevTools > pannello Rendering > “Emulate vision deficiencies”. Puoi simulare protanopia, deuteranopia, tritanopia e acromatopsia.

Figma e altri strumenti di design hanno plugin simili. Eseguire una simulazione richiede pochi secondi e spesso rivela problemi che non erano visibili nell’anteprima standard.

Controlla la tua palette nel suo insieme

Non limitarti a testare le singole coppie di elementi. Osserva l’intera palette insieme: colori primari, secondari, di errore, di successo, di avviso e informativi. Sotto la simulazione della deuteranopia, il rosso di errore e il verde di successo appaiono simili? Se è così, hai un problema indipendentemente dal fatto che i tuoi rapporti di contrasto tecnicamente superino la verifica.

Evita le combinazioni problematiche

Particolarmente inaffidabili per il deficit della visione dei colori:

• Rosso e verde
• Verde e marrone
• Blu e viola
• Verde e grigio
• Verde e nero

Quando queste coppie devono comparire nello stesso contesto, differenziale attraverso la luminosità o il motivo piuttosto che la tonalità.

Cosa copre e cosa non copre la WCAG

La WCAG copre il contrasto cromatico (1.4.3, 1.4.11) e il divieto di usare il colore come unico mezzo per trasmettere informazioni (1.4.1). Non specifica quali colori puoi o non puoi usare, né richiede che l’intera palette sia percepibile sotto ogni tipo di deficit della visione dei colori.

Ciò che richiede è che nessun significato venga perso quando il colore viene rimosso. Questo è il test pratico. Rimuovi il colore dal tuo design. Ogni informazione rimane accessibile attraverso altri mezzi?

Se la risposta è sì, hai soddisfatto il requisito. Se gli stati di errore scompaiono, se i dati dei grafici diventano ambigui, se i link diventano invisibili — hai del lavoro da fare.

I nostri audit di accessibilità includono l’accessibilità cromatica come parte standard della revisione. Se vuoi sapere a che punto si trova il tuo design attuale, esegui una scansione automatizzata gratuita per individuare i problemi automatizzabili come punto di partenza.