Design per la dark mode: sfondi, colore e contrasto

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.

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.

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 spiega come verificarlo.

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.

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.

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 e, per il web, la texture rumore in CSS. Per sfondi costruiti interamente sul buio, gli sfondi con gradiente scuro 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.

: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);
  }
}

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 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.
• Entrambi i temi controllati su un telefono vero, in una stanza in penombra e alla luce del giorno.