Il cervello umano è in grado di fare una prima valutazione istintiva ed emozionale di un sito guardandolo per meno di 1/20 secondo (il tempo di un battito di ciglia). In questo istante sarà comunque registrata una sensazione positiva o negativa che la nostra parte razionale tenterà poi di confermare nel resto della navigazione (cfr: studi della dott.ssa Lindgaard, Carleton University, Ottawa, Canada, 2006).
Quindi, se il sito ci ha impressionato negativamente tenderemo inconsapevolmente a notare soprattutto gli aspetti negativi durante la navigazione successiva, sottovalutando invece quelli positivi e viceversa se invece l’impatto iniziale è stato buono.
Per questo, indipendentemente dalla bontà dei contenuti e dei servizi offerti, sul web è comunque molto importante presentare una grafica curata ed esteticamente gradevole.
Sfortunatamente però, riguardo alla scelta dei colori con cui costruire la nostra interfaccia, non esiste un “codice cromatico universale” condiviso in tutte le culture mondiali. Esistono però delle considerazioni di fondo generalmente valide che si dovrebbero sempre tenere presenti nell’abbinamento dei colori.
Normalmente le impostazioni grafiche più gradite agli utenti sono quelle che non prevedono l’uso di più di tre o quattro colori principali e relative sfumature (uno sfondo e due, massimo tre, colori per il testo e il resto degli elementi grafici che compongono l’interfaccia).
A meno di casi particolari (siti per utenti anziani o con disabilità visive) è meglio quindi evitare colori ad alto contrasto (bianco/nero o quasi) e colori chiari su sfondo bianco o scuri su sfondo nero, è molto difficile infatti costruire un’interfaccia realmente gradevole utilizzando uno di questi schemi cromatici.
I colori del testo e degli elementi grafici (icone, punti elenco, box tematici, pulsanti, ecc.) devono essere utilizzati in maniera uniforme (stesso servizio/funzione = stesso colore) e costante (uguale per tutto il sito), in modo da attirare e dirigere l’attenzione dell’utente sui concetti più importanti o sulle azioni obiettivo di nostro principale interesse (iscrizione alla newsletter, offerte, richiesta informazioni, acquisto, ecc.).
In ogni caso, il segreto di una scelta cromatica vincente più che nella selezione dei singoli colori è nel loro giusto abbinamento.
Esistono numerose classificazioni internazionali di colori che si differenziano principalmente perché la scala cromatica completa viene ottenuta per aggiunta di un colore ad un altro (mescolanze additive), oppure per sottrazione (mescolanze sottrattive).
Le più diffuse si basano su 3 o 4 colori primari che con successive mescolanze originano poi tutti gli altri. Le più conosciute sono il modello RGB (in cui i colori primari sono: rosso, verde e blu), il RGY (rosso, verde e giallo), il CMYK (ciano, magenta, giallo e nero, detta anche quadricromia) e il HSB (che invece si basa su tonalità, saturazione e luminosità per ottenere tutta la sua gamma cromatica).
Nell’esempio qui sotto consideriamo una ruota cromatica basata su rosso, giallo e blu. Unendo a due a due i colori primari si ottengono i colori secondari: il verde, l’arancio ed il viola. Dalle combinazioni tra i colori primari e i secondari si ottengono poi i colori terziari (il giallo-arancio, il rosso-arancio, il rosso-viola, il blu-viola, il blu-verde ed il giallo-verde) e così via fino ad ottenere una ruota cromatica completa.
La scelta tra combinazioni di colori complementari (cioè vicini tra loro nella ruota cromatica completa) o contrastanti (agli opposti) dipende dalla finalità che si vuole raggiungere.
Colori contrastanti attirano molto l’attenzione, ma se usati con troppa frequenza in un’interfaccia risultano stressanti per l’occhio (e danno un’impressione di confusione), mentre quelli complementari sono più armoniosi, ma ovviamente evidenziano meno l’elemento rappresentato (testo, bottone, icona, ecc.).
La giusta via è nell’uso equilibrato di entrambi gli accostamenti.
I colori contrastanti vanno scelti dove si ha la necessità di dare risalto ad un certo elemento (testo, pulsanti, chiamate all’azione, ecc.), ma senza esagerare. Troppi “punti di attenzione” forti (più di 3-4 per ogni singola pagina) significano meno attenzione per ognuno di essi e maggiore incertezza per l’utente sulle scelte di navigazione (e quindi una sgradevole sensazione di confusione e scarso ordine).
I colori complementari vanno invece preferiti quando si vuole stressare di meno l’occhio del navigatore o per gli elementi della navigazione standard del sito (i menù, la separazione delle varie aree di contenuto, ecc.).
Per quanto riguarda invece il testo principale della pagina, ci deve essere sempre un sufficiente contrastato rispetto allo sfondo, altrimenti si rischia di rendere troppo faticosa la lettura.
Non esistono schemi cromatici migliori in senso assoluto, tuttavia sono relativamente sicure le combinazioni di colori usate in siti molto noti agli utenti (come le applicazioni Apple o i principali social network) o presenti in natura (paesaggi montani o marini, foreste, tramonti, ecc.).
Un’eccellente tool per testare i risultati degli schemi cromatici prescelti (anche su persone con disturbi visivi) è: 
www.colorschemedesigner.com.
Le combinazioni basate su colori caldi (formati da combinazioni in cui prevalgono il rosso ed il giallo) sono consigliate soprattutto quando si vuole sottolineare in maniera decisa qualche elemento grafico collegato a qualche azione obiettivo della pagina (testo, bottoni, aree tematiche, ecc.), in quanto tendono ad “avanzare” (cioè ad emergere dal contesto).
I colori freddi, in cui cioè prevale il blu, andrebbero invece utilizzati soprattutto per gli elementi di contorno e la navigazione ordinaria dell’interfaccia, in quanto attirano meno l’attenzione, tendono ad essere “recessivi” (si vedono meno man mano che ci si allontana dalla sorgente) e sono comunque tra i più neutri e generalmente graditi (soprattutto ad un’utenza maschile).
Una buona interfaccia, che richiami adeguatamente l’attenzione sui suoi elementi fondamentali, non può quindi fare a meno di una costante “contaminazione” di contrasti e contiguità basate su colori caldi e freddi.
E’ sempre bene inoltre utilizzare combinazioni che siano formate da colori che abbiano non solo tonalità diverse, ma anche luminosità differenti, perché altrimenti i nostri contenuti potrebbero risultare illeggibili per chi soffre di disturbi visivi come il daltonismo o la cecità ai colori (circa il 5% della popolazione mondiale). I programmi di elaborazione grafica e il tool di test degli abbinamenti cromatici indicato prima sono ottimi strumenti di verifica.
Ma analizziamo più in dettaglio le caratteristiche di ogni singolo colore. Da tempo il marketing ha identificato il rosso, il marrone ed il blu, in tutte le loro variazioni di tonalità, come i colori meno rischiosi e più ampiamente graditi.
In particolare il rosso è considerato il colore della passione, quello che più potentemente richiama l’attenzione e spinge efficacemente all’azione. Tuttavia viene collegato anche ad errori o comportamenti pericolosi (in opposizione al verde = via libera), quindi, è bene non eccedere nel suo uso.
Il marrone (e tutte le tonalità comprese tra questo ed il rosso) mitiga gli aspetti negativi del rosso conferendo maggiore stabilità e credibilità. Tutte le varianti sul colore delle terrecotte sembrano essere molto gradite (soprattuto agli utenti nord europei), probabilmente perché richiamano colori e temi mediterranei.
Meno acceso del rosso, ma anche molto meno visibile e quindi meno efficace nel provocare una reazione, il rosa richiama invece aspetti romantici, femminili e non violenti.
L’arancio è il più stabile e rassicurante tra i colori caldi (in quanto combinazione del rosso, che richiama l’azione, con il giallo, che richiama allegria), spesso associato ad offerte speciali, implica energia, equilibrio, estroversione ed apertura. Nelle sue varianti associate ai colori degli agrumi è in grado addirittura di stimolare l’appetito dell’osservatore ed è ideale per chiamate all’azione (tasti, pulsanti ,ecc.) purchè non ripetute troppo spesso nella pagina.
Il giallo è di difficile abbinamento, in quanto tende a scomparire sui colori chiari, va quindi spesso contornato con colori più forti, ma in questo caso ha ottimi risultati nell’attirare l’attenzione. Le sue varianti più scure (eccettuato il color oro) sono da evitare in quanto collegate a concetti negativi, come gli stati di malattia.
Considerato come il colore universalmente più gradito, soprattutto dagli uomini, il blu, evoca calma, professionalità, affidabilità e saggezza. E’ sicuramente tra i colori meno rischiosi da utilizzare, a meno che non si commercializzino alimenti (visto che calma la fame). E’ particolarmente indicato per la navigazione principale di ogni interfaccia.
Il verde è uno tra i colori più riposanti e gradevoli per il cervello umano, in quanto richiama la natura, l’armonia e la stabilità. Ha anche proprietà curative ed, in opposizione al rosso, denota un procedimento o una area sicura (come per i semafori). Nella cultura nord americana le sue varianti più scure richiamano il colore del denaro.
I colori rosso-viola e blu-viola nelle loro varie combinazioni (tra cui anche il porpora) associano la stabilità del blu all’energia del rosso. Alcune varianti denotano nobiltà, lusso, mistero e magia, quelle più scure però richiamano i colori del lutto. In combinazioni cromatiche particolarmente sofisticate potrebbero anche essere utilizzati come ottimi richiami di attenzione a contrasto.
Il bianco è considerato il colore della perfezione. Richiama concetti di purezza, innocenza, pulizia, ordine e lucentezza. In opposizione al nero ha spesso un significato positivo. Può essere associato anche al freddo (in analogia con la neve), ma anche ad ospedali, medici o prodotti farmaceutici. Molto indicato per “dare respiro” allo sguardo degli utenti in siti molto affollati di elementi. Gli spazi vuoti di una interfaccia (nulla come il colore bianco li sottolinea) sono fondamentali tanto quanto gli elementi che vi sono inseriti, proprio perché sono in grado di farli risaltare maggiormente, conferendo alla grafica un’impressione generale di ordine e organizzazione dei contenuti.
Il nero è invece associato all’eleganza, al potere, al male, al mistero, alla paura ed alla morte. Molto formale, denota però anche prestigio, stile, eleganza ed autorità, conferisce profondità alle prospettive. Se è usato come sfondo, diminuisce però sensibilmente la leggibilità dei testi, mentre se è combinato con colori rosso-arancio dà vita a schemi cromatici estremamente aggressivi (da usare quindi con estrema cautela).
Infine, al di là delle scelte di abbinamento cromatico, tutte le interfacce di maggiore gradimento sono spesso basate su elementi stondati ed effetti di ombreggiatura, rilievo e sfumature, difficilmente visibili in siti artigianali e di bassa qualità (caratterizzati invece spesso dall’uso di elementi grafici squadrati e colori pieni).
Un discorso a parte merita il colore da scegliere per i link. La scelta sicuramente più sicura e di massima usabilità è il blu (unito alla sottolineatura e al cambio colore dopo che l’utente li ha cliccati). In ogni caso bisogna fare in modo che ci sia un buon contrasto con il resto dei contenuti, che il testo cliccabile sia ben evidenziato e che quel colore in tutto il sito sia riservato solo ai link (così facendo, con ogni probabilità, le parole inserite nei link saranno le prime, se non le uniche, ad essere lette dai visitatori).