Come scegliere i colori per il proprio sito web

I colori hanno un impatto elevato sulle scelte dei consumatori e, come diretta conseguenza, divengono un elemento davvero importante anche per i siti web, tanto da poterne decretare il successo o l’insuccesso. Secondo la ricerca “Impact of color on marketing“, la prima idea su un prodotto viene formulata entro 90 secondi dall’inizio dell’interazione e il 62/90% di questa prima valutazione è determinata dai colori.

L’uso della giusta palette cromatica può dunque influenzare anche le scelte degli utenti dei siti web, trattenendoli più a lungo, aumentandone la fiducia nei confronti del brand e spingendoli all’acquisto o, più in generale, a compiere un’azione. Oltre a questo, un buon uso del colore rende il sito più semplice da navigare e, ancora più importante, accessibile.

Chi si cimenta in autonomia nella creazione di uno spazio virtuale ignora spesso questi fatti e presta poca attenzione alla scelta dei colori, scegliendoli in base al gusto personale o in modo del tutto casuale. Così facendo, non ne sfrutta appieno le potenzialità o, addirittura, danneggia un sito altrimenti ben costruito, rendendolo respingente, difficilmente navigabile, poco attraente per il target di riferimento.

Per fornire un aiuto concreto, verranno indicate di seguito alcune linee guida utilizzabili per individuare i colori più adatti al proprio sito web e per creare una palette armoniosa.

La psicologia dei colori

I colori influenzano le emozioni, i comportamenti, l’umore, i pensieri. Questa affermazione non deriva da considerazioni personali o da un sentire soggettivo, bensì da studi e ricerche effettuati nell’ambito della psicologia del colore.

Oggetto di dibattito tra studiosi e scienziati, questa branca della psicologia, le cui origini possono essere fatte risalire agli inizi dell’Ottocento, quando Goethe pubblicò il suo noto libro “La teoria dei colori“, prende in considerazione sia le risposte biologiche innate al colore sia quelle derivanti dall’ambiente culturale di riferimento e dalle esperienze personali. Chi sceglie i colori per un sito web deve tenere conto di questa tripla influenza della palette cromatica sul comportamento e sulle scelte degli utenti.

Prendiamo come esempio il colore rosso. A livello biologico, probabilmente anche a causa del fatto che si tratta del colore del sangue, provoca in modo più o meno universale uno stato di eccitazione e l’aumento del battito cardiaco, suscitando emozioni forti quali passione, amore, ma anche rabbia, e provocando una sensazione di urgenza. A livello culturale, suscita invece sensazioni ed emozioni anche molto contrastanti.

In alcuni paesi dell’Asia, ad esempio, è il colore del matrimonio ed è associato a gioia, fortuna, prosperità; nei paesi occidentali può diventare simbolo di amore, ma anche di allerta. In Africa, a seconda della zona, può essere associato al potere, al sacrificio, al coraggio, alla guerra. A livello individuale, il rosso potrebbe infine essere associato ora a eventi positivi e a sensazioni piacevoli ora a eventi e sensazioni negative.

Psicologia dei colori nel marketing e nel web design

L’applicazione dei principi della psicologia dei colori alle strategie di marketing aiuta i brand a influenzare i comportamenti dei consumatori e a dirigerne le scelte. Per quanto riguarda in modo specifico i siti web, possono favorire l’aumento delle conversioni, spingere gli utenti all’azione, fidelizzarli.

Per raggiungere tali risultati è necessario, in primo luogo, analizzare le caratteristiche del target sotto il profilo culturale, ma anche per quanto riguarda età, sesso e altri fattori che potrebbero influenzare l’impatto emotivo dei colori. In secondo luogo, si devono definire le emozioni, le sensazioni, i sentimenti che il design nel suo insieme e i vari elementi del layout nello specifico dovranno stimolare.

Per fare solo qualche esempio:

• un magazine online dedicato alla finanza potrebbe utilizzare il blu per trasmettere un senso di sicurezza, affidabilità, stabilità
• Un eCommerce di prodotti bio o eco sostenibili potrebbe giocare con le sfumature del verde e del marrone per richiamare la natura e suscitare sensazioni di benessere e salute
• Il sito portfolio di uno stilista di alta moda potrebbe giocare con il nero e il viola, colori che richiamano eleganza e mistero.

Per quanto riguarda i pulsanti di call to action, via libera al rosso, ottimo per suscitare un senso di urgenza, al giallo, perfetto per richiamare l’attenzione, all‘arancione, colore derivante dalla fusione dei primi due.

Scelta dei colori: la coerenza con il brand

L’applicazione dei principi della teoria dei colori alla scelta della palette cromatica di un sito web deve essere effettuata tenendo conto di una serie di elementi fondamentali per la riuscita del progetto. Uno di questi è la coerenza con il brand.

Per richiamare l’identità del marchio e renderlo immediatamente riconoscibile si possono, in primo luogo, scegliere colori che richiamino il settore di riferimento e le caratteristiche dei servizi o dei prodotti offerti, nonché che ne rispecchino i principi e i valori. In secondo luogo, per mantenere coerenza visiva, si possono richiamare le tinte del logo.

Contrasto e leggibilità, tra combinazioni corrette e accessibilità

Altro elemento che non deve essere trascurato è l’impatto dei colori sulla fruibilità del sito e sulla user experience.

Scegliere il giusto tipo di font e assegnargli una dimensione adeguata è certo fondamentale per garantire una buona leggibilità dei contenuti, ma non è sufficiente. Per garantire agli utenti un’esperienza ottimale è fondamentale prestare attenzione anche ai colori e al livello di contrasto tra background e font. Quest’ultimo, in particolare, è incluso tra le linee guida per l’accessibilità dei contenuti web (WCAG) sviluppate dal W3C e finalizzate a rendere il web più inclusivo.

Il documento indica come rapporto minimo di contrasto 4,5:1 per i testi di dimensioni normali e 3:1 per quelli più grandi. Per garantire un livello di accessibilità superiore, suggerisce invece i rapporti 7:1 per i testi normali e 4,5:1 per quelli grandi.

Al fine di rendere gli spazi virtuali pienamente navigabili anche per gli utenti con problemi di daltonismo o altre forme di discromatopsia, le WCAG suggeriscono inoltre di non usare il colore “come unica modalità visiva per rappresentare informazioni indicare azioni, richiedere risposte o come elemento di distinzione visiva“.

Per sapere se i colori scelti rispettano i livelli minimi di contrasto, è possibile utilizzare strumenti online come Coolors. Chi utilizza WordPress è facilitato in questo compito in quanto il CMS segnala immediatamente il problema quando, durante la creazione di un nuovo contenuto, si selezionano colori per lo sfondo e il testo non sufficientemente contrastanti.

Creare una palette armonica

Affinché il design del sito web risulti piacevole e accattivante, e riesca a dirigere con successo comportamenti ed emozioni degli utenti, è necessario fare in modo che i colori scelti seguendo i principi della psicologia dei colori, dell’accessibilità e della coerenza con il brand risultino ben bilanciati e armoniosi.

Per creare in autonomia una palette armonica e ben equilibrata sarebbe necessario conoscere almeno le basi della teoria dei colori, sapere quali sono le differenze tra colori fisici e digitali, cosa sono i colori primari, secondari, terziari, cosa significa colori complementari e colori analoghi e via dicendo. Fortunatamente, il web mette a disposizione numerosi strumenti gratuiti, utili per ottenere tavolozze di colori di sicuro effetto senza bisogno di competenze specifiche.

Tra i tanti è possibile nominare Coolors, semplicissimo da utilizzare e ottimo per trovare palette gradevoli a partire da specifici colori, nonché utile per sapere come le tonalità vengono percepite dai daltonici e per verificare i livelli di contrasto. Molto interessante anche Material Palette, ideale per ottenere tavolozze armoniche di otto colori a partire da due sole tinte e per ottenere suggerimenti relativi al modo in cui utilizzare ogni colore della palette.

Tra gli altri siti che offrono strumenti simili rientrano Color Hunt, il quale mette a disposizione numerose palette già pronte e consente di crearne manualmente di nuove, e Adobe Color, il quale permette, tra le altre cose, di estrarre tavolozze romantiche da delle immagini e di scoprire le palette di tendenza.

Applicare la regola 60-30-10

Per sfruttare al meglio i colori selezionati e creare un sito web dal design equilibrato e piacevole, si può ricorrere alla regola 60-30-10.

Basata sull’uso di tre soli colori, prevede che vengano scelti:

• un colore principale che andrà a occupare il 60% del layout e che ne definirà l’atmosfera generale: colore che riflette al meglio l’identità del marchio, potrà essere utilizzato per lo sfondo, gli elementi strutturali e via dicendo;
• un secondo colore che contrasti con il primo e vada a occupare il 30% dello spazio: questo colore può essere utilizzato per i titoli, i sottotitoli, le aree della pagine che devono essere messe in evidenza, e può aiutare a migliorare la leggibilità;
• un terzo colore che attiri l’attenzione e occupi il restante 10% della pagina: l’ultimo colore può essere utilizzato per i pulsanti di CTA, gli elementi interattivi, i link e via dicendo.

Applicare questa regola aiuta ad ottenere un buon equilibrio visivo, a rendere la struttura più coerente e gerarchizzare i vari elementi della pagina.