Il colore gioca un ruolo fondamentale nella progettazione dell’interfaccia utente. Se fatto bene, migliora l’esperienza utente, influenza le decisioni di acquisto e riflette la voce dei marchi.

Quindi, come si fa a progettare interfacce efficaci, accessibili ed esteticamente gradevoli per gli utenti daltonici?

Mentre la scienza dietro il daltonismo è piuttosto complessa, il succo è che le persone daltoniche hanno difficoltà a vedere il colore chiaramente o a differenziare tra alcuni colori., Con questo in mente, in questo articolo, condivideremo alcuni suggerimenti su come migliorare l’accessibilità del tuo sito e l’esperienza che offre per le persone daltoniche.

Daltonismo in un mondo digitale

Secondo gli studi, circa 1 uomo su 12 (e 1 donna su 200) è daltonico. Anche se le persone daltoniche possono vedere le cose con la stessa chiarezza di tutti gli altri, non sono in grado di discernere completamente la luce rossa, verde o blu. Ci sono diversi tipi di daltonismo; deuteranopia e protanopia daltonismo sono i più comuni.,

Le persone con daltonismo rosso-verde (deuteranopia) hanno difficoltà a distinguere tra rosso e verde. Allo stesso modo, per le persone con daltonismo rosso (protanopia), tutti i colori rossi sembrano opachi.

Ciò che significa dal punto di vista del design è che affidarsi al solo colore per la leggibilità e l’accessibilità renderebbe il tuo sito Web difficile da usare per qualcuno che è daltonico.

Puoi utilizzare il simulatore di daltonismo Coblis per vedere come appare il tuo sito agli utenti daltonici.,

7 Modi per migliorare l’accessibilità del colore per gli utenti daltonici

Gli elementi di design e le tecniche che migliorano l’accessibilità del colore per gli utenti daltonici sono generalmente considerati buone pratiche di progettazione. Mentre si potrebbe pensare che il fascino estetico del tuo sito web potrebbe soffrire se si progetta per l’accessibilità, questo non è certamente il caso.

Qui, daremo un’occhiata ad alcuni dei modi in cui è possibile progettare un’interfaccia utente più accessibile tenendo a mente gli utenti daltonici.

#1: Usa modelli e trame

Le differenze di colore sono incredibilmente importanti con la visualizzazione dei dati, ad esempio,, grafici e grafici a torta. La scelta di colori con un basso rapporto di contrasto può rendere il grafico difficile da interpretare per gli utenti daltonici.

Ecco cosa si dovrebbe fare invece:

  • Utilizzare modelli e texture per rendere più facile per gli utenti di differenziare diversi segmenti.
  • Aggiungi etichette di testo ai segmenti per renderli ancora più facili da capire.

Diamo un’occhiata a come una persona daltonica con tritanopia potrebbe vedere un grafico a barre blu-verde rispetto a come vedrebbe lo stesso grafico con motivi e trame.,

Ecco come sarebbe se etichettassi ogni segmento invece di usare pattern:

#2: Utilizza colori e simboli

Non dovresti fare affidamento esclusivamente sul colore per comunicare errori o trasmettere informazioni attraverso la tua interfaccia utente.

Diamo un’occhiata al modulo di iscrizione di Facebook, ad esempio., Se il modulo invocata colore solo per far sapere agli utenti che avevano fatto un errore in un campo particolare, potrebbe essere qualcosa di simile a questo per un rosso-cieco (protanopia) utente:

Ecco uno sguardo a Facebook sign up form con i simboli e i messaggi di errore collegato:

l’Utilizzo di icone e simboli nelle forme per consentire all’utente di sapere che hanno fatto un errore a migliorare l’accessibilità e li aiuta a correggere il loro errore più veloce.

#3: Usa etichette di testo

L’aggiunta di etichette di testo a filtri e campioni di colore migliora l’accessibilità per gli utenti daltonici., A seconda del tipo di daltonismo, gli utenti potrebbero avere difficoltà a distinguere tra diversi colori (o sfumature) senza una sorta di testo descrittivo.

Ad esempio, senza l’etichetta di testo descrittivo su Amazon, gli utenti daltonici non sarebbero in grado di distinguere una camicia rossa da una arancione o verde.

L’aggiunta di etichette di testo ai filtri colore migliora l’accessibilità anche per le persone con visione normale. Ad esempio, il bianco, il bianco sporco e il grigio chiaro sono spesso difficili da distinguere tra i monitor.,

#4: Sottolinea i collegamenti

Un sacco di tempo usiamo il colore del carattere o il peso del carattere per indicare i collegamenti. Mentre può essere possibile per qualcuno con deuteranomalia, protanopia o tritanopia distinguere il testo di ancoraggio dal testo normale, non è certamente l’ideale a causa del basso rapporto di contrasto.

Qualcuno con monocromia non sarebbe in grado di distinguere tra testo e testo di ancoraggio e dovrebbe passare il mouse sul testo per vedere se il cursore cambia in un puntatore.

Per questo motivo, è una buona idea aggiungere una sottolineatura ai collegamenti testuali., In questo modo è facile distinguere immediatamente il testo normale e il testo di ancoraggio. Ecco un esempio dal sito Engadget:

#5: Combinazioni di colori per evitare

Alcune combinazioni di colori non sono ideali per gli utenti daltonici sia perché hanno bassi rapporti di contrasto o perché sono difficili da distinguere tra.,

Ecco un elenco di combinazioni di colori che si dovrebbe evitare di utilizzare nei vostri progetti di interfaccia, se possibile:

  • verde-rosso
  • verde-blu
  • verde-marrone
  • verde-nero
  • verde-grigio
  • blu-grigio
  • luce verde-giallo
  • blu-viola

Ecco cosa verde il rosso e il blu-viola combinazioni di colore, avrebbe l’aspetto di un utente con la protanopia:

#6: Rendere Pulsanti principali Standout

Molte volte, i progettisti utilizzano il colore per rendere i pulsanti principali spiccano., Il problema con questo è che il colore che si utilizza può essere difficile per gli utenti daltonici di percepire.

Ecco cosa dovresti fare:

  • Aumenta le dimensioni del tuo pulsante principale.
  • Provare diverse combinazioni di posizionamento.
  • Aumentare il contrasto tra i pulsanti primario e secondario.
  • Usa bordi, icone o peso del carattere per differenziare i pulsanti primari e secondari.

Ad esempio, Reformation utilizza dimensioni e colore per enfatizzare il pulsante principale.,

E Firebox presenta il pulsante principale nell’angolo in basso a destra e il pulsante secondario nell’angolo in alto a sinistra.

#7: Contrassegna i campi modulo obbligatori

Gli utenti daltonici potrebbero avere difficoltà a differenziare tra campi obbligatori e facoltativi se si utilizza solo il colore per indicare i campi obbligatori nei moduli.

Invece, potresti:

  • Contrassegnare i campi obbligatori con un asterisco (*).
  • Campi etichetta con la parola Obbligatorio o Facoltativo.
  • Rimuovi i campi opzionali dai moduli.,

Conclusione

La progettazione dell’interfaccia utente per utenti daltonici ti aiuterà a migliorare l’accessibilità del tuo sito anche per gli utenti con visione normale. Anche se non esiste una soluzione adatta a tutti quando si tratta di accessibilità al Web, ecco alcuni suggerimenti che dovresti tenere a mente:

  • Usa modelli e trame per mostrare il contrasto in grafici e grafici.
  • Utilizzare colori e simboli per trasmettere messaggi di errore.
  • Aggiungi etichette di testo ai filtri colore e ai campioni.
  • Sottolinea i collegamenti per distinguere tra testo normale e testo di ancoraggio.,
  • Evitare l’uso di combinazioni di colori poveri come verde-rosso e blu-viola.
  • Usa dimensioni, posizionamento o pesi dei caratteri per far risaltare i pulsanti primari.
  • Contrassegnare i campi del modulo obbligatori con un simbolo (ad esempio un asterisco) o etichettarli.