Come scegliere i colori per un'interfaccia digitale

Per scegliere i colori di un sito o di un'app, non partire da una combinazione che ti piace e basta. Elenca prima le funzioni che la palette deve svolgere: testo, sfondo, collegamenti, azioni principali, errori, avvisi e stati di successo. Scegli poi un colore di partenza, ricavane le rappresentazioni tecniche necessarie e prova ogni abbinamento nei componenti reali. Il controllo del contrasto resta un passaggio separato.

Questo metodo riguarda un progetto digitale. Non stabilisce quali colori usare per pareti, abiti o materiali stampati, anche se la query "come scegliere colori" può riferirsi anche a quei contesti.

Parti dai ruoli, non dal numero di colori

Una palette cromatica è più facile da gestire quando ogni valore ha uno scopo dichiarato. Il GOV.UK Design System organizza, per esempio, colori destinati a testo, collegamenti, bordi, stati di errore e altre funzioni dell'interfaccia. Non è una palette universale da copiare, ma mostra un principio utile: la stessa funzione dovrebbe avere un trattamento coerente.

Prepara una tabella con almeno queste colonne:

1. ruolo del colore;
2. componente in cui compare;
3. colore di sfondo;
4. stato normale, attivo o disabilitato;
5. controllo di contrasto da eseguire.

Per un piccolo sito italiano potrebbero bastare uno sfondo, un colore per il testo, un colore di accento per l'azione principale e colori funzionali per errori o conferme. Il numero non è una regola: dipende dai componenti realmente presenti.

Scegli un colore di partenza senza attribuirgli significati assoluti

Il colore di partenza può derivare dall'identità già esistente, da un elemento del prodotto o da un vincolo del progetto. Valutalo nel contesto, accanto a testo, immagini e superfici. Evita frasi come "il blu comunica sempre fiducia": la ricerca sulle associazioni tra colore ed emozione rileva sia schemi condivisi sia differenze legate alla lingua e alla geografia, come riassume la scheda accademica dell'Universidad de La Sabana.

Annota il valore scelto in modo riproducibile. Nel selettore SmartPlusLab l'input verificato è un colore esadecimale di tre o sei cifre. Questo dato tecnico aiuta a convertire il colore, ma non dimostra che la tonalità sia adatta al pubblico o al messaggio.

Organizza la gerarchia visiva

Una gerarchia chiara non richiede che ogni elemento abbia un colore diverso. Al contrario, troppi colori di accento possono rendere meno evidente l'azione principale. Usa il colore insieme a testo, posizione, forma e spaziatura.

Prova la palette su casi concreti:

• un paragrafo su sfondo normale;
• un collegamento nel testo;
• un pulsante primario e uno secondario;
• un messaggio di errore;
• gli stati di passaggio, focus e disabilitato.

Se due elementi hanno funzioni diverse ma sembrano identici, oppure svolgono la stessa funzione ma cambiano colore senza motivo, la struttura va rivista. La coerenza nasce dall'uso ripetibile, non da una formula automatica di armonia.

Controlla contrasto e leggibilità separatamente

Le WCAG 2.2 del W3C indicano, per il criterio 1.4.3, un rapporto minimo di 4,5:1 per il testo normale e di 3:1 per il testo di grandi dimensioni, con le eccezioni definite dallo standard. Il rapporto va calcolato tra il colore del contenuto e quello dello sfondo effettivo.

Il selettore SmartPlusLab non è un verificatore WCAG. Il valore di luminosità restituito dal runtime è una stima pesata su scala da 0 a 255 e non equivale a un rapporto di contrasto. Non usarlo per dichiarare accessibile un testo. Inoltre, un rapporto numerico conforme non basta da solo a valutare un'intera interfaccia: occorrono controlli sui componenti, sugli stati e sull'uso del colore come unico segnale.

Converti il valore nel formato richiesto

La specifica CSS Color Module Level 4 descrive diverse sintassi per i colori sul Web. HEX, RGB e HSL possono rappresentare uno stesso colore sRGB con notazioni differenti. Scegli il formato richiesto dal codice o dal sistema di design, non quello che sembra più familiare.

Il runtime verificato accetta input esadecimali di tre o sei cifre. Con l'opzione all restituisce le rappresentazioni HEX, RGB e HSL. Se selezioni hex, rgb oppure hsl, restituisce la conversione scelta senza gli altri due campi. Non attribuire al selettore supporto per ulteriori spazi colore: la specifica CSS è più ampia delle funzioni provate nello strumento.

Esempio verificato con #3498db

Immagina di preparare il colore di accento per un piccolo sito italiano. Inserisci #3498db e scegli all. Il caso runtime verificato restituisce:

• HEX: #3498db;
• RGB: rgb(52, 152, 219);
• HSL: hsl(204, 70%, 53%).

Questi tre valori descrivono lo stesso colore nel caso provato. Non costituiscono una palette completa. Per usarlo in un pulsante, abbinalo allo sfondo e al testo effettivi, calcola il contrasto con uno strumento dedicato e controlla anche focus, hover e stato disabilitato. Se il contrasto non è sufficiente, modifica uno dei colori e ripeti la verifica.

Limiti da tenere presenti

Il selettore converte un valore esadecimale. Non propone colori complementari, non genera armonie, non valuta significati culturali e non certifica l'accessibilità. La resa visiva può cambiare in base a schermo, profilo colore e condizioni di osservazione. Questo articolo non documenta inoltre conservazione o trattamento dei valori inseriti.

La pagina italiana dello strumento non è ancora pubblicata. Per questo non compare alcun collegamento interno al selettore o agli strumenti correlati.

Domande frequenti

HEX, RGB e HSL cambiano il colore?

Nel caso verificato sono rappresentazioni diverse dello stesso colore sRGB. Possono essere più comode in contesti diversi, ma la sola conversione non migliora contrasto o leggibilità.

Quanti colori deve avere una palette?

Non esiste un numero valido per ogni progetto. Parti dai ruoli necessari e aggiungi un colore solo quando risolve una funzione non coperta.

Posso usare la luminosità come controllo WCAG?

No. La luminosità del selettore è una stima pesata, non il rapporto di contrasto previsto dalle WCAG.

Quando la scelta è pronta?

Quando i colori sono stati provati su testi, componenti e stati reali, il contrasto è stato verificato separatamente e la gerarchia resta comprensibile anche senza affidarsi solo al colore.