L'importanza del contrasto

Questa è la traduzione dell'articolo Contrast is King di Leslie Jensen-Inman, pubblicato originariamente su A List Apart il 30 Marzo 2010. La traduzione viene qui presentata con il consenso dell'editore (A List Apart Magazine) e dell'autore.

Avete mai provato a rovistare in mezzo ad un mucchio di pastelli mischiati e rotti (oppure a delicatamente allungare il braccio per raggiungere la vostra scatola piena di colori ordinati perfettamente, nuovi di zecca), per poi sfogliare i fogli con lo scopo di trovare un angolino perfetto dove creare un capolavoro con i vostri colori preferiti? Oppure, andare a caccia di un cartoncino adatto e poi cercare i colori perfetti da abbinare alla carta? Indipendentemente da quanto teneste ordinate le vostre scorte o in quale ordine le sceglieste, anche da piccoli abbiamo sempre cercato la corretta combinazione di colori. “Corretto” era un concetto diverso per ognuno di noi, ma spesso voleva dire cercare il contrasto giusto tra lo sfondo (cartoncino) ed il primo piano (pastelli) in modo da far spiccare il nostro lavoro rispetto alle opere di tutti i nostri compagni.

Da giovani abbiamo già l’idea di come i colori possano condizionare la nostra esistenza. Tuttavia, come bambini non sappiamo che le persone percepiscono i colori in modo diverso. Come bimbi, possiamo anche non intendere il termine “daltonico” ma anche come adulti è difficile comprendere che i colori condizionano anche le persone daltoniche – coloro che vedono soltanto le sfumature del grigio. I daltonici vengono condizionati differentemente rispetto alle persone che riescono a percepire completamente lo spettro di colori.

Il contrasto – l'elemento chiave

Il contrasto è la differenza percepita tra colori che si trovano molto vicino l’uno all’altro. Utilizzare il contrasto effettivamente differenzia il vostro design da altri ma più che altro è l’ingrediente essenziale che rende il contenuto accessibile ad ogni utente. Anche le persone completamente daltoniche, ovvero coloro con tipi specifici di daltonismo, e le persone con una visione bassa hanno bisogno di accedere a dei contenuti sul web. Come designer, dobbiamo assicurarci che ogni spettatore sia in grado di percepire il contenuto sui siti che creiamo. Inoltre, non dobbiamo limitarci a combinazioni con maggiore contrasto tra nero e bianco. Noi dobbiamo considerare tutto il nostro mucchio di colori e creare dei siti che utilizzino i colori con contrasti appropriati.

Bianco e nero

Al giorno d’oggi i designer sono molto più coscienti in materia di scelte di colori. Molte aziende, organizzazioni ed istituzioni seguono precise regole per rendere i loro siti accessibili, richiedendo un designer in grado di decidere i colori in base al contrasto. Ciò ha portato ad un maggiore bisogno e desiderio di sperimentare il contrasto di colori. Una varietà di strumenti e risorse aiutano ad affrontare al meglio questa necessità ed un modo utile per migliorare il flusso di lavoro è quello di utilizzare del tempo per sperimentare questi strumenti da sé. Ogni designer ha un modo di lavorare diverso, ma la ricerca è spesso uno dei primi passi del processo di design.

Un modo per garantire che si utilizzi efficacemente il contrasto è quello di valutare la propria impostazione della scala dei grigi. Utilizzate graybit.com per ricercare alcuni dei vostri siti preferiti e testare gli stessi siti. Fatevi questa domanda: Riesci a leggere il testo? Gli elementi visuali mantengono la loro gerarchia? Prendete nota di ciò che funziona bene quando visualizzate un sito a colori e ciò che smette di funzionare correttamente quando vedete questi siti a scala dei grigi.

Le immagini qui sopra mostrano il sito di InterACT a colori e la versione in scala di grigi create da graybit.com. Il contenuto è sempre leggibile anche nella seconda modalità. Questo sito era stato inizialmente progettato con i grigi e successivamente trasformato a colori. Se si fa prima un modello in nero, bianco e tonalità di grigio, spesso avremo la possibilità di convertirlo in quasi qualsiasi combinazione di colori – solo se la combinazione di colori mantiene lo stesso livello di contrasto tra gli elementi visuali. Create i vostri schizzi in bianco e nero e successivamente create delle composizioni con la scala di grigi. Questo processo vi permetterà non solo di rimanere concentrati sulla gerarchia degli elementi sulla pagina, prevenendo il rischio di rimanere incastrati nella scelta dei colori, ma addirittura vi aiuterà a creare modelli che utilizzano correttamente il contrasto.

Per valutare il contrasto di un sito mentre è ancora in fase di progettazione, usate uno strumento di manipolazione dell’immagine, come può essere Photoshop, e visualizzate l’immagine con i grigi rispetto a RGB. Se si volesse visualizzare il modello a cui si lavora ed inoltre vedere tutto il desktop, includendo tutte le applicazioni, nella scala di grigi è possibile utilizzare Nocturne, un’applicazione che permette a chi osserva di ottenere maggiore controllo sui propri schermi per visualizzare anche in situazioni di bassa risoluzione. Utilizzando Nocturne si può ottenere rapidamente l'idea precisa di come il contrasto si sta sviluppando nei vostri modelli. Provate a paragonare questa immagine del mio desktop, che include una foto con colori come oro, rossi e blu molto accesi, unita al colore standard della “swatch palette” di Photoshop, rispetto all‘immagine per come viene vista nella scala di grigi usando Nocturne.

Per migliori risultati, si può provare a progettare mentre si visualizza ciò che si crea con la scala di grigi. Una volta finito, spegnete Nocturne ed esaminate ciò che si è prodotto. Appuntate le combinazioni di colori che funzionano meglio Come mai funzionano? Posso azzardare la risposta corretta: per il contrasto.

Fine prima parte.

Sommersi dai colori

Una volta provato a progettare usando la scala di grigi e che si è pronti a sperimentare con il colore, ci sono molti strumenti che permettono di scegliere le tonalità più adatte. Color Scheme Designer è uno dei miei preferiti. Questo strumento fornisce molto controllo e molte opzioni che possono aiutare a scegliere i colori della tavolozza senza rendere il processo estenuante. Esso può anche simulare come le persone con diversi tipi di daltonismo interpreteranno il vostro schema di colori.

Si possono esportare tavolozze in moltissimi formati diversi; ciò lo rende uno strumento semplice ed efficiente da aggiungere al proprio processo di lavoro. Se non siete daltonici, queste simulazioni possono comunque portarvi a capire come le persone con specifici tipi di daltonismo percepiscano i colori. Le prossime immagini mostrano come Color Scheme Designer simula gli innumerevoli modi in cui le persone vedono i colori tra cui: visione normale; deuteranopia (impossibilità a vedere il verde); deuteranomalia (difficoltà a percepire il verde); completo daltonismo.

Visitate colblindor.com per saperne di più riguardo ai diversi tipi di daltonismo. Coblis Color Blindness Simulator può anche aiutare ad avere un'idea migliore di come le persone vedono il vostro lavoro. Questo stumento permette di caricare un'immagine e visualizzarla come se aveste diversi tipi di daltonismo. Per esempio, potete usare questo strumento per porre a confronto la capacità di varie persone, come quelle con normali capacità visive, con protanopia (impossibilità a percepire il rosso), con tritanopia (impossibilità a percepire il blu e acromatopsia (l'incapacità totale di percepire qualunque colore) di vedere un'immagine di matite colorate. Inizierete a capire come ognuno sperimenta diversamente i colori e perché il contrasto diventa così rilevante nella creazione di modelli leggibili.

Sfumature di grigio

I siti che utilizzano il contrasto aiutano ogni utente a comprendere il contenuto in maniera più proficua. Checkmycolors.com è un kit semplice da utilizzare e serve per analizzare il contrasto. Digitate un URL nel campo, cliccate “Check” e checkmycolors.com fornisce un'analisi estremamente dettagliata del sito con varie combinazioni di colori. Controlla il rapporto del contrasto, la differenza di luminosità e la differenza di colore. Crea inoltre una tabella che mostra i valori dello sfondo e del primo piano del sito e prova a mostrare come appaiono sfondo e primo piano sul sito. Un piccolo avvertimento – molti siti presentano qualche errore.

L'unico sito che ho provato e che non ha presentato errori è stato checkmycolors.com.
Controllate i vostri siti quando siete pronti ma molto probabilmente vedrete una lista di riquadri rossi con una x all'interno oppure la parola “failure”. Se il vostro sito passa indenne, congratulazioni – potreste essere un esperto del contrasto di colore.

Anche se potrebbe essere un po' scoraggiante vedere come molte combinazioni di colori possano creare dei contrasti poco evidenti, possiamo utilizzare questo strumento per ottenere coscienza di dove bisogna fare una revisione. Questi strumenti ci aiutano a prendere delle decisioni più ponderate su dove sarebbe il caso di risparmiare il contrasto per il bene dell'immagine. Se un progetto non dovesse avere attinenza con la leggibilità del contenuto principale, può essere importante creare marcati contrasti di colore? Forse no. Potreste affermare che l'elemento più importante di molti siti è il contenuto, e finché il design non intralcia il contenuto, forse tutti gli utenti non hanno necessità di vedere ogni aspetto del design.

Dall'altro lato, ci sono aspetti dei siti che sono fondamentali da riconoscere per i visitatori. Per esempio, è molto importante che i visitatori riescano facilmente a capire quando sono sopra un link. Segnali visuali sono critici quando si sta cercando di differenziare tra vari stati dei link; comunque il contrasto tra colori non è l'unico modo di mostrare questi stati chiaramente. Questi stati hanno caratteristiche visuali che non richiedono all'utente di affidarsi esclusivamente al colore per determinare lo stato corrente.

Se vengono aggiunti segnali visuali per mostrare i vari stati, il contrasto diventa una questione minore. Per esempio, i siti di InterACT creano distinzioni visuali tra questi stati cambiando i colori e aggiungendo una sottolineatura al link cliccato. La sottolineatura assicura che anche con la scala di grigi le persone riescano a vedere la differenza tra i vari stati.

Ogni designer deve stabilire il bilanciamento tra design e leggibilità – una decisione diviene più semplice quando si considera i propri visualizzatori e lo scopo del sito. Le fonti qui elencate sono solo alcune dei tanti strumenti per il colore e il contrasto disponibili sul web; questa lista non è definitiva. Gli strumenti specifici non sono così importanti come lo è invece essere certi di includere contrasti di colore appropriati come parte del vostro percorso. Ciò permetterà agli utenti, indipendentemente da come interpretano i colori, di leggere e godersi il vostro sito. Così come scegliere il colore adatto, tra le varie combinazioni quando si è piccoli, può aiutare a rendere la nostra immagine più accattivante rispetto ad tutti i lavori dei nostri compagni, allo stesso modo utilizzare le combinazioni di colori mentre si progetta un sito permetterà al nostro sito di spiccare sul web rispetto a tanti altri.

Traduzione di Nicole Brioschi per HTML.it.