UX Design e daltonismo: 4 trucchi da considerare

Quando progetti un'interfaccia, stai decidendo chi potrà usarla e chi no. Se distingui due stati solo con il colore verde e rosso, stai tagliando fuori circa l'8% degli uomini e lo 0,5% delle donne che vedi ogni giorno. Non un dettaglio accademico: nel mondo parliamo di oltre 300 milioni di persone con una qualche forma di cecità ai colori, secondo Colour Blind Awareness.

Eppure il daltonismo è uno dei temi di accessibilità più sottovalutati nel design digitale italiano. Questo articolo ti dà una guida operativa: cosa succede davvero nell'occhio di una persona daltonica, perché il problema va ben oltre il "rosso vs verde", quali principi applicare nel design e come testare se un'interfaccia funziona davvero per tutti.

Cosa imparerai leggendo:

• I tipi di daltonismo e quanto sono diffusi
• Perché il daltonismo è un problema di design, non un problema medico
• I 5 principi per progettare interfacce inclusive rispetto al colore
• Gli strumenti di simulazione e test
• Una checklist pratica da applicare al tuo prossimo progetto

Cosa è il daltonismo (spiegato per designer)

Il daltonismo — termine tecnico discromatopsia o color vision deficiency — è una condizione della retina che riduce o elimina la capacità di distinguere certe combinazioni di colori. Non è una malattia: è una variante della visione umana, tipicamente ereditata, permanente, non correggibile con gli occhiali.

Nell'occhio umano sano la percezione del colore dipende da tre tipi di coni sensibili rispettivamente al rosso (L), al verde (M) e al blu (S). Quando uno di questi coni funziona in modo anomalo o è assente, il cervello riceve un'informazione cromatica incompleta.

Le forme principali sono quattro:

• Deuteranomalia e deuteranopia (coni verdi alterati o assenti): la forma più comune, tocca circa il 6% degli uomini. Rende difficile distinguere rosso, verde, marrone e grigio.
• Protanomalia e protanopia (coni rossi): circa l'1% degli uomini. Il rosso appare smorto e vicino al grigio.
• Tritanomalia e tritanopia (coni blu): molto rara, colpisce meno dello 0,01% della popolazione. Difficoltà tra blu e giallo.
• Acromatopsia (cecità totale ai colori): rarissima, circa 1 caso su 30.000. La visione è interamente in scala di grigi.

In sintesi: circa 1 uomo su 12 e 1 donna su 200 ha una qualche forma di daltonismo. Nel tuo prossimo usability test con 10 partecipanti maschi, statisticamente uno di loro sta vedendo la tua interfaccia diversamente da come l'hai disegnata.

Perché è un problema di design, non dell'utente

La tentazione di liquidare il daltonismo come "caso limite" è comune e sbagliata. Tre ragioni concrete per cui un designer professionista lo tiene in conto:

1. È un requisito di conformità legale. Le linee guida WCAG 2.2 al criterio 1.4.1 ("Use of Color") stabiliscono che il colore non deve essere l'unico mezzo per trasmettere informazione. È livello A, quindi la soglia minima di conformità. In Italia la direttiva europea sull'accessibilità dei servizi pubblici digitali e l'European Accessibility Act (in vigore dal 28 giugno 2025 per molti servizi privati) rendono questi criteri obbligatori anche per le aziende.

2. È economicamente rilevante. 300 milioni di utenti sono un mercato che pesa. Un'interfaccia e-commerce che non distingue chiaramente i prodotti "disponibili" da quelli "esauriti" perde vendite concrete.

3. Migliora l'esperienza di tutti. Un design che funziona per un daltonico funziona anche per chi guarda lo schermo al sole, per chi ha un monitor calibrato male, per chi è affaticato, per chi usa la modalità scura. L'accessibilità non è un sottoinsieme: è un acceleratore di qualità generale.

I 5 principi per progettare interfacce inclusive

1. Non affidare mai il significato al solo colore

È la regola d'oro. Ogni volta che il colore trasmette un'informazione (errore, successo, warning, stato attivo, categoria), deve essere affiancato da un secondo segnale ridondante: un'icona, una label testuale, un pattern, una forma diversa.

Esempi pratici:

• Form di validazione: invece di "bordo rosso = errore, bordo verde = ok", aggiungi un'icona ✕ e ✓ più un messaggio testuale sotto il campo.
• Grafici: invece di due linee una rossa e una verde, usa tratteggi diversi, marker di forma diversa (cerchio vs quadrato), o etichette dirette sulle linee.
• Mappe: invece di colorare le regioni per categoria, aggiungi pattern (diagonali, punti, griglie) o label.

GOV.UK e il design system di Material di Google applicano questo principio in modo esemplare: ogni stato di errore ha icona + colore + testo, sempre.

2. Garantisci il contrasto minimo WCAG AA

Il contrasto tra testo e sfondo deve rispettare almeno il criterio WCAG 2.2 AA:

• 4,5:1 per il testo normale (sotto i 18pt)
• 3:1 per il testo grande (18pt+ o 14pt+ in bold)
• 3:1 per elementi UI non testuali (icone, bordi dei bottoni, input)

Il contrasto aiuta tutti, ma per chi ha una forma severa di daltonismo o bassa visione è la differenza tra poter leggere e non poter leggere. Usa strumenti come WebAIM Contrast Checker o Stark in Figma per misurare prima di approvare la palette.

3. Evita le combinazioni problematiche

Ci sono accoppiamenti cromatici che diventano indistinguibili per i tipi di daltonismo più comuni:

• Verde e rosso (il classico)
• Verde e marrone
• Blu e viola
• Verde chiaro e giallo
• Blu e grigio
• Verde e grigio
• Verde e nero

Se la tua palette di brand impone una di queste accoppiate, compensa con differenze di luminosità e saturazione marcate. Un verde molto chiaro e un rosso molto scuro restano distinguibili in scala di grigi e quindi funzionano anche per chi non percepisce l'hue.

4. Progetta sempre partendo dal bianco e nero

Un metodo che insegniamo nei nostri corsi: quando sviluppi una nuova interfaccia, disegnala prima in scala di grigi e verifica che tutto il significato passi lo stesso. Solo dopo aggiungi il colore, che deve rinforzare la gerarchia esistente, non crearla.

Questa abitudine, oltre a produrre design accessibili, costringe a pensare in termini di gerarchia visiva e peso delle informazioni, non di decorazione.

5. Testa con simulatori, sempre

Non affidarti all'intuizione. Usa gli strumenti di simulazione che replicano la visione di una persona daltonica sul tuo design. Ne parliamo nel prossimo paragrafo.

Strumenti per testare e progettare

Ecco la toolbox consigliata, tutta gratuita o con versione free generosa:

• Stark (plugin Figma, Sketch, VS Code): simula 8 tipi di daltonismo direttamente sul tuo design, misura il contrasto, mostra violazioni WCAG in tempo reale. È lo standard di fatto nel 2026.
• Sim Daltonism (macOS, gratuito open source): apre una finestra che mostra in tempo reale come appare qualsiasi cosa sullo schermo a un daltonico. Potente per testare interfacce reali, non solo mockup.
• Coblis Color Blindness Simulator (web): carichi un'immagine e la vedi attraverso i vari filtri di daltonismo. Utile per test puntuali.
• WebAIM Contrast Checker: calcola il rapporto di contrasto tra due colori e ti dice subito se rispetti WCAG AA e AAA.
• Colour Contrast Analyser (TPGi): app desktop, più precisa del contrast checker di Chrome DevTools per contenuti complessi.
• Chrome DevTools: nel pannello Rendering puoi emulare le deficienze visive su qualsiasi sito live. Utile per verificare il prodotto finito, non solo i mockup.

Il workflow che consigliamo ai nostri studenti: Stark durante il design, Chrome DevTools durante la review finale, un test reale con utenti daltonici prima del rilascio se il prodotto ha un bacino di utenti abbastanza ampio da giustificarlo.

Errori comuni che vediamo nei progetti degli studenti

Dai corsi di Visual Design e Interaction Design di CorsoUX, i pattern sbagliati che incontriamo più spesso:

• "Aggiungo un'icona rossa e uno verde, uguale": l'icona rossa è un ✕ e la verde è un ✓? Bene. Sono due cerchi pieni di colore diverso? Non basta. La forma deve cambiare, non solo il colore.
• Link blu su testo blu più chiaro: tipico errore quando si cerca di fare un brand "tono su tono". Il link deve avere un'altra differenza oltre al colore — tipicamente la sottolineatura — proprio per questo motivo.
• Grafici con legenda a colori distante: se la legenda è in alto a sinistra e i dati sono a destra, l'utente deve memorizzare l'associazione colore-etichetta. Per un daltonico è una sfida. Metti le label direttamente sulle serie quando possibile.
• Tag colorati senza icona: le interfacce "Kanban-like" dove gli stati sono solo chip colorati sono tra le peggiori per i daltonici. Aggiungi sempre un'icona o una lettera.
• Mappe con scala di colore continua: scegli scale percettivamente uniformi e "colorblind-safe" come Viridis, Cividis, o le palette di ColorBrewer.

Checklist pratica da applicare oggi

Un check veloce prima di consegnare qualsiasi design:

• Nessuna informazione critica è trasmessa dal solo colore
• Contrasto testo/sfondo ≥ 4,5:1 (AA) per testo normale
• Contrasto elementi UI ≥ 3:1
• Stati di errore / successo hanno icona + testo, non solo colore
• Il design resta comprensibile in scala di grigi
• Simulato con Stark in almeno 3 tipi di daltonismo
• Link distinguibili dal testo anche senza colore (sottolineatura, peso, icona)
• Grafici usano forme/pattern diversi oltre al colore
• Nessuna accoppiata proibita (verde+rosso, blu+viola, ecc.) usata per distinguere elementi

Domande frequenti

Devo evitare del tutto il verde e il rosso nelle mie interfacce?

No. Puoi usarli liberamente, a condizione che il significato non dipenda solo dalla loro differenza. Il rosso + icona di errore + testo "Email non valida" è perfetto. Il solo bordo rosso no.

Gli utenti daltonici usano già strumenti per compensare?

Alcuni sì. Esistono filtri di sistema (iOS e Android hanno opzioni native per il daltonismo in Impostazioni → Accessibilità) e app dedicate come Color Blind Pal. Ma non devi progettare assumendo che li usino: moltissime persone con daltonismo leggero non hanno neanche una diagnosi e non sanno di avere una condizione particolare. Progetta come se non avessero alcun aiuto.

Dark mode è un problema per i daltonici?

Non di per sé. Ma la dark mode spesso riduce i contrasti cromatici, e una palette che funziona bene in chiaro può diventare problematica in scuro. Quando supporti entrambe le modalità, verifica entrambe con Stark.

Qual è la forma più grave di daltonismo?

L'acromatopsia completa: la persona vede il mondo in scala di grigi. È rarissima (circa 1 su 30.000). Se progetti per questa condizione — e cioè in scala di grigi — automaticamente stai progettando per tutte le altre forme di daltonismo insieme.

Esiste una palette universalmente "colorblind-safe"?

Non esattamente universale, ma ci sono palette pensate apposta. Le più usate nel data visualization sono Viridis, Cividis, Magma e le scale di ColorBrewer. Per UI generiche non c'è una palette universale: il punto è il metodo (ridondanza, contrasto, test), non un singolo set di colori.

Prossimi passi

Il daltonismo è una porta d'ingresso nel mondo più ampio dell'accessibilità digitale. Se vuoi continuare:

• Leggi la guida alle euristiche di usabilità — molte hanno implicazioni dirette sull'accessibilità
• Approfondisci il visual design e la tipografia per capire come leggibilità e gerarchia visiva si legano
• Studia il visual design nel nostro corso dedicato

Progettare per l'accessibilità non è una checklist da spuntare alla fine: è un modo di pensare il design dall'inizio. E una volta che lo interiorizzi, non torni più indietro.