Un bon design en dark mode est bien plus que l'inversion des couleurs d'un thème clair. Mettre le fond en noir et le texte en blanc semble fonctionner au premier coup d'œil, mais dans la réalité le blanc pur sur noir pur crée un halo fatigant (halation), les ombres disparaissent et les couleurs de la marque deviennent agressives. Un thème sombre est un système de design à part entière, qu'il faut repenser avec sa propre logique, sa propre palette de gris et ses propres règles de contraste. Dans cet article, je détaille les bons tons de gris, des ratios de contraste lisibles et des choix de couleurs qui réduisent la fatigue visuelle, avec des exemples concrets.
Pourquoi le noir pur (#000000) est un mauvais point de départ
Le premier réflexe de la plupart des gens est de mettre le fond en #000000, mais cela pose plusieurs problèmes. Le texte blanc pur sur noir pur produit un contraste extrême ; sur les écrans OLED en particulier, les bords des lettres claires bavent et l'œil se fatigue lors des longues lectures. Sur une surface noire pure, une ombre portée devient également invisible : vous perdez donc l'un des outils les plus puissants pour séparer les couches (cartes, modales, menus) les unes des autres.
Utilisez plutôt un gris très foncé. Les recommandations Material de Google préconisent depuis des années environ #121212 comme couleur de surface de base, car sur ce ton vous pouvez empiler des couches blanches semi-transparentes pour créer une sensation d'élévation. Une palette de départ pratique pourrait ressembler à ceci :
--bg: #121212; /* surface la plus basse */
--surface-1: #1e1e1e; /* cartes */
--surface-2: #242424; /* cartes surélevées, menus */
--surface-3: #2c2c2c; /* modales, popovers */
--text: #e6e6e6; /* texte principal (pas blanc pur) */
--text-dim: #a0a0a0; /* texte secondaire */Remarquez que la couleur de surface s'éclaircit à mesure que la couche s'élève. Dans un thème sombre, comme la lumière vient d'en haut, les surfaces hautes paraissent plus claires ; cela imite la logique d'éclairage du monde réel et rend l'interface naturelle.
Un blanc adouci plutôt qu'un blanc pur pour le texte
Ne mettez pas le texte courant en #ffffff. Sur une surface sombre, le blanc pur crée un effet de vibration autour des lettres. Utilisez plutôt du blanc à 85–90 % d'opacité, ou un ton proche de #e6e6e6. Les recommandations Material échelonnent l'opacité du texte ainsi :
- Forte emphase (texte principal) : 87 % du blanc
- Emphase moyenne (texte secondaire, libellés) : 60 % du blanc
- Désactivé (éléments inactifs) : 38 % du blanc
En CSS, il est plus prévisible d'écrire cela comme une couleur directe plutôt qu'une opacité, car si vous rendez le blanc transparent avec rgba, la couleur de surface en dessous modifie le résultat. Vous pouvez utiliser l'un ou l'autre, mais restez cohérent au sein d'un projet.
Ratio de contraste : respectez les seuils WCAG
L'erreur la plus fréquente en design dark mode est de baisser le contraste au nom de l'esthétique. Un texte gris pâle sur surface sombre peut sembler « élégant » mais reste illisible. La norme d'accessibilité WCAG 2.1 fixe des seuils clairs :
- Texte normal : au moins un ratio de contraste de 4,5:1
- Grand texte (au-dessus de 18pt / 24px, ou 14pt gras) : au moins 3:1
- Composants d'interface (bordures de boutons, icônes, contours de champs) : au moins 3:1
Un exemple : sur un fond #121212, le texte #e6e6e6 affiche un ratio de contraste d'environ 13:1, largement suffisant. Mais si vous utilisez #757575 pour le texte secondaire, le ratio tombe autour de 4,6:1, juste passable. Choisissez #5a5a5a et il descend sous 3:1, inutilisable pour du texte normal. Vérifiez chaque paire de couleurs avec le vérificateur de contraste des outils de développement du navigateur ou un outil comme WebAIM Contrast Checker.
Désaturer les couleurs vives
Les couleurs vives et saturées qui rendent bien dans un thème clair (bleu éclatant, rouge, vert) « flottent » et vibrent sur une surface sombre. Cela vient du grand écart de luminance entre une saturation élevée et un fond sombre, qui fatigue l'œil. La solution : baissez la saturation et augmentez légèrement la luminosité pour le dark mode. Autrement dit, utilisez des tons plus pastel, plus « poudrés ».
/* Couleur d'accent dans le thème clair */
--accent-light: #0066ff; /* bleu vif */
/* Version adoucie pour le dark mode */
--accent-dark: #5b9aff; /* plus clair, moins saturé */La même règle vaut pour les couleurs de marque. Si votre couleur principale est très foncée (un bleu marine, par exemple), elle se fondra dans la surface et deviendra illisible en dark mode ; il faut alors en dériver une variante plus claire pour l'accessibilité. Garder des tokens de couleur basés sur le thème (une valeur claire et une valeur sombre par couleur) rend la chose gérable.
Élévation, ombres et bordures
Dans un thème clair, vous séparez les couches par des ombres. Dans un thème sombre, les ombres fonctionnent mal car le fond est déjà sombre. Combinez plutôt deux techniques : une couleur de surface plus claire (l'échelle de couches ci-dessus) et une bordure subtile. Une bordure blanche à très faible opacité sépare élégamment une carte de la surface :
.card {
background: var(--surface-1);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
}Ne supprimez pas totalement les ombres ; rendez-les simplement plus douces et plus diffuses, pour qu'elles suggèrent la profondeur plutôt que la dureté. Dans un thème sombre, l'objectif n'est pas une ombre dramatique mais une séparation discrète.
Images et transition de thème
Les photos et illustrations peuvent rester trop lumineuses sur une surface sombre ; un léger assombrissement (filter: brightness(0.9)) ou une fine bordure sur les images de contenu améliore le confort visuel. Les logos PNG transparents, surtout les foncés, disparaissent en dark mode : préparez donc une variante claire de votre logo.
Enfin, gérez la transition entre thèmes. Mémorisez le choix de l'utilisateur (par exemple dans localStorage) et lisez la préférence système avec prefers-color-scheme comme valeur initiale. Pour éviter que la transition « clignote », appliquez la classe de thème avant le premier rendu de la page, idéalement avec un petit script dans le <head>.
Questions fréquentes
Le dark mode fatigue-t-il vraiment moins les yeux ?
Cela dépend du contexte. Dans un environnement sombre, un thème sombre soulage les yeux car la luminosité globale de l'écran baisse. Mais dans un environnement lumineux, un thème sombre peut dilater la pupille et rendre les bords du texte plus flous. Le mieux est d'offrir le choix aux utilisateurs et de respecter leur préférence système.
Faut-il une palette de couleurs distincte pour le dark mode ?
Oui, au moins pour les couleurs d'accent et de texte. Reporter telles quelles les couleurs du thème clair crée des problèmes de contraste et de saturation. Définir des tokens de couleur avec des valeurs distinctes par thème est l'approche la plus durable.
Dois-je utiliser le noir pur pour les écrans OLED ?
Pour économiser la batterie, le noir pur éteint effectivement les pixels, c'est vrai. Mais mettre toute l'interface en #000000 casse la lisibilité et la séparation des couches. Une approche équilibrée : gardez la surface principale très sombre comme #121212 et n'utilisez le vrai noir que là où vous le souhaitez précisément.
Vous voulez une interface qui fonctionne parfaitement en thème clair comme en thème sombre pour votre marque ? Je peux vous aider à concevoir un contraste accessible, un système de couleurs cohérent et un dark mode reposant pour les yeux. Contactez-moi et parlons de votre projet.