Daltonismo sul web: cosa significa e come progettarne tenendo conto

Cos'è il daltonismo?

Nella retina percepiamo i colori grazie a tre tipi di coni. Ciascun tipo reagisce a una diversa gamma di luce: rossa, verde o blu. Se un tipo di cono funziona meno bene o non funziona affatto, la percezione di determinati colori può variare da persona a persona.

In senso stretto, esistono due forme:

• Deficit della visione dei colori: Gli esseri umani possono vedere tutti i colori, ma percepiscono alcuni di essi in modo più debole. Il rosso e il verde, ad esempio, sono molto simili.

• Daltonismo: Alcune persone non riescono a percepire affatto uno o più colori. Nell'acromatopsia, una forma completa di daltonismo, si vedono solo sfumature di grigio.

Nel linguaggio comune, l'espressione "daltonismo" viene spesso usata per indicare entrambi i disturbi. La maggior parte delle persone colpite presenta un deficit nella visione dei colori, non un daltonismo completo.

I tipi più comuni

• Carenza di rosso-verde: È di gran lunga la forma più comune. Il rosso e il verde sono difficili da distinguere. A seconda del cono interessato, si parla di protanomalia o protanopia (rosso) e deuteranomalia o deuteranopia (verde).

• Deficit blu-giallo (tritanomalia o tritanopia): Raro. Il blu e il verde, e il giallo e il rosa, sono difficili da distinguere.

• Cecità completa ai colori (acromatopsia): Molto rara. Le persone colpite vedono solo luce e buio e sono spesso molto sensibili all'abbagliamento.

_{Figura 1: Simulazione di diverse forme di daltonismo. Originale (in alto a sinistra), daltonismo rosso (in alto a destra), daltonismo verde (in basso a sinistra) e daltonismo blu (in basso a destra).}

Quante persone sono colpite?

Secondo il portale del Ministero federale della Salute tedesco gesund.bund.de Circa l'8% degli uomini e lo 0,4% delle donne presentano un deficit nella visione dei colori. In un gruppo di 25 uomini, statisticamente, ne sono affetti solo due. Il daltonismo completo, invece, è molto raro: in Germania, ne sono affette solo circa 2.700 persone.

Gli uomini sono colpiti molto più spesso perché i geni per i coni rossi e verdi si trovano sul cromosoma X. Gli uomini hanno un solo cromosoma X, quindi una mutazione in questo gene ha un effetto diretto. Le donne ne hanno due e di solito sono portatrici asintomatiche.

La percezione dei colori può cambiare nel corso della vita, ad esempio a causa di malattie oculari. Inoltre, molte persone vedono i colori meno nitidamente in determinate situazioni, come ad esempio quando guardano uno schermo del telefono in piena luce solare.

Quali elementi dei siti web causano problemi?

Il daltonismo diventa un ostacolo quando il colore è l'unico modo per trasmettere informazioni. Esempi tipici:

• Collegamenti nel testo corrente: Se i link sono evidenziati solo con un colore, senza sottolineatura, molte persone non riescono a vederli.

• Messaggi di errore e di successo: Una cornice rossa attorno a un campo del modulo o un semplice segno di spunta verde non sono sufficienti.

• Grafici e mappe: Linee, barre o aree che differiscono solo per il colore non possono essere distinte.

• Visualizzazione dello stato: Gli indicatori rossi, gialli e verdi, ad esempio quelli relativi alla disponibilità o allo stato della consegna, diventano poco chiari.

• Pulsanti e selezioni: Se lo stato attivo viene indicato solo da un cambio di colore, gli utenti non sanno cosa è selezionato.

• Contrasto basso: Il testo grigio chiaro su sfondo bianco o il testo sovrapposto alle immagini è difficile da leggere, non solo per le persone con deficit della visione dei colori.

• Segnaposto nei moduli: Il testo segnaposto di colore grigio chiaro è spesso difficile da distinguere dal testo già inserito.

Il problema è diffuso. Secondo il WebAIM Million 2026 L'83,9% delle pagine iniziali del milione di siti web più visitati presentava un testo con un contrasto insufficiente.

La Figura 2 mostra come può apparire un grafico a una persona affetta da daltonismo verde:

^{Figura 2: A sinistra il diagramma invariato, a destra con la simulazione della cecità al verde.}

Cosa richiede WCAG

Le Linee guida per l'accessibilità dei contenuti web (WCAG) contengono tre criteri di successo particolarmente importanti per il colore:

• 1.4.1 Uso del colore (livello A): Il colore non deve essere l'unico mezzo visivo di trasmettere informazioni, indicare un'azione o distinguere un elemento.

• 1.4.3 Contrasto (minimo) (livello AA): Il testo deve avere un rapporto di contrasto con lo sfondo di almeno 4,5:1, mentre il testo di grandi dimensioni deve avere un rapporto di almeno 3:1.

• 1.4.11 Contrasto non testuale (livello AA): Pulsanti, bordi dei campi modulo, indicatori di focus e elementi grafici importanti necessitano di un rapporto di contrasto di almeno 3:1.

Questi criteri fanno parte della norma europea EN 301 549, sulla quale si basa Legge europea sull'accessibilità è basato.

Consigli per una progettazione web accessibile ai colori

1. Non usare mai il colore da solo: Abbina il colore al testo, alle icone, ai motivi o alla sottolineatura. Un messaggio di errore necessita di un testo chiaro, non solo di una cornice rossa.

2. Sottolinea i link: I collegamenti nel testo corrente devono essere sottolineati o altrimenti contrassegnati in modo visibile.

3. Verifica il contrasto: Utilizza uno strumento di verifica del contrasto per assicurarti che il testo e gli elementi importanti corrispondano ai valori WCAG.

4. Etichetta direttamente i grafici: Invece di usare solo una legenda a colori, scrivi delle etichette accanto alle linee e alle barre. Anche l'utilizzo di motivi o stili di linea diversi può essere d'aiuto.

5. Evitate le combinazioni di colori critiche: Per molte persone è difficile distinguere il rosso dal verde, il verde dal marrone, il blu dal viola.

6. Prova con una simulazione: Molti strumenti di progettazione e strumenti per sviluppatori di browser possono simulare diverse deficienze della visione dei colori. Questo permette di individuare rapidamente i punti in cui le informazioni vengono perse.

7. Pensa oltre il daltonismo: Un buon contrasto e segnali nitidi sono utili anche alle persone anziane, a chi ha problemi di vista e a chiunque utilizzi il telefono all'aperto.

La nostra guida a progettazione accessibile con WCAG e il nostro articolo su moduli online accessibili contengono ulteriori consigli pratici.

Come aiuta Eye-Able

La progettazione accessibile è il fondamento. Inoltre, Eye-Able Assistenza Consente ai visitatori di personalizzare un sito web in base alle proprie esigenze. Una modalità speciale regola i colori per le persone con daltonismo o deficit della visione dei colori, mentre la modalità contrasto facilita la lettura del testo.

^{Figura 3: Illustrazione della correzione del colore utilizzando immagini di test di Ishihara (Fonte: Wellcome collection CC BY 4.0)}

La Figura 3 mostra come la modalità colore possa rendere nuovamente visibili le differenze nelle immagini del test di Ishihara. Anche aumentare il contrasto o la saturazione del colore può essere d'aiuto. Il semaforo nella Figura 4 è un altro esempio:

^{Figura 4: Semaforo con colori normali (a sinistra), semaforo per persone con deficit della visione del rosso (al centro), semaforo per persone con deficit della visione del rosso dopo la correzione Eye-Able (a destra)}

Assist non sostituisce però la progettazione accessibile. Il fatto che un sito web soddisfi i requisiti di contrasto WCAG dipende dalla sua progettazione e implementazione. Con Audit e report di Eye-Able , puoi controllare il tuo sito web per individuare errori di contrasto e altri ostacoli e correggerli alla fonte.

Conclusione

Circa un uomo su dodici soffre di un deficit nella visione dei colori. Per loro, le informazioni trasmesse esclusivamente attraverso il colore vanno perse. La soluzione è semplice: non usare mai il colore da solo, assicurarsi di avere un contrasto sufficiente e testare il design con una simulazione. In questo modo i siti web diventano più facili da usare per tutti.

Curioso di sapere quanto è accessibile il tuo sito web? Il nostro verifica gratuita dell'accessibilità Ti offre una prima panoramica in meno di 2 minuti.

FAQ: daltonismo sul web

Quanto è diffuso il daltonismo?

Circa l'8% degli uomini e lo 0,4% delle donne presentano un deficit nella visione dei colori. La forma più comune è la discromatopsia rosso-verde. Il daltonismo completo, in cui le persone vedono solo sfumature di grigio, è molto raro.

Qual è la differenza tra daltonismo e deficit della visione dei colori?

Le persone con deficit della visione dei colori vedono tutti i colori, ma alcuni di essi in modo più debole. Le persone con daltonismo non riescono a percepire affatto uno o più colori. Nel linguaggio comune, l'espressione "daltonismo" viene spesso utilizzata per indicare entrambi i termini.

Quali colori dovrei evitare per gli utenti daltonici?

Evitate le combinazioni di rosso e verde, verde e marrone, e blu e viola quando devono comunicare una differenza. Soprattutto, non usate mai il colore come unico segnale: aggiungete sempre testo, icone o motivi.

Cosa dicono i file WCAG riguardo al colore?

Il criterio di successo 1.4.1 di WCAG stabilisce che il colore non deve essere l'unico mezzo per trasmettere informazioni. Inoltre, il testo necessita di un rapporto di contrasto di almeno 4,5:1 (1.4.3), mentre pulsanti, campi modulo e grafica importante necessitano di un rapporto di almeno 3:1 (1.4.11).

Come posso testare il mio sito web per la presenza di daltonismo?

Utilizza la simulazione del deficit della visione dei colori nel tuo strumento di progettazione o negli strumenti per sviluppatori del browser per visualizzare il tuo sito web come lo vedono le persone con diversi tipi di daltonismo. Un verificatore di contrasto o un controllo automatico dell'accessibilità mostrerà eventuali errori di contrasto.