La modalità scura è diventata una funzione attesa in quasi ogni sistema operativo e in molte app. Gli utenti la scelgono per motivi diversi: comfort nella penombra, preferenza estetica, sensibilità alla luce, o per ridurre i consumi sugli schermi OLED, dove i pixel neri sono spenti. Ma una modalità scura fatta in fretta, invertendo semplicemente i colori, crea più problemi di quanti ne risolva.
Non è un'inversione dei colori
L'errore più frequente è prendere il tema chiaro e scambiare bianco con nero. Il risultato di solito ha un contrasto eccessivo, colori di accento che diventano fastidiosi, ombre che non si vedono più e immagini che stonano.
Progettare una modalità scura significa ripensare alcuni aspetti:
- lo sfondo: un grigio molto scuro è spesso più confortevole del nero puro, perché attenua il contrasto estremo con il testo e lascia spazio per distinguere i livelli;
- il testo: un bianco leggermente smorzato affatica meno di un bianco pieno su nero pieno;
- i colori di accento: le tinte molto sature che funzionano su sfondo chiaro tendono a «vibrare» su sfondo scuro; versioni più chiare e meno sature funzionano meglio;
- la profondità: nel tema chiaro i livelli si separano con le ombre, nel tema scuro le ombre si vedono poco, quindi conviene schiarire leggermente le superfici in primo piano.
Il nero puro ha comunque un suo spazio, per esempio nelle app pensate per schermi OLED o nei lettori video. Non è vietato: è una scelta da fare consapevolmente.
Il contrasto vale anche al buio
I requisiti WCAG sul contrasto non cambiano con il tema: almeno 4,5:1 per il testo normale e 3:1 per il testo grande e per i componenti dell'interfaccia, come bordi dei campi e icone significative, al livello AA. Bisogna verificarli separatamente per entrambi i temi, perché un colore che rispetta la soglia sul bianco può non rispettarla sul grigio scuro.
Un problema tipico riguarda i colori di stato. Un rosso scuro per gli errori, perfettamente leggibile su bianco, può diventare quasi invisibile su sfondo scuro. Ogni colore semantico, come errore, avviso, successo e link, ha bisogno della sua variante per il tema scuro.
Una palette a livelli
Un modo ordinato di costruire la modalità scura è definire pochi livelli di superficie, ciascuno leggermente più chiaro del precedente:
| Livello | Uso | Esempio di colore |
|---|---|---|
| Sfondo | Area principale della pagina | #121212 |
| Superficie 1 | Schede, pannelli | #1e1e1e |
| Superficie 2 | Menu, finestre sovrapposte | #2a2a2a |
| Testo principale | Corpo del testo | #e6e6e6 |
| Testo secondario | Didascalie, note | #a8a8a8 |
I valori sono indicativi: vanno adattati all'identità visiva del prodotto e verificati con uno strumento di controllo del contrasto.
Rispettare la scelta dell'utente
Sul web, la media query prefers-color-scheme permette di leggere la preferenza impostata nel sistema operativo. Il modo più manutenibile è definire i colori come variabili CSS e cambiarne i valori:
:root {
--sfondo: #ffffff;
--testo: #1f1f1f;
--accento: #0b57d0;
}
@media (prefers-color-scheme: dark) {
:root {
--sfondo: #121212;
--testo: #e6e6e6;
--accento: #8ab4f8;
}
}
body {
background: var(--sfondo);
color: var(--testo);
}
Oltre a seguire il sistema, molti utenti apprezzano un selettore nell'interfaccia con tre opzioni: chiaro, scuro, automatico. La scelta va ricordata tra una visita e l'altra. Conviene anche indicare al browser i temi supportati con la proprietà color-scheme, così che barre di scorrimento e controlli nativi dei moduli si adattino.
Immagini, loghi e grafici
- Loghi: un logo scuro su sfondo trasparente sparisce nel tema scuro; serve una versione chiara o un fondo.
- Fotografie: in genere si lasciano invariate; alcune interfacce ne riducono leggermente la luminosità per evitare che abbaglino.
- Illustrazioni e icone: quelle in SVG possono usare
currentColoro le variabili CSS per adattarsi automaticamente. - Grafici: le palette dei dati vanno riviste, perché colori pensati per sfondo bianco possono confondersi su sfondo scuro.
- Schermate e immagini con fondo bianco: in una pagina scura creano un lampo di luce; un bordo o un leggero arrotondamento ne attenuano l'effetto.
Chi preferisce cosa
Non esiste un tema migliore in assoluto. Alcune persone con certe condizioni visive leggono meglio su sfondo scuro, altre trovano che il testo chiaro su fondo scuro sembri «sbavare», un effetto noto in particolare a chi ha astigmatismo. È proprio per questo che la scelta deve restare all'utente, e che nessuno dei due temi deve essere una versione di seconda classe.
Come verificare
- Passare dal tema chiaro a quello scuro su ogni tipo di pagina, non solo sulla home.
- Controllare il contrasto di testo, link, colori di stato e bordi dei campi in entrambi i temi.
- Cercare elementi rimasti con colori fissi, come icone nere, sfondi bianchi incorporati, email e documenti generati.
- Provare in ambienti con luce diversa: una stanza buia e la luce del giorno.
In sintesi
- La modalità scura va progettata, non ottenuta invertendo i colori.
- Grigi molto scuri e testo leggermente smorzato sono spesso più confortevoli del contrasto estremo.
- I requisiti di contrasto WCAG valgono per entrambi i temi e vanno verificati separatamente.
- Variabili CSS e
prefers-color-schemerendono il tema facile da mantenere; un selettore manuale completa l'esperienza. - Loghi, grafici e immagini con fondo bianco hanno bisogno di attenzione specifica.
