Come progettare per il daltonismo

Immagina questo: invii un modulo online e ricevi un messaggio di errore che dice: ‘Correggi gli errori del modulo.’ Scorri verso il basso ma non c’è nulla che indichi dove siano gli errori.

Per i 300 milioni di persone nel mondo che hanno una qualche forma di deficit visivo dei colori(opens in a new tab), lo scenario sopra descritto è un’esperienza quotidiana. E poiché il colore è uno dei modi più comuni per trasmettere informazioni, questi utenti affrontano numerose sfide quando cercano di navigare sul web.

Di seguito, spiegheremo l’impatto che il colore ha sull’accessibilità e condivideremo consigli su come progettare siti web adatti ai daltonici — senza rinunciare completamente al colore.

3 diversi livelli di daltonismo. Daltonismo rosso-verde, daltonismo blu-giallo e daltonismo monocromatico

Comprendere il daltonismo

Contrariamente a quanto suggerisce il termine daltonismo , la maggior parte delle persone con deficit visivo dei colori può vedere le pigmentazioni. Piuttosto che non vedere alcun colore, hanno difficoltà a distinguere tra determinati colori. 

Esistono tre diversi tipi di daltonismo:

1. Daltonismo rosso-verde: Questo è il tipo più comune di daltonismo e porta le persone a confondere il rosso e il verde. I tipi di daltonismo rosso-verde includono:

• Deuteranomalia: Il verde appare rosso.

• Protanomalia: Il rosso appare verde e spento.

• Protanopia/Deuteranopia: Non si riesce a distinguere tra rosso e verde.

2. Daltonismo blu-giallo: Meno comune rispetto al daltonismo rosso-verde, porta le persone a confondere il blu e il giallo. I tipi di daltonismo blu-giallo includono:

• Tritanomalia: Rende difficile distinguere tra giallo e rosso o tra blu e verde

• Tritanopia: Rende difficile distinguere tra blu e verde, viola e rosso, o giallo e rosa. Inoltre, i colori appaiono meno brillanti.

3. Monocromia: Questa è la forma più rara di daltonismo(opens in a new tab) e si verifica in circa 1 persona su 33.000. Questo è il “vero” daltonismo, in cui la persona non riesce a vedere alcun colore.

Indipendentemente dal tipo di daltonismo, questa condizione influisce sulla facilità con cui una persona riesce a navigare sul web. Ad esempio, i link o i pulsanti possono essere difficili da individuare se non sono visibili o non hanno sufficiente contrasto o chiarezza. Anche il testo può essere difficile da leggere se non è ben contrastato rispetto allo sfondo. Il testo nero su sfondo bianco è particolarmente difficile da leggere per chi ha daltonismo blu-giallo o rosso-verde. Questa combinazione può causare affaticamento o abbagliamento agli occhi, riducendo la leggibilità. 

In definitiva, questi problemi portano a una scarsa esperienza utente per le persone daltoniche, rendendo più difficile svolgere le attività quotidiane.

Verifica il contrasto dei colori

Il contrasto dei colori fa la differenza tra un sito web navigabile e facile da usare e uno che non lo è. Senza il giusto contrasto tra gli elementi, gli utenti daltonici potrebbero non riuscire a distinguerli facilmente. 

Fornire un buon contrasto di colori non solo migliora l’esperienza utente, ma ti aiuta anche a rispettare gli standard di accessibilità previsti dalle Web Content Accessibility Guidelines (WCAG), che sono citate nell’Equality Act 2010 del Regno Unito. Le WCAG prevedono tre diversi livelli di conformità: A (standard minimo), AA (standard), e AAA (massimo). Ogni livello ha diverse raccomandazioni per i rapporti di contrasto dei colori:

• Livello A e AA: Il testo normale deve avere un rapporto di contrasto minimo di 4,5:1. Il testo grande deve avere un rapporto di 3:1. 

• Livello AAA: Il testo normale deve avere un rapporto di 7:1 e 4,5:1 per il testo grande.

Al minimo, dovresti puntare al livello AA o AAA per soddisfare non solo gli utenti daltonici, ma anche quelli con altri deficit visivi. È importante notare che il livello AAA è il massimo livello di accessibilità web e offre la massima accessibilità, ma impone vincoli di design più stringenti.

Best practice per siti web adatti ai daltonici

Progettare il tuo sito web per renderlo accessibile alle persone con deficit visivo dei colori non significa dover rinunciare completamente al colore; basta essere più intenzionali nell’uso che se ne fa. Ecco alcune best practice per progettare pensando al daltonismo — tutte contribuiscono a un design più accessibile e inclusivo.

1. Non affidarti solo al colore

Il principio fondamentale della progettazione per il daltonismo è non affidarsi eccessivamente al colore. Non dovresti usare il colore come unico elemento per attirare l’attenzione degli utenti — o per segnalare informazioni importanti. Se usi il colore per comunicare informazioni, assicurati di abbinarlo a un altro elemento (come un messaggio di errore o un simbolo) per aiutare le persone con deficit visivo dei colori a seguire il flusso.

2. Usa icone e simboli

Uno dei modi più comuni per integrare il colore su un sito web è l’uso di icone e simboli. Ad esempio, icone universali come i punti esclamativi possono aiutare ad attirare l’attenzione dell’utente. Tornando all’esempio di un campo mancante in un modulo, potresti combinare un bordo rosso con un punto esclamativo per indicare un errore.

Un esempio di grafico a barre in cui ogni colonna ha un motivo diverso.

3. Usa texture e motivi

Quando hai bisogno di enfatizzare determinati oggetti, è una buona idea incorporare texture e/o motivi. Questo è particolarmente utile per grafici e tabelle, dove spesso il colore viene utilizzato per differenziare gli elementi. Aggiungere texture e motivi come scacchi, linee e punti può aiutare a rendere ogni elemento unico e facilmente identificabile. 

Ad esempio, se includi una mappa con diversi tipi di terreno, considera l’uso di texture diverse (come righe, puntini, tratteggi, ecc.) insieme al colore. Questo aiuta a distinguere le varie morfologie del territorio, rendendo la mappa più accessibile alle persone daltoniche.

Infine, se intendi includere grafici e tabelle sul tuo sito, assicurati di aggiungere il testo alternativo per chi non può percepire visivamente gli elementi.

4. Usa etichette

L’utilizzo di etichette sul tuo sito può migliorare notevolmente l’esperienza utente per le persone daltoniche. Texture e motivi sono ottimi elementi di design per grafici e tabelle, ma aggiungere etichette può rendere tutto più chiaro. Aiuta anche chi utilizza screen reader a navigare e comprendere meglio i contenuti del sito.

L’etichettatura è particolarmente importante se hai elementi sul tuo sito che si differenziano per colore. Ad esempio, se vendi prodotti in diversi colori, etichettare ogni opzione aiuta gli utenti a capire cosa stanno acquistando e a prendere decisioni più consapevoli.

Inoltre, aggiungere etichette può aiutare ad aumentare il posizionamento SEO. Le etichette forniscono ai bot SEO più informazioni su ciò che è presente sulla pagina. Più le etichette sono descrittive, più alto sarà il ranking SEO.

5. Scegli il grassetto

Le persone daltoniche tendono a vedere meglio le linee spesse e marcate. Evita di usare sottili strisce di colore e assicurati che i link siano in grassetto e ben evidenziati. Questo aiuta a migliorare la chiarezza visiva e la concentrazione dell’utente. Ad esempio, utilizzare linee spesse e in grassetto sotto i pulsanti call-to-action (CTA) può aiutare gli utenti a capire quali sono i prossimi passi, riducendo confusione e frustrazione.

Versioni stilizzate della stessa pagina web che mostrano come il testo in grassetto possa aiutare la leggibilità.

6. Usa correttamente il contrasto dei colori

Puoi far risaltare i componenti del tuo sito a tutti gli utenti utilizzando correttamente il contrasto dei colori nel design. Il trucco è usare luminosità e tono, oltre alle tonalità. Se contrasti solo con il colore ma mantieni la stessa luminosità, gli elementi possono apparire confusi o mescolati a chi ha deficit visivo dei colori. 

Regolare luminosità e tono non è solo una buona pratica per l’accessibilità al daltonismo, ma è anche una best practice per il design UI in generale. Potresti scoprire che contrastare con luminosità e tono, invece che con la pigmentazione, è anche più soddisfacente dal punto di vista estetico. 

Per avere un’idea migliore di come stai implementando i contrasti di luminosità e tono sul tuo sito, guardalo in scala di grigi.

7. Evita alcune combinazioni di colori

Poiché il daltonismo influisce in modo diverso sulle persone, evitare solo alcune tonalità non è sufficiente. Esistono alcune combinazioni di colori che possono creare problemi agli utenti daltonici. Alcune combinazioni comuni da evitare sono:

• Verde/rosso

• Verde/blu

• Verde/nero

• Verde/marrone

• Verde/grigio

• Verde chiaro/giallo

• Blu/viola

• Blu/grigio

Quando possibile, dovresti utilizzare una palette adatta ai daltonici e colori accessibili. Tuttavia, se utilizzi una delle combinazioni sopra, assicurati di fornire metodi alternativi per trasmettere le informazioni, come sottotitoli, etichette, elementi di focus o icone.

Versioni stilizzate della stessa pagina web. Una versione ha molti colori diversi, l'altra è tutta blu.

8. Scegli il minimalismo

Avere diverse combinazioni di colori e tonalità sul tuo sito può sembrare divertente e accattivante, ma può anche essere fonte di confusione e frustrazione per le persone daltoniche. Puoi comunque divertirti scegliendo una palette e utilizzando gradazioni, luminosità e tono. Oltre a migliorare l’accessibilità del sito per chi ha deficit visivo dei colori, un design minimalista può anche rendere il sito più elegante, professionale e gradevole esteticamente.

Perché l’accessibilità dei siti web per daltonici è importante

Il daltonismo colpisce una grande percentuale di persone in tutto il mondo, il che significa che i proprietari di siti web hanno la responsabilità — sia legale che etica — di creare siti adatti ai daltonici. 

Dal punto di vista legale, un sito web adatto ai daltonici rispetta le linee guida citate nell’Equality Act 2010, così come le Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations 2018 per le organizzazioni del settore pubblico. Seguire queste linee guida può aiutare a ridurre il rischio di azioni legali costose, incluse cause e lettere di diffida.

Per gli utenti, un sito web adatto ai daltonici migliora l’esperienza complessiva. Questi siti sono generalmente minimalisti, più puliti e organizzati, con una migliore navigazione e leggibilità. Con un sito più user-friendly, puoi ampliare il pubblico raggiunto, con maggiori opportunità di guadagno e una reputazione aziendale migliore.

Test e feedback

Durante la progettazione del sito — o durante gli aggiornamenti — è importante testare regolarmente il sito per verificare il contrasto dei colori. Utilizzare strumenti come un color contrast checker è un ottimo punto di partenza. Questi strumenti forniscono una panoramica generale dei livelli di contrasto esistenti e delle aree in cui è possibile migliorare.

Tuttavia, per creare un design davvero accessibile, è fondamentale coinvolgere utenti con deficit visivo dei colori sia nella fase di progettazione che in quella di test. Questo ti permette di raccogliere feedback autentici su quanto siano accessibili i tuoi contenuti digitali e di individuare problemi di accessibilità che il software potrebbe non rilevare. Considera di contattare organizzazioni locali o utilizzare i social media per trovare persone daltoniche da coinvolgere nei test.

Durante i test dei tuoi contenuti digitali, assicurati di raccogliere feedback sull’accessibilità per il daltonismo lungo tutto il percorso. Prendi in considerazione l’uso di sondaggi o moduli di feedback per raccogliere le loro opinioni. Potrai poi utilizzare questi spunti nei redesign per migliorare continuamente l’accessibilità del sito.

Sfruttare AudioEye per migliorare l’accessibilità al daltonismo

Progettare per l’accessibilità dei siti web al daltonismo ottimizzerà l’esperienza utente del tuo sito per tutti gli utenti. Con AudioEye, creare un sito accessibile per le persone daltoniche è semplice. Il nostro Color Contrast Checker determina se le combinazioni di colori sono accessibili per chi ha daltonismo o altri deficit visivi e se sono conformi agli standard WCAG. Questo aiuta a semplificare il processo di creazione di palette di colori user-friendly e accessibili. 

Oltre al nostro color contrast checker, le Correzioni automatiche di AudioEye forniscono correzioni in tempo reale per i problemi di accessibilità più comuni — inclusi quelli legati a un contrasto di colori insufficiente. Le nostre Correzioni esperte integrano i test automatici coinvolgendo esperti di accessibilità e membri della comunità con disabilità che individuano e correggono errori di accessibilità. Insieme, questi strumenti migliorano l’esperienza utente per le persone con disabilità, inclusi coloro con deficit visivo dei colori. 

Pronto a verificare se il tuo sito è accessibile alle persone daltoniche? Usa il nostro Color Contrast Checker. 

Vuoi altri consigli sulla progettazione di siti accessibili? Scopri la Guida definitiva al web design accessibile di AudioEye, che copre tutto dai rapporti di contrasto dei colori ai link accessibili.