La palette di colori di un sito non si sceglie, si costruisce

Nella maggior parte dei progetti la conversazione sui colori comincia e finisce con una frase: “a me piace il blu”. Poi il sito va online, e il pulsante che dovrebbe portare i contatti sta lì in mezzo a tutto il resto senza che nessuno lo veda.

Il colore di un sito non è un fatto di gusto. È il modo più veloce che hai per dire a chi guarda cosa è importante, cosa è cliccabile e cosa è solo contorno. Quando funziona non si nota, e quando non funziona sembra un problema di contenuti.

I tre vincoli che vengono prima del gusto

Si deve leggere. È l’unico requisito non negoziabile, e ha dei numeri precisi che vediamo più avanti. Un testo grigio chiaro su bianco è una scelta estetica frequente e una scelta funzionale sbagliata: esclude una parte dei lettori e stanca tutti gli altri.

Deve esistere una gerarchia. Se tutto è colorato, niente è importante. Il colore serve a creare una scala: questo prima, questo dopo, questo è un dettaglio. Un sito in cui titoli, riquadri, icone e pulsanti hanno tutti la stessa intensità è un sito senza gerarchia, e chi arriva non sa dove guardare.

Deve reggere fuori dallo schermo. La palette finisce anche su un documento, su un post, su una foto di prodotto, magari su un’insegna. Se funziona solo dentro il sito, non è l’identità di un’azienda: è la decorazione di una pagina.

Come si costruisce, in quattro pezzi

Una palette che funziona ha quattro ruoli, e nessuno di questi è “il colore che mi piace”.

Un colore di base. È il fondo su cui vive tutto il resto, chiaro o scuro. Definisce il carattere del sito più di qualsiasi altra scelta: uno sfondo scuro comunica una cosa, uno chiaro un’altra, e la differenza si sente prima ancora che qualcuno legga una parola.

Una scala di neutri. Non uno solo: servono almeno tre o quattro livelli fra il fondo e il testo, per bordi, sfondi di riquadro, testi secondari, separatori. È la parte più noiosa e quella che distingue un sito curato da uno approssimativo. Senza neutri intermedi si finisce per usare il colore d’accento anche dove non serve.

Un colore d’accento, uno solo. È quello che dice “qui si clicca”. Va usato con avarizia: se compare su un pulsante, su un titolo, su un’icona e su un riquadro promozionale, ha smesso di significare qualcosa. Il nostro accento, per dire, è un giallo caldo su fondo quasi nero, e sulle copertine di questo magazine è l’unica cosa colorata dell’immagine. Quando l’accento è raro, l’occhio ci va da solo.

I colori di stato. Verde per la conferma, rosso per l’errore, giallo per l’avviso. Sembrano un dettaglio da software e invece servono a ogni sito che abbia un modulo. Vanno scelti dentro la palette, non presi dal foglio di stile di serie, e devono restare distinguibili anche per chi non percepisce bene le differenze fra rosso e verde: quindi mai colore da solo, sempre colore più un’icona o una parola.

Le proporzioni

C’è una regola pratica che circola da anni ed è ancora valida: circa il 60% della superficie al colore di base, il 30% ai neutri e ai secondari, il 10% all’accento.

Non è una legge, è un modo per non esagerare. Se ti accorgi che l’accento occupa un quarto della pagina, non hai una palette vivace: hai una pagina in cui niente emerge.

Il modo più semplice per verificarlo è socchiudere gli occhi guardando una schermata. Quello che continui a vedere è quello che vedrà anche chi arriva sul sito per la prima volta. Se non vedi il pulsante principale, il problema è la palette, non il testo del pulsante.

Il contrasto, con i numeri

Qui si smette di discutere di gusti, perché ci sono soglie misurabili e strumenti gratuiti per verificarle.

Le linee guida internazionali sull’accessibilità fissano un rapporto di contrasto minimo di 4,5 a 1 fra testo e sfondo per il testo di dimensioni normali, e di 3 a 1 per il testo grande, indicativamente dai 24 pixel in su o dai 19 in grassetto. Lo stesso 3 a 1 vale per gli elementi di interfaccia che devono essere riconoscibili, come il bordo di un campo di modulo o l’icona di un pulsante.

Sono valori che si controllano in pochi secondi con un verificatore di contrasto online, incollando i due codici colore. Vale la pena farlo prima di innamorarsi di una combinazione, non dopo aver costruito tutto il sito.

Due avvertenze che valgono più della regola. La prima: il grigio chiaro su bianco è la violazione più comune in assoluto, e riguarda quasi sempre i testi secondari, le didascalie e i segnaposto dei moduli. La seconda: il testo bianco su un colore acceso, tipico dei pulsanti, passa molto meno spesso di quanto si creda, soprattutto su arancione, giallo e verde chiaro.

Gli errori che vediamo più spesso

La palette presa dal logo, tutta. Un logo può permettersi tre colori pieni, un’interfaccia no. Dal logo si prende l’accento, e il resto si costruisce.

Il colore del pulsante uguale a quello dei titoli. Se il colore che significa “clicca qui” compare anche dove non si clicca, l’utente impara a ignorarlo.

Troppi grigi diversi, scelti a occhio. Capita quando ogni sezione viene disegnata in un momento diverso. Si risolve fissando una scala di quattro o cinque neutri e non uscendo mai da quella.

Il colore usato per dire una cosa importante, da solo. Un campo modulo che diventa rosso e basta non comunica niente a chi quella differenza non la vede. Serve sempre anche un testo.

Cambiare palette senza cambiare le immagini. Le fotografie hanno colori loro. Una palette fredda con foto calde non litiga solo esteticamente: rende difficile mettere del testo sopra le immagini con un contrasto sufficiente.

Come si prova prima di adottarla

Non su una tavolozza, ma su tre schermate vere: una pagina piena di testo, una pagina con un modulo, e la pagina più importante del sito. È lì che i problemi si vedono.

Poi si guarda da telefono, alla luce del giorno, che è la condizione reale di lettura per la maggior parte delle persone e la più severa per i contrasti bassi.

E si stampa in bianco e nero. È un vecchio trucco e funziona ancora: se in scala di grigi la gerarchia regge e i pulsanti si distinguono, la palette è solida. Se sparisce tutto, stavi usando il colore per compensare una struttura debole.

Cosa portarsi a casa

• Il colore serve a creare gerarchia e a dire dove si clicca. Il gusto viene dopo.
• Una palette ha quattro ruoli: base, scala di neutri, un accento solo, colori di stato.
• L’accento va usato con avarizia: se compare ovunque, non significa più niente.
• Il contrasto ha soglie misurabili, 4,5 a 1 per il testo normale e 3 a 1 per quello grande e per gli elementi di interfaccia. Si verificano gratis in pochi secondi.
• Il colore non deve mai essere l’unico modo per comunicare un’informazione.
• Si prova su tre schermate vere, da telefono, e in bianco e nero.

Domande frequenti

Se stai costruendo o rivedendo l’identità visiva del tuo progetto, la palette è uno dei pezzi e non si decide da sola: ne parliamo nelle pagine palette colori e visual identity. Se invece il tema è il sito nel suo insieme, si parte da siti web.

Se vuoi che ne parliamo, scrivici.