# Design per la dark mode: sfondi, colore e contrasto

[Canonical HTML page](https://gradiently.design/it/guide/dark-mode-design)

La dark mode non è la modalità chiara invertita. Superfici, testo, accenti e gradienti hanno bisogno di valori propri, e le regole sono diverse da quelle che conosci.

## The short version

- Un buon design per la dark mode usa un grigio scuro e non il nero puro per le superfici principali, e così ammorbidisce il contrasto e lascia spazio per mostrare la profondità.
- Nelle interfacce scure l’elevazione si mostra con la luminosità: le superfici più vicine a chi guarda sono un po’ più chiare, perché le ombre si vedono appena sugli sfondi scuri.
- Il testo su sfondo scuro si legge più comodamente in bianco sporco che in bianco puro, con il testo secondario comunque sopra un contrasto di 4,5:1.
- Gli accenti saturi che funzionano sul bianco spesso sembrano troppo pesanti sul nero, quindi i temi scuri usano tinte più chiare e morbide degli stessi colori.
- I gradienti brillano sui fondi scuri ma lì fanno banding con facilità, quindi i gradienti scuri traggono vantaggio da un velo di grana.

**Il design per la dark mode** significa costruire un insieme separato di valori per superfici, testo, accenti e immagini, non capovolgere i colori della modalità chiara. I fondi scuri cambiano il comportamento del colore: le tinte sature sembrano più pesanti, le ombre spariscono, il testo bianco abbaglia e i gradienti lisci fanno banding. La buona notizia è che le stesse proprietà rendono belli i temi scuri, se gestite bene: il colore brilla, la profondità sembra a strati e il contenuto sta calmo in primo piano.

## Perché evitare gli sfondi neri puri

Il nero puro `#000000` con testo bianco puro dà il massimo contrasto possibile, 21:1. Sembra ideale ma spesso è scomodo: molti lettori vedono il testo chiaro sbavare o vibrare sul nero puro, soprattutto nei passaggi lunghi. Il nero, inoltre, non lascia niente di più scuro a cui andare, quindi non puoi mostrare una superficie sotto un’altra. E su alcuni telefoni OLED, il contenuto che scorre sul nero vero può lasciare una breve scia mentre i pixel si accendono. Per questi motivi le linee guida di Material Design di Google usano `#121212` come superficie scura di base.

- Base: #0e0f12
- Superficie: #121417
- Rialzata: #1a1d22
- Card: #22262c
- Menu e popover: #2b3038
- Testo: #e6e8ec
- Testo secondario: #9aa1ad

Una scala scura neutra. Ogni superficie è un po’ più chiara di quella sotto. Il testo misura 15:1 e il testo secondario 7,1:1 sul colore Superficie.

## Mostrare l’elevazione con la luminosità

Nella modalità chiara, le ombre separano una card dalla pagina. Su uno sfondo scuro, un’ombra scura si vede appena. I temi scuri ribaltano quindi la logica: più una superficie è vicina a chi guarda, più è chiara. La pagina è la più scura, le card sono un gradino più chiare, menu e finestre di dialogo ancora di più. Mantieni i gradini piccoli e costanti, e aggiungi un bordo sottilissimo in un tono appena più chiaro dove due superfici simili si incontrano.

| Livello | Colore | Separazione extra |
| --- | --- | --- |
| Sfondo della pagina | `#0e0f12` | Nessuna |
| Superficie principale | `#121417` | Nessuna |
| Card | `#22262c` | Bordo di 1px `rgb(255 255 255 / 0.06)` |
| Menu e popover | `#2b3038` | Bordo, più un’ombra scura morbida |
| Finestre di dialogo | `#2b3038` | Un velo oscurante su tutto ciò che sta sotto |

Elevazione con la luminosità. I valori sono un punto di partenza: mantieni regolari i tuoi gradini.

## Colore del testo e contrasto in dark mode

Usa un bianco sporco come `#e6e8ec` per il testo corrente invece del bianco puro. Il contrasto resta altissimo, 15:1 su `#121417`, e abbaglia meno. Il testo secondario può scendere a un grigio medio, ma controllalo: `#9aa1ad` resta a 7,1:1 sulla stessa superficie e a 5,5:1 su una card più chiara. Le WCAG chiedono almeno 4,5:1 per il testo normale, qualunque sia il tema; il [contrasto dei colori](https://gradiently.design/it/guide/color-contrast-accessibility) spiega come verificarlo.

> **Sul nero il peso sembra maggiore** Il testo chiaro su fondo scuro tende a sembrare più marcato dello stesso peso in scuro su chiaro. Se il testo corrente sembra pesante in dark mode, prova un peso appena più leggero o un tocco in più di spaziatura tra le lettere.

## Desaturare i colori di accento

Un viola intenso come `#7c3aed` funziona da pulsante sul bianco. Su una superficie scura sembra pesante e misura solo 3,2:1, troppo poco per i link testuali. La sua tinta più chiara `#a78bfa` misura 6,8:1 sullo stesso sfondo e si legge come lo stesso colore del brand. La regola generale: nei temi scuri porta gli accenti verso il chiaro e un po’ meno saturi, mantenendo la tinta.

### Accento della modalità chiara sul nero

- Viola `#7c3aed`: 3,2:1 su `#121417`
- Blu `#2563eb`: 3,6:1 su `#121417`
- Bordi pesanti e vibranti sulle aree grandi
- Non passa come testo di un link

### Tinta per dark mode dello stesso colore

- Viola `#a78bfa`: 6,8:1 su `#121417`
- Blu `#93c5fd`: 10,2:1 su `#121417`
- Morbido, luminoso, chiaramente del brand
- Passa come testo di un link

## I gradienti nel design per la dark mode

I fondi scuri sono il posto dove i gradienti danno il meglio. Uno sfondo profondo fa sembrare il colore luce e non vernice, ed è per questo che bagliori, aurore e sfumature neon si mostrano così spesso su un quasi nero. Tieni scura la maggior parte della superficie e lascia che il colore compaia in uno o due punti: un bagliore dietro una hero, un bordo sfumato su una card in evidenza, una velatura morbida in cima alla pagina.

- Bagliore in alto su superficie scura: `radial-gradient(ellipse at 50% 0%, #3b2a7a, #121417 60%)`
- Luce d’angolo: `radial-gradient(circle at 85% 15%, #0e7490, #121417 45%)`
- Velatura viola morbida: `linear-gradient(180deg, #1a1033, #121417 70%)`
- Brace all’orizzonte: `radial-gradient(ellipse at 50% 120%, #9d174d, #1a1033 45%, #121417 75%)`

Gradienti per dark mode che brillano e finiscono comunque sul colore della superficie, così stanno dentro l’interfaccia e non sopra.

Il problema è il banding. Le sfumature lente e scure usano pochissime tonalità distinte su uno schermo a 8 bit, quindi i gradini diventano visibili. Un velo di grana li nasconde: vedi [banding nei gradienti](https://gradiently.design/it/guide/gradient-banding) e, per il web, la [texture rumore in CSS](https://gradiently.design/it/guide/css-noise-texture). Per sfondi costruiti interamente sul buio, gli [sfondi con gradiente scuro](https://gradiently.design/it/guide/dark-gradient-backgrounds) hanno palette pronte.

## Costruire la dark mode in CSS

Definisci i colori una sola volta come proprietà personalizzate e cambia i valori per ogni tema. `color-scheme` dice al browser di disegnare i propri controlli e le barre di scorrimento nel tema corrispondente, e la funzione `light-dark()` sceglie fra due valori in base allo schema attivo.

```css
:root {
  color-scheme: light dark;
  --surface: light-dark(#ffffff, #121417);
  --card: light-dark(#f6f7f9, #22262c);
  --text: light-dark(#16181d, #e6e8ec);
  --text-muted: light-dark(#5b6270, #9aa1ad);
  --accent: light-dark(#7c3aed, #a78bfa);
}

body {
  background: var(--surface);
  color: var(--text);
}

@media (prefers-color-scheme: dark) {
  img:not([src$=".svg"]) {
    filter: brightness(0.9);
  }
}
```

Un solo insieme di token, due temi. Attenuare un po’ le foto in dark mode evita che abbaglino sulla pagina più scura.

Dai alle persone un interruttore manuale oltre a seguire l’impostazione di sistema, e ricorda tutto ciò che sta fuori dall’interfaccia: grafici, illustrazioni, loghi ed email vanno controllati in entrambi i temi. I [gradienti nelle email](https://gradiently.design/it/guide/gradients-in-email) spiegano come le app di posta gestiscono la dark mode.

## Una checklist per la dark mode

- Superfici in grigio scuro, non nero puro, con un gradino di luminosità chiaro per ogni livello di elevazione.
- Testo corrente bianco sporco ad alto contrasto; testo secondario comunque sopra 4,5:1.
- Accenti portati verso il chiaro e più morbidi, mantenendo la tinta del brand.
- Bordi, non ombre, per separare superfici simili.
- Colore usato come luce in pochi punti, non ovunque.
- Grana sui grandi gradienti scuri per evitare il banding.
- Loghi con una versione chiara per i fondi scuri; vedi [logo su sfondo sfumato](https://gradiently.design/it/guide/logo-on-gradient-background).
- Entrambi i temi controllati su un telefono vero, in una stanza in penombra e alla luce del giorno.

## FAQ

### La dark mode deve usare il nero puro?

Di solito no per le superfici principali. Un grigio scuro, come #121212 o simile, riduce l’abbagliamento, lascia spazio a superfici rialzate più chiare ed evita le scie su alcuni schermi OLED.

### Che colore di testo è meglio per la dark mode?

Un bianco sporco come #e6e8ec e non il bianco puro. Il contrasto resta altissimo e abbaglia meno.

### Come si mostra la profondità in dark mode?

Rendi le superfici più chiare man mano che si avvicinano a chi guarda e usa bordi sottili tra superfici simili, perché le ombre si vedono appena sugli sfondi scuri.

### Perché i colori del mio brand sembrano sbagliati in dark mode?

I colori saturi scelti per gli sfondi bianchi sembrano pesanti sul nero e possono non superare il contrasto. Usa tinte più chiare e morbide degli stessi colori.

### I gradienti funzionano in dark mode?

Benissimo: il colore brilla sui fondi scuri. Usali in pochi punti, falli finire sul colore della superficie e aggiungi una grana leggera per evitare il banding.