Le migliori pratiche per le palette di colori in dark mode

Il primo tema scuro che ho rilasciato è stato, col senno di poi, un disastro. Ho preso la nostra UI chiara, ho passato ogni colore attraverso un filtro "inverti", ho ritoccato a mano qualche valore e ho chiuso la giornata. In Figma sembrava a posto. Poi sono arrivati i ticket di assistenza: testo che "ronzava", pulsanti del brand che brillavano come caramelle radioattive, card che si fondevano tutte in un'unica lastra piatta di buio. La lezione è rimasta impressa. Una buona palette di colori per il dark mode non è una palette chiara rovesciata. È un problema di design a sé, con regole proprie, e la maggior parte di queste regole va contro il tuo istinto.

Ecco quello che avrei voluto mi dicessero prima di quel primo tentativo.

Il dark mode non è un'inversione

Quando inverti un tema chiaro, ogni relazione che lo faceva funzionare si scompiglia. Testo bianco su un pulsante blu navy può essere perfetto a 8:1 di contrasto in modalità chiara; invertilo e potresti ritrovarti con un pulsante pallido e testo grigio che fallisce del tutto l'accessibilità. Le ombre, che reggono gran parte della profondità nelle UI chiare, in pratica scompaiono su uno sfondo scuro: un'ombra nera al 10% su una superficie quasi nera è invisibile. I colori saturi che su bianco appaiono sicuri e amichevoli diventano aggressivi e vibranti sul nero.

Quindi il modello mentale che uso è questo: un tema scuro è un insieme separato di decisioni di design che condivide soltanto lo stesso layout e lo stesso brand. Stai ri-risolvendo da capo contrasto, gerarchia, profondità e colore d'accento, su una tela scura. Se i tuoi strumenti ti permettono di mantenere due set di colori (i token semantici sono il modo pulito di farlo — ne parliamo nel nostro articolo sui token di colore per design system), questo è il momento in cui ripaga.

Usa il grigio scuro, non il nero puro

Questo è l'errore più diffuso in assoluto, e vale la pena capire perché il nero puro fallisce invece di limitarsi a sentirsi dire di evitarlo.

Il nero puro (#000000) abbinato a testo bianco puro (#FFFFFF) tecnicamente segna 21:1 — il massimo rapporto di contrasto possibile. Verrebbe da pensare che il contrasto massimo sia l'obiettivo. Non lo è. Quel divario estremo di luminanza provoca l'alone (halation): su uno sfondo scuro la pupilla si dilata per far entrare più luce, e il testo chiaro sfuma e sbava ai bordi. Per chi ha l'astigmatismo — una fetta ampia della popolazione — l'effetto trasforma i paragrafi in una poltiglia luminosa e affaticante. Le lunghe sessioni di lettura diventano genuinamente scomode.

C'è un secondo problema, più pratico. Se il tuo livello base è #000000, non hai dove andare in basso. Non puoi rendere una superficie più scura del nero, quindi ogni senso di profondità in incavo svanisce, e le ombre non hanno nulla su cui cadere.

La soluzione è partire da un grigio molto scuro. Il Material Design di Google raccomanda #121212 come superficie scura di base e, dopo anni passati a costruire questi temi, credo sia praticamente perfetto. È abbastanza scuro da leggersi come "dark mode", ma lascia margine in entrambe le direzioni. Per il testo, abbandona il bianco puro a favore di un bianco sporco nella fascia #E0E0E0–#F2F2F2. Bianco su #121212 a quel livello supera comodamente le WCAG eliminando al contempo il bagliore da alone.

Una palette neutra di partenza a cui ricorro spesso:

• Sfondo base: #121212
• Testo primario: #E6E6E6 (alta enfasi)
• Testo secondario: #A8A8A8 (media enfasi, comunque ben sopra il 4.5:1)
• Testo disabilitato / suggerimenti: intorno a #6E6E6E

Un trucco sottile: tinta i tuoi grigi scuri leggerissimamente verso la tonalità del brand invece di usare grigi neutri puri. Una base di #131316 con un filo di blu, o #14110F con un tocco di calore, risulta intenzionale e brandizzata anziché un tema di default. Mantienilo sottile — al massimo qualche punto di saturazione.

Comunica l'elevazione con superfici più chiare, non con le ombre

In modalità chiara una card fluttua sopra la pagina grazie alla sua ombra. In dark mode le ombre si percepiscono a malapena, quindi capovolgiamo la logica: più una superficie è in alto, più diventa chiara. Una finestra modale è più chiara della card che copre, che è più chiara della pagina dietro.

Material formalizza tutto questo come overlay di elevazione — uno strato bianco semitrasparente applicato sopra la superficie base, sempre più opaco al crescere dell'elevazione (all'incirca dallo 0% alla base fino a circa il 16% al livello più alto). Non sei obbligato a implementare la matematica letterale dell'overlay; puoi semplicemente fissare i risultati in token discreti. Una scala che ho rilasciato e di cui mi fido:

• Livello 0 (pagina): #121212
• Livello 1 (card): #1E1E1E
• Livello 2 (menu, pannelli rialzati): #242424
• Livello 3 (dialoghi, modali): #2C2C2C
• Livello 4 (popover, top sheet): #333333

Ogni passo è più chiaro solo di una manciata di punti, e quella sobrietà conta — i salti vanno percepiti, non annunciati. Usata con coerenza, questa scala dà alla tua interfaccia una profondità reale senza una singola ombra, e risolve la lamentela del "si fonde tutto insieme" che affliggeva il mio primo tentativo. Puoi comunque sovrapporre un'ombra tenue per una separazione extra, ma è lo spostamento di luminosità a fare il lavoro pesante.

Desatura i tuoi colori d'accento

Prendi il colore eroe del tuo brand — diciamo un blu SaaS deciso come #2563EB — e mettilo su uno sfondo #121212. Vibra. I colori molto saturi contro un campo scuro producono un ronzio ottico, e spesso falliscono il contrasto per testo o icone anche se appaiono sgargianti.

La soluzione è controintuitiva: abbassa la saturazione e alza la luminosità. La linea guida di Material è usare tinte più chiare (pensa alla fascia 200–50 di una scala cromatica) e desaturarle finché superano il 4.5:1 contro la superficie scura. In pratica desaturo i colori del brand di circa il 20–40% per il dark mode e li schiarisco, poi controllo il numero.

In concreto, quel #2563EB potrebbe diventare qualcosa come #7AA2F7 in dark mode — più morbido, più chiaro e di gran lunga più leggibile contro la superficie scura. Il tuo accento per la modalità chiara e quello per la modalità scura sono fratelli, non lo stesso valore. È esattamente il tipo di esplorazione abbinata chiaro/scuro per cui è stato pensato il color palette generator: scegli la tonalità, poi ritocca saturazione e luminosità guardando il numero di contrasto aggiornarsi in tempo reale.

Qualche onesto distinguo:

• Mantieni riconoscibili i colori semantici. Il rosso d'errore, il verde di successo e l'ambra d'avviso devono comunque leggersi come rosso, verde e ambra dopo che li hai desaturati. Schiarisci e ammorbidisci, ma non spostare la tonalità così tanto da far smettere a un errore di sembrare pericolo.
• I grandi riempimenti di colore sono diversi dal testo. Un grande banner eroe saturo può reggere più saturazione di una piccola etichetta, perché non stai chiedendo a nessuno di leggervi sopra un testo fine.
• Non applicare gli overlay di elevazione alle superfici colorate. Un pulsante con colore primario mantiene il suo colore attraverso i livelli di elevazione; solo le tue superfici neutre si schiariscono salendo.

Mantieni il contrasto WCAG — in entrambe le direzioni

Gli obiettivi di accessibilità non cambiano al buio. Le WCAG 2.1 richiedono 4.5:1 per il testo del corpo normale e 3:1 per il testo grande (e per i componenti UI e le icone significative). Ciò che cambia è che i fallimenti sono più subdoli.

La trappola che vedo più spesso è il testo grigio di tonalità media — qualcosa come #888888 su #121212 — che sembra elegante e fallisce silenziosamente per i testi secondari. Esegui sempre i numeri reali. Il riferimento ufficiale è la guida WCAG del W3C sul contrasto, e qualsiasi verificatore di contrasto (incluso quello integrato nel nostro color palette generator) ti darà il rapporto in pochi secondi.

Due cose da sapere mentre testi. Primo, "più contrasto è sempre meglio" è falso in dark mode — il bianco puro massimizza il numero ma innesca l'alone che ho descritto, quindi stai ottimizzando per una leggibilità confortevole, non per il rapporto più alto possibile. Secondo, la prossima generazione dello standard, WCAG 3.0, sostituisce il semplice rapporto con APCA (l'Advanced Perceptual Contrast Algorithm), che modella come l'occhio percepisce davvero il testo chiaro e scuro e gestisce la polarità molto meglio. È ancora in bozza, quindi oggi rilascia secondo le WCAG 2.1, ma se vuoi prepararti al futuro fai passare la tua palette scura in un verificatore APCA come prova di sanità mentale — è notevolmente più onesto sugli sfondi scuri.

Testala dove la gente la usa davvero

Una palette scura può superare ogni controllo in Figma e fallire comunque nel mondo reale. La variabile che ho più sottovalutato all'inizio è stato lo schermo stesso: i pannelli OLED rendono #000000 come pixel davvero spenti con un contrasto brutale contro il testo illuminato, mentre gli LCD più economici alzano i neri e appiattiscono i tuoi passi di elevazione tarati con cura. La palette che appare stratificata sul tuo monitor può sembrare piatta sul portatile economico di qualcun altro.

La mia checklist di test, imparata a caro prezzo:

• Guardala su un vero telefono OLED a bassa luminosità, di notte. È qui che alone e sovra-saturazione si rivelano. Se è confortevole qui, lo è ovunque.
• Controlla i passi di elevazione su un LCD economico. Se le tue card spariscono nello sfondo, i tuoi passi sono troppo sottili.
• Alterna tra chiaro e scuro dal vivo. Lampi di luminosità stridenti di solito significano che la tua base scura è troppo chiara o la tua base chiara troppo grigia.
• Guardala con immagini e contenuti utente. Foto reali, avatar e media incorporati si appoggiano alle tue superfici e possono stonare in modi che un mockup pulito non mostra mai.
• Verifica che gli stati di focus e i bordi sopravvivano. I sottili bordi da 1px che definivano gli input in modalità chiara spesso svaniscono al buio e hanno bisogno di un valore più chiaro.

In breve

Se dovessi comprimere tutto in una manciata di mosse: parti da #121212, mai da #000000. Usa testo bianco sporco, non bianco puro. Mostra la profondità schiarendo le superfici rialzate, dato che qui le ombre quasi non esistono. Desatura e schiarisci i tuoi accenti finché smettono di ronzare e iniziano a superare il contrasto. Tieni la linea a 4.5:1 per il testo del corpo, ma resisti alla tentazione di inseguire il massimo. E testa su un vero schermo OLED in una stanza buia, perché è l'unico ambiente che i tuoi mockup non potranno mai simulare.

Fatto bene, un tema scuro non è solo un'opzione cortese per i nottambuli: è una versione più calma e concentrata del tuo prodotto. Basta solo trattarlo come il problema di design distinto che è davvero.