Progettare per, e come, una persona daltonica

Daltonismo è una lieve disabilità attraverso la quale l'esperienza interessata diminuisce la capacità di distinguere i colori dagli altri. Questo può essere un vero inconveniente per chiunque nel campo del design poiché la teoria del colore è una caratteristica integrale del design di successo, e molte decisioni si basano sul sentimento e l'emozione derivate dalle decisioni di progettazione, piuttosto che su un insieme generico di linee guida e tassonomie.

Probabilmente hai già sentito molto sull'accessibilità nel web design; è importante soddisfare il pubblico più vasto, che potrebbe potenzialmente avere problemi con il tuo sito web se non progettato nel modo giusto. Come bonus, lo toccheremo un po 'più tardi, ma l'obiettivo principale di questo articolo è in realtà guardare a un daltonico progettista può ancora personalizzare con successo il design di un sito web.

Nell'articolo di oggi, vedremo come i designer daltonici possono ancora creare un case study di successo con un buon uso del colore e come i non-malati possano ancora tenere conto delle esigenze del pubblico daltonico.


Comprensione del colore cecità

Come ho detto prima, daltonismo è una lieve disabilità in cui distinguere il colore può essere un problema. In poche parole, le persone con il daltonismo non possono identificare determinati colori tra altri simili, o semplicemente nessuno.

Esistono diversi tipi di daltonismo. La cecità ai colori totale ("monocromazia") è una condizione molto rara, in cui le persone vedono solo toni e livelli di luminosità diversi, senza alcun colore. Tuttavia, i casi più comuni sono l'incapacità di riconoscere blu / giallo o rosso / verde, essendo quest'ultimo il più comune dei due.

Sono stati sviluppati test per riconoscere il daltonismo, normalmente chiedendo al potenziale sofferenza di riconoscere un messaggio composto da punti. Chi soffre e chi non soffre vedrà messaggi diversi, permettendo di determinare se sono malati.


Cosa vedi in questa cerchia di punti? Le persone non colpite dovrebbero vedere il numero "74", ma quelli con la condizione potrebbero vedere 21, o niente del tutto.

Speriamo che l'immagine sopra rappresenti meglio ciò che sto cercando di attraversare. I tuoi colori possono essere percepiti in modo diverso dai due diversi gruppi (malati e non affetti), invalidando quindi la tua combinazione di colori non modificata. Una persona potrebbe vedere 74, ma un sofferente potrebbe mancarlo completamente e lasciarlo completamente fuori dal radar.


Un po 'di colore

Abbiamo già un articolo qui su Webdesigntuts + sulla teoria dei colori, che probabilmente dovresti leggere prima di continuare. Thomas Cannon fa un ottimo lavoro spiegando cos'è la teoria del colore.

La teoria del colore in realtà copre una serie di cose, ma al livello più elementare è l'interazione dei colori in un design attraverso la complementazione, il contrasto e la vivacità.

Come probabilmente saprai, i colori sul web sono generalmente definiti come un codice esadecimale; qualcosa come # ff0000. Il nostro browser quindi li traduce in modo intelligente in valori RGB, al fine di rendere visibile il colore che abbiamo chiesto. Se vuoi immergerti un po 'più in profondità, i codici esadecimali sono in realtà molto interessanti, dato che puoi scomporlo per scoprire le specifiche per rosso, verde e blu, grazie ai valori che vanno da 0-9 o A-F.

Per fortuna, i tipi creativi hanno avuto a lungo un ottimo strumento per aiutarli a capire quali colori hanno un bell'aspetto: la ruota dei colori. La ruota dei colori è una forma a forma di ciambella, derivante dai tre colori primari: rosso, giallo e blu. È oltre l'orizzonte di questo articolo entrare troppo nel dettaglio qui (e, inoltre, starei seguendo le stesse orme di Thomas), quindi non andrò molto oltre il dire che questa ruota può aiutarci a determinare quale i colori hanno una chimica naturale.

Una combinazione di colori è semplicemente un insieme logico di colori che vanno insieme, e questi derivano dalla ruota dei colori. C'è una manciata di metodi diversi per scegliere i colori nella ruota dei colori, che puoi trovare nella seconda metà dell'articolo di Thomas.

Ora sappiamo un po 'di più su come il colore e le combinazioni di colori funzionano, vediamo in effetti come possiamo "assumere" schemi che si integreranno naturalmente.


Progettare come: colori monocromatici

Gli schemi cromatici monocromatici non devono essere confusi con la monocromazia. La monocromia è la cecità ai colori di cui abbiamo parlato prima, il che è molto raro e fa sì che il malato veda un solo colore, in più sfumature. Il monocromo è, infatti, destinato a essere in tal modo, con disegni costituiti interamente di un solo colore in più tonalità, rispetto all'utilizzo di più colori.

L'utilizzo di una combinazione di colori monocromatici non è necessariamente un ostacolo. In effetti, può essere un grande vantaggio dare unità al tuo progetto. E il nero? Certo, potresti classificare il nero come un secondo colore, ma puoi comunque ottenere un contrasto simile usando solo una variante molto scura del colore scelto.

Raggiungere il contrasto è semplicissimo quando si utilizza uno schema cromatico monocromatico. Dato che quelli con il daltonismo possono ancora riconoscere diverse sfumature di colore, l'introduzione del contrasto non è un problema poiché viene riconosciuta allo stesso modo.

Naturalmente, uno schema cromatico monocromatico può essere utilizzato con qualsiasi singolo colore e può essere abbastanza efficace in questo modo. Tuttavia, per quelli che hanno immediatamente pensato "in bianco e nero" quando ho menzionato il monocromatico, anche questo è efficace. Molti siti minimalisti utilizzano una combinazione di colori in scala di grigi, che non dovrebbe essere un problema per chiunque possa visualizzarli nel modo previsto. Se vuoi stare al sicuro, la scala di grigi può sembrare fantastica, purché si adatti al tono e alla sensazione generale del tuo design.


Progettare per: alto contrasto

Alte quantità di contrasto sono davvero importanti qui perché è un ottimo modo per creare una combinazione di colori coerente, senza doversi preoccupare del parco dei colori. Possiamo creare sfumature molto chiare a molto scure di un singolo colore, dandoci una ricchezza di valori diversi da usare. Ad esempio, se stavi usando un blu chiaro per lo sfondo, dovresti usare un blu molto più scuro per il testo per mantenere leggibile il testo.

L'utilizzo del bianco e nero offre ai visitatori daltonici un modo per apprezzare facilmente il tuo design, anche se non possono necessariamente identificare i colori desiderati. Tuttavia, l'elevato contrasto offre una grande quantità di miglioramenti di leggibilità a qualsiasi utente ed è un principio di progettazione che dobbiamo essere consapevoli di non accedere all'accessibilità.


Progettazione per: tonalità, saturazione e luminosità

Come modificare il contrasto, modificare la tonalità, la saturazione e la luminosità dei colori può aiutarci a mostrare la definizione e consentire agli utenti di distinguere, senza utilizzare più colori. Attaccando con un piccolo set di colori, o anche solo uno, cambiando la saturazione si può davvero mostrare un contrasto distintivo all'interno di due campioni di un colore, così come la luminosità e la tonalità.

Questi metodi consentono ai designer daltonici di definire facilmente diversi pezzi del loro design attraverso il colore, senza doversi preoccupare troppo dell'estetica come se stessero aggiungendo un nuovo colore al mix. Per i visitatori daltonici, ciò consente di distinguere facilmente le diverse parti dall'aspetto.


Entrambi questi esempi sono nati come duplicati esatti. Tuttavia, la tonalità è stata leggermente spostata a destra.

Progettare come: "Prendere in prestito" i colori

Questo è principalmente un suggerimento rivolto ai designer daltonici, piuttosto che a quelli che considerano semplicemente il loro pubblico daltonico.

Oggigiorno è incredibilmente facile "prendere in prestito" colori da altri progetti web o da altri progetti non basati sul Web. Semplicemente estraendo lo strumento "eyedropper" dal nostro arsenale di strumenti di editing grafico, possiamo facilmente identificare i colori all'interno di un disegno e iniziare a usarli nei nostri. Il "rubare" le combinazioni di colori può essere un modo davvero efficace per identificare ciò che funziona bene e replicarlo in una forma diversa mantenendo le intenzioni di successo di uno schema di successo.

Certo, è una specie di imbroglio, ma non così tanto da rubare. Stiamo semplicemente individuando i colori nei progetti web che funzionano bene, non entrando e sollevando interi elementi. Fortunatamente, il colore non è protetto da copyright.

Dopo aver identificato i colori e averli rappresentati mediante valori esadecimali, possiamo usarli insieme ad altri metodi (come l'uso di un singolo colore con più sfumature, come descritto sopra). Potrebbe essere più difficile, ma assicurati di variare la tavolozza e di inventarla tu stesso, senza sollevare l'intero schema dal progetto di un altro.


Progettazione per: selezione di colori con strumenti specializzati

Se stai progettando tenendo conto delle persone daltoniche, ci sono un paio di strumenti online che ti permetteranno di simulare i singoli colori in circostanze daltonici.

Questi strumenti offrono alcune informazioni su ciò che i visitatori daltonici vedranno e ti consentono di selezionare attentamente i colori assicurandoti che siano belli per i visitatori normali e sofferenti. Il primo strumento, Color Laboratory, ti consente di verificare in che modo i colori appaiono in combinazione tra loro, così puoi facilmente creare combinazioni di colori che funzionano bene per chiunque, malato o meno, su qualsiasi sistema operativo.

Il secondo strumento è un semplice modulo che ti permette di incollare nel tuo codice HTML e di scambiare valori esadecimali di colore con l'equivalente daltonico, permettendoti di modificarli facilmente per creare una tavolozza che sia attraente per i malati e non-malati allo stesso modo.


Progettazione per: non associare il colore al feedback

Il prossimo è un consiglio rivolto principalmente ai designer che considerano il loro possibile pubblico daltonico. Naturalmente assumiamo certi sentimenti con il colore, come il rosso con pericolo o il verde con sicurezza. L'utilizzo di questo principio all'interno dei nostri web design è un ottimo modo per associare immediatamente il risultato di una certa azione, ma solo a quelli con una visione normale. I visitatori che non conoscono i colori potrebbero non creare l'associazione istantanea, suggerendo che è necessario integrare un ulteriore metodo di avvertimento o elogio.

Questo è più di un punto di usabilità, ma è quello che dovresti probabilmente prendere in considerazione per minimizzare la frustrazione degli utenti. Naturalmente, le persone daltoniche non sono completamente cieche al colore. Invece, vedono colori diversi da quelli che vediamo e hanno, quindi, associato naturalmente colori diversi a messaggi diversi. Tuttavia, è molto più semplice garantire il riconoscimento anche attraverso altri mezzi.


Bonus: usa il filtro della pagina Web Colorblind

Progettare per il daltonico può essere problematico per i progettisti che non sono in realtà daltonici. Come prendiamo in considerazione l'accessibilità quando non soffriamo delle condizioni in mano?

Fortunatamente, sul web sono disponibili una serie di "simulatori" di accessibilità in cui una pagina web viene resa in un certo modo. L'esempio sotto, chiamato genericamente come "Colorblind Web Page Filter", prende il tuo sito e lo filtra come se fossi daltonico.

Lo strumento è ancora in fase di sviluppo e potrebbe essere necessario del tempo prima che un rendering diventi disponibile per la visualizzazione. Tuttavia, la gamma di filtri colorati disponibili è piuttosto ampia e copre tutti i principali tipi di daltonismo.

Un altro simulatore per l'anteprima di ciò che un pubblico daltonico vedrebbe è Vischeck, che consente di visualizzare in anteprima una pagina Web in tempo reale, o alcune immagini, in uno dei tre tipi di deficit della visione a colori. Ha anche uno strumento che correggerà le immagini in modo che gli spettatori daltonici possano vederli in modo naturale.


Conclusione

Daltonismo di qualsiasi tipo non è un problema raro che colpisce solo una manciata di persone. In realtà, è una condizione diffusa che molte persone incontrano nelle loro vite quotidiane. Dovremmo, come web designer, cercare di prendere in considerazione questi visitatori nel miglior modo possibile. Se usiamo il colore, in combinazione con un layout ben organizzato, essere daltonici non dovrebbe essere un problema, in termini di leggibilità o estetica.

Gli effetti della cecità ai colori saranno più sentiti quando è il designer a soffrire. Fortunatamente, possiamo progettare in monocromia e creare un design universale ed esteticamente piacevole utilizzando il contrasto su più colori. Risulta, il contrasto è la chiave. Come designer, questo non dovrebbe essere qualcosa che non conosciamo già, poiché il contrasto è una chiave nella leggibilità di un design.

Ovviamente, comprendiamo che qualsiasi design, monocromatico o meno, dovrebbe avere alti livelli di contrasto per aumentare la leggibilità degli elementi su una pagina. Tuttavia, possiamo "imbrogliare" e prendere in prestito i colori, oppure utilizzare uno dei suddetti strumenti per creare combinazioni di colori che funzioneranno automaticamente per tutti.

Fortunatamente, daltonismo non è un grosso problema sul web, come in altri campi. Imparando una teoria dei colori, possiamo assumere schemi senza nemmeno vederli attraverso gli occhi giusti, permettendoti di ottenere risultati perfetti ogni volta.