Dark mode e palette di colori accessibili, fatti bene
La modalità scura non è più opzionale, ma attesa; sbagliare il contrasto danneggia sia il marchio sia l'accessibilità. Come impostarla correttamente.
Team rabbitclipPubblicato: 5 min di lettura
In breve
La modalità scura non è solo uno sfondo scuro con testo chiaro; se sbagliata, il rapporto di contrasto scende, il testo diventa difficile da leggere e il colore del marchio viene percepito come un tono diverso su sfondo scuro. Il rapporto di contrasto dovrebbe essere almeno 4,5:1 per il testo di dimensione normale e almeno 3:1 per i titoli grandi (W3C WCAG 2.1, Contrast Minimum).
Non è solo una questione di gusto. Nell'UE, l'Atto europeo sull'accessibilità (direttiva (UE) 2019/882) è in vigore da giugno 2025, e alcuni servizi digitali devono soddisfarne i requisiti di accessibilità (EUR-Lex, Directive 2019/882). Per un'azienda con clienti nel Regno Unito o nell'UE, questo è sempre più un tema di conformità, non solo buona pratica di design.
Di seguito le quattro componenti di una modalità scura impostata correttamente: contrasto, colore del marchio, coerenza e processo di test.
Come si calcola il rapporto di contrasto
Il rapporto di contrasto misura la differenza di luminosità relativa tra il colore del testo e quello dello sfondo; 1:1 significa nessuna differenza, 21:1 è netto come nero su bianco. Lo standard WCAG considera 4,5:1 come minimo per il testo normale, e 3:1 per il testo grande (18 punti in grassetto o superiore, o 24 punti normale) (W3C WCAG 2.1).
Non serve calcolarlo a mano; il verificatore di contrasto negli strumenti per sviluppatori del browser, o uno qualsiasi degli strumenti online gratuiti, restituisce un rapporto immediato una volta inseriti i colori. Uno sfondo grigio scuro con testo grigio medio è un errore comune nel tema scuro di un produttore di generatori; il rapporto di solito scende sotto 3:1, e la leggibilità ne risente.
Come si comporta un colore di marchio su sfondo scuro
Un colore di marchio che appare vivido su sfondo chiaro può risultare spento o, altrettanto spesso, accecante su sfondo scuro; lo stesso valore non rende allo stesso modo sui due sfondi. Per questo la modalità scura ha bisogno di una propria variante del colore del marchio, non di una copia esatta dello stesso codice.
Il rosso del marchio di una società sportiva, chiaro su bianco, può sembrare un'insegna al neon su nero e affaticare la vista; una versione con saturazione leggermente ridotta mantiene il marchio riconoscibile senza quell'affaticamento.
Coerenza: una decisione sui componenti, non solo un cambio di colore
La modalità scura non finisce con il colore di sfondo e del testo; ombre, bordi, icone e gli sfondi dietro le immagini meritano tutti un secondo sguardo. Una card separata da un'ombra sottile su sfondo chiaro può scomparire del tutto su sfondo scuro; un bordo sottile svolge allora il compito che faceva l'ombra.
Le immagini sono una questione a parte: una foto prodotto su sfondo bianco può sembrare una scatola bianca fuori posto su una pagina scura; la soluzione è una versione con sfondo trasparente oppure una cornice morbida attorno.
Test: chi controlla, con quale strumento
Prima che qualcosa vada online, ogni coppia testo-sfondo ha bisogno di un proprio controllo di contrasto, ed elementi funzionali come pulsanti, etichette dei moduli e messaggi di errore non andrebbero saltati. Se il messaggio di errore di un modulo è un rosso a basso contrasto, un visitatore può non notarlo affatto e inviare il modulo più volte senza capirne il motivo.
- Ogni coppia testo/sfondo passata da un verificatore di contrasto
- Una variante di modalità scura definita a parte per il colore del marchio
- Immagini e icone controllate separatamente in entrambe le modalità
- Cambio automatico in base alla preferenza di sistema (prefers-color-scheme) testato
Ogni sito ha bisogno della modalità scura
Non ogni sito ne ha bisogno; ma per un pubblico che usa un prodotto tecnico (software, un'app, una dashboard), le aspettative sono alte. Un sito vetrina può lasciare la modalità scura come priorità minore, nel qual caso lo sforzo è meglio speso a sistemare il contrasto della modalità chiara, perché l'accessibilità non riguarda solo la modalità scura.
Affidarsi solo al colore: il rischio del daltonismo
Segnalare un campo non valido solo con il rosso può non significare nulla per un visitatore daltonico; una parte non trascurabile della popolazione presenta una forma di daltonismo rosso-verde. Il colore dovrebbe sempre essere accompagnato da un'icona o da un testo, mai portare da solo il messaggio.
Se un indicatore di disponibilità mostra «disponibile» in verde e «esaurito» in rosso senza un'etichetta di accompagnamento, questa informazione non raggiunge mai alcuni visitatori; aggiungere una piccola icona o una breve etichetta di testo evita che il colore sia l'unico segnale.
Come viene ricordata una preferenza manuale
Una volta che un visitatore passa dalla modalità scura a quella chiara a mano, questa scelta dovrebbe essere mantenuta alla visita successiva; tornare alla preferenza di sistema a ogni caricamento di pagina è un modo facile per infastidire il visitatore. La preferenza risiede nell'archiviazione locale del browser e viene riletta da lì a ogni caricamento della pagina.
Senza questo promemoria sul sito di uno studio di videogiochi, un visitatore deve rifare la stessa impostazione a ogni visita; un dettaglio tecnico minore, ma un punto di attrito che si ripete.
Invece di affidarsi solo all'archiviazione locale, l'impostazione può anche vivere come preferenza dell'account lato server; per un visitatore che ha effettuato l'accesso, questo porta la scelta anche su dispositivi diversi.
Impostata con il giusto rapporto di contrasto, la modalità scura protegge il marchio e mantiene il sito leggibile per un pubblico più ampio. rabbitclip consegna entrambe le modalità di un design system testate sul contrasto; possiamo verificare insieme il rapporto di contrasto del vostro sito attuale.
Domande frequenti
Qual è il rapporto di contrasto minimo?
4,5:1 per il testo normale, 3:1 per i titoli grandi; entrambe le cifre provengono dallo standard W3C WCAG 2.1.
La modalità scura dovrebbe attivarsi automaticamente?
Si consiglia il cambio automatico in base alla preferenza del dispositivo o del browser (prefers-color-scheme), insieme a un interruttore manuale.
L'Atto europeo sull'accessibilità ci riguarda?
È una questione sempre più rilevante per i prodotti digitali che servono clienti nell'UE o nel Regno Unito; l'ambito dipende dal tipo di attività.
Il colore del marchio dovrebbe cambiare in modalità scura?
Di solito sì; una variante con saturazione regolata funziona meglio che riutilizzare esattamente la stessa tonalità.
Quanto è diffuso il daltonismo?
Riguarda una parte non trascurabile della popolazione, per questo l'informazione non dovrebbe mai dipendere solo dal colore.
