# Schema di colori per un sito web: come scegliere i colori

[Canonical HTML page](https://gradiently.design/it/guide/website-color-scheme)

Un sito ha bisogno di meno colori di quanto pensi, e ognuno ha bisogno di un ruolo. Assegna i ruoli, controllali tra loro e l’intero sito resta coerente mentre cresce.

## The short version

- Lo schema di colori di un sito funziona meglio come una breve lista di ruoli: sfondo della pagina, superficie, testo, testo attenuato, bordo, accento e colori di stato.
- La maggior parte dei siti ha bisogno di un solo accento di brand, usato soprattutto per pulsanti e link, con i neutri a fare tutto il resto.
- Le WCAG chiedono un rapporto di contrasto di almeno 4,5:1 per il testo normale e 3:1 per il testo grande e per le parti dell’interfaccia come i bordi dei campi.
- Memorizzare i colori come proprietà personalizzate CSS, o design token, permette di cambiare tema a un intero sito sostituendo un solo gruppo di valori.
- Un tema scuro è un gruppo separato di valori per gli stessi ruoli, non l’inversione di quello chiaro.

Un buon **schema di colori per un sito web** non è una moodboard di cinque colori preferiti. È una breve lista di ruoli, ciascuno affidato a un colore: lo sfondo della pagina, le superfici in rilievo, il testo del corpo, il testo più discreto, i bordi, un accento per le azioni e rosso, ambra e verde per gli stati. Scegli prima l’accento del brand, costruisci intorno a esso neutri calmi, verifica il contrasto di ogni abbinamento di testo, poi memorizza il risultato come variabili CSS così tutto il sito usa gli stessi valori.

## I ruoli di cui ogni sito ha bisogno

| Ruolo | Usato per | Regola pratica |
| --- | --- | --- |
| Sfondo | Lo sfondo della pagina | Leggermente tinto anziché bianco o nero puro risulta più morbido |
| Superficie | Schede, pannelli, menu | Un gradino più chiara (tema chiaro) o ancora più chiara (tema scuro) dello sfondo |
| Testo | Titoli e testo del corpo | Contrasto molto alto su sfondo e superficie |
| Testo attenuato | Didascalie, etichette, metadati | Sempre almeno 4,5:1 sullo sfondo |
| Bordo | Divisori e contorni dei campi | I divisori decorativi possono essere tenui; i bordi dei campi richiedono 3:1 |
| Accento | Pulsanti, link, stati selezionati | Il colore del tuo brand, usato con parsimonia perché significhi «agisci qui» |
| Stato | Errori, avvisi, successo | Rosso, ambra, verde, calibrati per stare bene con l’accento |

Sette ruoli coprono la maggior parte dei siti. Dai ai colori nomi di ruolo, non di tinta, così cambiare il colore del brand più avanti richiede una sola modifica.

## Come scegliere i colori di un sito

1. **Parti da un solo accento** Il colore del tuo brand, o quello che vuoi che le persone associno a te. Se non ne hai uno, [come scegliere i colori del brand](https://gradiently.design/it/guide/how-to-choose-brand-colors) può aiutarti.
2. **Tingi i neutri verso di esso** I grigi con un accenno della tinta dell’accento sembrano imparentati con esso. Un brand turchese ha grigi freddi, leggermente bluastri; un brand terracotta li ha caldi e cremosi.
3. **Decidi chiaro, scuro o entrambi** Scegli il tema che la maggior parte dei visitatori vedrà per primo e progettalo per intero prima di iniziare l’altro.
4. **Controlla ogni abbinamento di testo** Testo su sfondo, testo su superficie, testo attenuato su entrambi, bianco sul pulsante accento. Correggi tutto ciò che è sotto 4,5:1.
5. **Applica 60, 30, 10** Circa 60% sfondo, 30% superfici e testo, 10% accento. La [regola del 60 30 10](https://gradiently.design/it/guide/60-30-10-rule) spiega l’equilibrio.

## Tre palette per siti web da cui partire

- Sfondo: #f7f9fb
- Superficie: #ffffff
- Testo: #14202b
- Testo attenuato: #52606d
- Bordo dei campi: #8a96a3
- Accento turchese: #0f766e

Studio medico calmo, chiaro. Il testo sullo sfondo è circa 15,7:1, il testo attenuato 6,1:1, il bianco sul pulsante turchese 5,5:1 e il bordo dei campi raggiunge appena 3:1 sul bianco.

- Sfondo crema: #fbf6ef
- Superficie avena: #efe4d6
- Testo espresso: #2a1f17
- Testo attenuato: #635e68
- Accento terracotta: #b4441c

Caffè caldo, chiaro. L’espresso sulla crema è circa 15:1; il bianco sulla terracotta circa 5,5:1, quindi le etichette dei pulsanti restano leggibili.

- Sfondo notte: #0f0e17
- Superficie in rilievo: #1a1926
- Testo: #ecebf3
- Testo attenuato: #a5a3b8
- Accento lilla: #a78bfa

Studio notturno, scuro. Un testo bianco spento anziché puro riduce l’abbagliamento; l’accento lilla è circa 7:1 sullo sfondo, quindi usa testo scuro sui pulsanti lilla.

## Regole di contrasto che mantengono leggibile un sito

Le [linee guida WCAG sul contrasto](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) fissano il minimo: 4,5:1 per il testo normale, 3:1 per il testo grande (circa 24 px, o 19 px in grassetto) e 3:1 per i componenti dell’interfaccia come i bordi dei campi e le icone che portano significato. Il [contrast checker di WebAIM](https://webaim.org/resources/contrastchecker/) verifica qualsiasi coppia. La nostra [guida al contrasto dei colori](https://gradiently.design/it/guide/color-contrast-accessibility) ne spiega i motivi e i casi limite.

### Errori comuni

- Testo segnaposto grigio chiaro usato come unica etichetta
- Testo bianco su un colore di brand chiaro come giallo o azzurro cielo
- Link che si distinguono dal testo solo per il colore
- Un bordo pallido come unico contorno di un campo
- Messaggi di errore mostrati solo in rosso

### Correzioni

- Vere etichette sopra i campi, testo attenuato a 4,5:1
- Testo scuro sugli accenti chiari, o una tonalità più profonda dell’accento
- Sottolinea i link nel testo, oppure rendili in grassetto
- Bordi dei campi a 3:1 rispetto al loro sfondo
- Un’icona o delle parole accanto al colore

## Scrivere lo schema di colori come token

Memorizza ogni ruolo una volta sola come proprietà personalizzata CSS e usa solo quelle variabili nei tuoi stili. Così un tema scuro, una campagna stagionale o un rebranding sono la modifica di un solo blocco di valori, non una ricerca in ogni file. È l’idea alla base dei [design token](https://gradiently.design/it/guide/design-tokens).

```css
:root {
  --ground: #f7f9fb;
  --surface: #ffffff;
  --text: #14202b;
  --text-muted: #52606d;
  --border-input: #8a96a3;
  --accent: #0f766e;
  --on-accent: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0f0e17;
    --surface: #1a1926;
    --text: #ecebf3;
    --text-muted: #a5a3b8;
    --border-input: #6e6b85;
    --accent: #a78bfa;
    --on-accent: #0f0e17;
  }
}

body { background: var(--ground); color: var(--text); }
.card { background: var(--surface); }
.button { background: var(--accent); color: var(--on-accent); }
```

Ruoli, non tinte. Nota che `--on-accent` passa dal bianco a un quasi nero, perché un pulsante lilla chiaro richiede testo scuro.

## La dark mode è uno schema a sé

Invertire una palette chiara raramente funziona. Gli accenti saturi brillano troppo sul nero, le ombre scompaiono e il testo bianco puro causa abbagliamento. Costruisci la dark mode come un secondo gruppo di valori: uno sfondo quasi nero con un accenno di tinta, superfici che si schiariscono man mano che salgono, testo più morbido e un accento schiarito fino a raggiungere il contrasto. Il [design della dark mode](https://gradiently.design/it/guide/dark-mode-design) approfondisce.

## Dove va il colore del brand oltre i pulsanti

Se l’accento è usato solo sui pulsanti, il sito può sembrare generico. La risposta non è più accento ovunque, ma un punto in cui il brand può essere espressivo: l’hero, una fascia di funzionalità o il footer. Un gradiente ricco nella famiglia del brand funziona bene lì, mentre il resto della pagina resta calmo e leggibile.

Un ampio hero di sito per uno studio di fisioterapia con un titolo breve su un ricco gradiente

Una fascia espressiva in 1920×1080 porta il brand; il resto del sito usa i ruoli calmi qui sopra.

Un Mark di Gradiently può essere quello strato espressivo: uno sfondo che nessun altro ha, che sceglie per ogni riga un colore di testo dalla propria palette così i titoli restano leggibili. Per altri abbinamenti, vedi l’[armonia dei colori](https://gradiently.design/it/guide/color-harmony) e il [design della sezione hero](https://gradiently.design/it/guide/hero-section-design).

## FAQ

### Quanti colori deve avere un sito web?

Di solito un accento di brand, da tre a cinque neutri per sfondo, superfici, testo e bordi, e tre colori di stato. Più di un accento rende più difficile capire cosa è cliccabile.

### Come scelgo lo schema di colori per il mio sito?

Parti dall’accento del brand, tingi i grigi neutri verso la sua tinta, decidi per un tema chiaro o scuro e verifica che ogni abbinamento di testo abbia un contrasto di almeno 4,5:1.

### Che rapporto di contrasto serve al testo di un sito?

Le WCAG chiedono almeno 4,5:1 per il testo normale e 3:1 per il testo grande e per le parti dell’interfaccia come i bordi dei campi.

### Lo sfondo di un sito deve essere bianco puro?

Non è necessario. Un bianco spento appena tinto spesso sembra più calmo e fa risaltare le schede bianche come superfici.

### Come aggiungo la dark mode al mio schema di colori?

Definisci ogni ruolo di colore come proprietà personalizzata CSS, poi fornisci un secondo gruppo di valori dentro una media query `prefers-color-scheme: dark`.