Chi lavora o ha come passione lo studio di soluzioni di comunicazione visiva, con particolare riferimento ai progetti di comunicazione online, ha sicuramente presente quanto la scelta dei colori impiegati possa influire sulla qualità finale di un sito, un portale o qualsiasi elemento grafico visualizzato in un browser. La scelta dei colori per il proprio sito non va però affidata al solo gusto personale ma ocorre saper ben individuare delle combinazioni cromatiche efficaci...

La differenza tra un logo che si lascia facilmente ricordare rispetto a uno dei tanti simboli grafici "tutti uguali", piuttosto che la possibilità di distinguere e identificare senza affaticare l'occhio le scritte o gli elementi grafici di navigazione dallo sfondo della pagina, sono solo due dei numerosi esempi che ci fanno capire quanto la scelta dei colori sia non solo una velleità estetica ma anche, e soprattutto, uno strumento con cui perseguire l'efficacia della comunicazione visuale progettata. Grazie all'esperienza maturata negli ultimi anni dalle scienze neurocognitive, alla presenza di pratiche consolidate di Web Design e Visual Communication, e alla disponibilità di software e strumenti tecnologici in grado di misurare in maniera oggettiva la percezione dei colori, fortunatamente oggi la scelta dei colori e il loro abbinamento non è più da considerarsi un'operazione puramente estetica affidata all'estro creativo, ma un vero e proprio insieme di tecniche e metodologie che vanno applicate dal Web Designer in fase di progettazione del sito.

UNA TAVOLOZZA BEN DEFINITA
La prima regola da seguire quando si progetta l'impiego dei colori su un sito è quella che richiede la definizione di una tavolozza di colori ben precisa in cui ogni singolo colore viene chiaramente identificato sia per quanto riguarda i nomi e i codici che li rendono replicabili nei diversi software (per intenderci la codifica esadecimale impiegata nel codice HTML della pagina o i valori RGB impiegati dai sistemi di selezione del colore dei software di fotoritocco e grafica come Photoshop), sia per la funzione associata a ogni colore (Figura 1).

Figura 1 - I colori Web Safe sono solitamente rappresentati secondo schemi geometrici che ne favoriscono l'individuazione rapida

Una volta identificati tutti i colori da utilizzare nel sito servendosi delle regole che vedremo nelle righe successive, si dovrà pertanto generare un documento elettronico, che solitamente viene realizzato in formato HTML o nei formati standard ACO, ACT o addirittura in XML e CSS), che deve essere condiviso tra tutti coloro che lavorano alla realizzazione del sito. La tavolozza dei colori è, in definitiva, una sorta di dizionario in cui vengono identificati sia i codici cromatici utilizzabili nel progetto sia il loro significato e il tipo di impiego che ne verrà fatto. Per intenderci, su un documento che riporta la tavolozza si potrà identificare un colore di sfondo per le pagine, un colore per le scritte, uno per i titoli, una serie di colori ben contrastanti per distinguere i pulsanti di accesso alle sottosezioni del sito e, per ciascuna sottosezione, una serie di ulteriori variazioni monocromatiche o armoniche utilizzabili per supportare precise esigenze editoriali come, per esempio, la priorità delle notizie. La realizzazione di un documento elettronico con la tavolozza dei colori non è un processo semplice, anche perché per progetti articolati si può arrivare a utilizzare anche decine di colori diversi. Per questo motivo esistono software specifici come Color Schemer  che prevedono la possibilità di gestire un nutrito numero di formati di file di standard compatibili e importabili con i più diffusi software di grafica (Figura 2).

Figura 2 - Un esempio di tavolozza di colori realizzata in HTML con Color Schemer

EFFICACIA NON SOLO BELLEZZA
Definita la necessità di un documento di progetto per codificare in maniera precisa la tavolozza dei colori, occorre capire quali siano le tecniche e i metodi da applicare per identificare i colori e i loro abbinamenti. Innanzitutto, bisogna abbandonare un sistema di scelta che sia totalmente affidato al gusto personale o culturale. Questo accade a seguito di due precise riflessioni tecniche. In primo luogo, la percezione biochimica dei colori è troppo soggettiva perché si possa ritenere che un insieme di colori che, nel loro complesso, sembrano ben assortiti per una persona, vengano percepiti favorevolmente allo stesso modo da tutti. Esistono infatti troppi fattori estremamente variabili da prendere in considerazione, non ultimi la diversa qualità dei monitor e delle schede video, la presenza di difetti visivi diffusissimi, le mutevoli condizioni di luce in cui si può trovare il navigatore, che rendono impraticabile la "via del gusto personale" nella composizione di una tavolozza. In secondo luogo, l'associazione dei colori a un significato psicologico generalmente condiviso è in realtà molto più arbitraria di quello che si potrebbe pensare. Anche i colori primari più decisi e inequivocabili, vengono infatti associati dalle diverse culture a significato molto diversi, se non addirittura opposti. Se, per esempio, facciamo riferimento a uno dei codici cromatici considerati meno ambigui come il rosso associato alla passione e al calore, beh, al di fuori delle culture latine lo stesso colore ha una connotazione decisamente politica e assume un significato ben diverso da quello che viene dato in Italia. È proprio l'arbitrarietà dell'interpretazione dei colori e del loro significato che rendono indispensabile adottare dei criteri di selezione delle tavolozze improntate sull'efficacia e sull'usabilità piuttosto che su un troppo poco definibile senso estetico. A questo proposito, la progettazione dei colori può adottare dei criteri di selezione più oggettivi, passando così dalla definizione di colori "belli" in senso soggettivo a scelte cromatiche basate sul criteri di distinguibilità, contrasto, equidistanza cromatica, leggibilità, armonicità, complementarietà e, fattore non trascurabile, di moda.

LA RUOTA CROMATICA
Abbiamo accennato a termini tecnici che riguardano le tavolozze dei colori quali complementarietà, variazioni monocromatiche e armoniche. Per capire di cosa si tratta, è utile far riferimento a un sistema di rappresentazione dei colori chiam ruota cromatica (o anche disco cromatico) che si rivela il più prezioso strumento teorico e pratico per il Web Designer alle prese con la realizzazione di una tavolozza di colori personalizzata (Figura 3).

Figura 3 - La ruota cromatica è ben nota ai pittori e agli artisti e, a volte, diventa persino fonte di ispirazione creativa!

La ruota cromatica è una rappresentazione che permette rapidamente di posizionare tutti i colori primari (quelli cioè combinando i quali si ottengono tutti gli altri, per intenderci nel caso del Web il Red-Rosso, Green- Verde, Blue-Blu della scala RGB usata per comporre i colori visualizzati dai monitor) e le loro derivazioni su un cerchio. La ruota cromatica rende così molto intuitivo capire quanto i colori, in base alla loro posizione, siano armonici tra loro o in contrasto, permettendo di conseguenza di identificare a seconda dell'esigenza i colori meglio assortiti in termini di accostamento, differenza o armonia. La ruota cromatica è spesso impiegata nei software professionali per la grafica. In Corel Draw, ad esempio, è proprio utilizzando tale sistema di scelta dei colori che si riescono a ottenere rapidamente delle tavolozze di ottima qualità. Aprendo il pannello dei Riempimento Uniforme, selezionando la voce Miscelatori, abbiamo a disposizione una ruota interattiva che, scelto il colore di base, riesce a calcolare in maniera scientifica, ma molto personalizzabile, i colori che meglio si relazionano a quello di base (Figura 4). Figura 4 - I nomi comuni dei colori semplificano la scelta delle tonalità di base per l'eleborazione delle tavolezze

Se, per esempio, volessimo calcolare i cinque colori più contrastanti tra di loro con cui identificare cinque diverse aree tematiche di un portale, con questo sistema ci sarà sufficiente selezionare un colore di base per trovare rapidamente gli altri quattro.

PERSEGUIRE OBIETTIVI SPECIFICI
Come tutto ciò che compone un sito Web, anche i colori vanno selezionati tenendo sempre presente che devono ottenere uno scopo specifico. Se, per esempio, dobbiamo scegliere i colori di un sito che deve dare molto risalto al marchio aziendale, dovremo pensare che i colori del logo devono spiccare sul resto del sito. In questo senso, si potrà lavorare su una tavolozza che, partendo dal colore dominante del logo, trova il complementare (ovvero il colore che si trova nella posizione opposta sulla ruota e, quindi, quello che contrasta maggiormente) e di quest'ultimo elaborare una serie di variazioni armoniche (cioè di colori adiacenti nella ruota) sulle quali applicare un ulteriore elaborazione per alleggerirne la pesantezza visuale, magari schiarendoli o diminuendone la saturazione, cioè riducendo la "quantità di colore". In questo modo avremo ottenuto una tavolozza perfetta per risaltare il logo già esistente. Se, invece, l'obiettivo consiste nell'identificare in maniera netta le sezioni di un blog o un sito tra di loro, allora sarà opportuno applicare dei fogli di stile alle diverse aree che utilizzino variazioni monocromatiche (per esempio diverse tonalità e saturazioni) dei singoli colori scelti per identificare i canali. Come si deduce dagli esempi, in linea di massima i due criteri di base per ottenere efficaci associazioni di colori sono la ricerca dell'armonia o della disarmonia (contrasto). L'armonia viene perseguita selezionando variazioni monocromatiche più chiare o scure di un colore scelto come base oppure usando colori analoghi, cioè quelli che nella ruota cromatica si trovano a una distanza angolare dal colore di base minore di 60/90°. Il contrasto può invece essere ottenuto in un numero di combinazioni decisamente superiori, per esempio utilizzando colori puri equidistanti tra loro nella ruota, imponendo forti variazioni di chiaroscuro, usando tonalità calde opposte a quelle fredde, scegliendo abbinamenti di colori luminosi o saturi contro opachi e tendenti al bianco e nero. Come si deduce dal numero di parametri su cui si può intervenire, l'utilizzo di software specifici per calcolare le tavolozze di colore costituisce un valido aiuto per il Web Designer. Nel caso di Color Schemer si riesce a intervenire rapidamente su questi fattori e addirittura, per chi non sapesse come destreggiarsi nella selezione manuale dei colori, anche a ottenere una serie di colori suggeriti che adottano le regole descritte in queste pagine per estrarre una serie di tinte coerenti tra loro.

LA VERIFICA SUL CAMPO
Le metodologie generali riportate in queste pagine costituiscono un ottimo punto di partenza per realizzare tavolozze di colore ispirate a una solida metodologia di Web Design cromatico. Nonostante questo, l'apparato visivo umano è un sistema talmente complesso che ogni tavolozza realizzata anche col più scientifico dei metodi deve essere testata sul campo in maniera molto precisa. Poiché, infatti, la mente umana è in grado di percepire i colori solo nel loro contrasto e non come entità assolute, risulta davvero molto complesso riuscire a prevedere come nei casi di disarmonia analizzati in precedenza i colori verranno percepiti. Quando il forte contrasto tra colori diventa fondamentale per l'usabilità di un pagina, come nel caso delle scritte testuali e negli elementi di navigazione, è pertanto indispensabile utilizzare dei test empirici da somministrare al maggior numero possibile di utenti. Una volta realizzata una tavolozza, si dovrà così preparare una serie di pagine Web che utilizzano quei colori nelle possibili combinazioni e testarne la gradevolezza sugli utenti (Figura 5).

Figura 5 - In Corel Draw per gestire le tavolozze basta crearne una personalizzata con l'editor presente nel menu Strumenti

Con grande sorpresa, noteremo come scegliere tra l'utilizzo di caratteri neri, blu scuri o bianchi non sarà così semplice! A tal riguardo esistono funzioni di analisi e anteprima di Color Schemer che consentono di effettuare delle visualizzazioni rapide degli accostamenti dei colori su pagine Web e di suggerire i migliori colori da impiegare per i testi da collocare su sfondi colorati. Si tratta di funzionalità molto pratiche che permettono di completare e testare una tavolozza in una manciata di minuti.