Design du mode sombre : arrière-plans, couleur et contraste

Le design du mode sombre consiste à construire un jeu de valeurs distinct pour les surfaces, le texte, les accents et les images, et non à retourner les couleurs du mode clair. Les fonds sombres changent le comportement de la couleur : les teintes saturées paraissent plus lourdes, les ombres disparaissent, le texte blanc vif éblouit et les dégradés lisses font du banding. La bonne nouvelle, c’est que les mêmes propriétés rendent les thèmes sombres magnifiques quand on les maîtrise : la couleur rayonne, la profondeur paraît stratifiée et le contenu se tient calmement devant.

Pourquoi éviter les arrière-plans noir pur

Le noir pur, #000000, avec du texte blanc pur donne le contraste maximal de 21:1. Cela paraît idéal mais c’est souvent inconfortable : beaucoup de lecteurs voient le texte clair baver ou vibrer sur du noir pur, surtout dans les longs passages. Le noir ne laisse aussi aucun plus sombre où aller : impossible de montrer une surface sous une autre. Et sur certains téléphones OLED, un contenu qui défile sur du vrai noir peut laisser une brève traînée quand les pixels s’allument. Les recommandations de Material Design de Google utilisent #121212 comme surface sombre de base pour ces raisons.

Montrer l’élévation par la luminosité

En mode clair, les ombres séparent une carte de la page. Sur un fond sombre, une ombre sombre se voit à peine. Les thèmes sombres inversent donc la logique : plus une surface est proche du spectateur, plus elle est claire. La page est la plus sombre, les cartes d’un cran plus claires, les menus et boîtes de dialogue encore plus clairs. Gardez des pas petits et constants, et ajoutez une bordure très fine d’un ton un peu plus clair là où deux surfaces similaires se rejoignent.

Couleur du texte et contraste en mode sombre

Utilisez un blanc cassé comme #e6e8ec pour le texte courant plutôt que du blanc pur. Il donne encore un contraste très élevé, 15:1 sur #121417, et éblouit moins. Le texte secondaire peut descendre à un gris moyen, mais vérifiez : #9aa1ad reste à 7,1:1 sur la même surface et à 5,5:1 sur une carte plus claire. Les WCAG demandent au moins 4,5:1 pour le texte normal, quel que soit le thème ; le contraste des couleurs explique comment le vérifier.

Désaturer les couleurs d’accent

Un violet vif comme #7c3aed fonctionne comme bouton sur du blanc. Sur une surface sombre, il paraît lourd et ne mesure que 3,2:1, trop peu pour des liens textuels. Sa nuance plus claire #a78bfa mesure 6,8:1 sur le même fond et se lit comme la même couleur de marque. La règle générale : décalez les accents vers plus clair et un peu moins saturé pour les thèmes sombres, en gardant la teinte.

Les dégradés dans le design du mode sombre

Les fonds sombres sont l’endroit où les dégradés brillent. Un fond profond fait paraître la couleur comme de la lumière plutôt que de la peinture, c’est pourquoi halos, aurores et mélanges néon sont si souvent montrés sur du quasi-noir. Gardez l’essentiel de la surface sombre et laissez la couleur apparaître à un ou deux endroits : un halo derrière un hero, un bord dégradé sur une carte vedette, un lavis doux en haut d’une page.

Le hic est le banding. Les estompages sombres et lents n’utilisent que quelques nuances distinctes sur un écran 8 bits : les paliers deviennent visibles. Une légère couche de grain les cache ; voyez le banding des dégradés et, pour le web, la texture de bruit CSS. Pour des arrière-plans entièrement dans le sombre, les fonds dégradés sombres proposent des palettes.

Construire le mode sombre en CSS

Définissez les couleurs une fois comme propriétés personnalisées et changez leurs valeurs selon le thème. color-scheme dit au navigateur d’afficher ses propres contrôles et barres de défilement dans le thème correspondant, et la fonction light-dark() choisit entre deux valeurs selon le schéma actif.

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

Donnez aussi un interrupteur manuel en plus du réglage système, et pensez à tout ce qui dépasse l’interface : graphiques, illustrations, logos et e-mails doivent être vérifiés dans les deux thèmes. Les dégradés dans les e-mails expliquent comment les applications de messagerie gèrent le mode sombre.

Une liste de contrôle du mode sombre

• Des surfaces gris foncé, pas noir pur, avec un pas de luminosité net par élévation.
• Un texte courant blanc cassé très contrasté ; un texte secondaire toujours au-dessus de 4,5:1.
• Des accents décalés vers plus clair et plus doux, en gardant la teinte de la marque.
• Des bordures, pas des ombres, pour séparer des surfaces similaires.
• La couleur employée comme lumière à quelques endroits, pas partout.
• Du grain sur les grands dégradés sombres pour éviter le banding.
• Des logos avec une version claire pour fonds sombres ; voyez le logo sur un fond dégradé.
• Les deux thèmes relus sur un vrai téléphone, dans une pièce tamisée et en plein jour.