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

[Canonical HTML page](https://gradiently.design/fr/guide/dark-mode-design)

Le mode sombre n’est pas le mode clair inversé. Surfaces, texte, accents et dégradés demandent chacun leurs propres valeurs, et les règles diffèrent de celles que vous connaissez.

## The short version

- Un bon design de mode sombre utilise un gris foncé plutôt qu’un noir pur pour les surfaces principales, ce qui adoucit le contraste et laisse de la place pour montrer la profondeur.
- Dans les interfaces sombres, l’élévation se montre par la luminosité : les surfaces plus proches du spectateur sont un peu plus claires, car les ombres se voient à peine sur fond sombre.
- Un texte sur fond sombre se lit plus confortablement en blanc cassé qu’en blanc pur, le texte secondaire restant au-dessus de 4,5:1 de contraste.
- Les accents saturés qui marchent sur du blanc paraissent souvent trop lourds sur du sombre : les thèmes sombres utilisent donc des nuances plus claires et plus douces des mêmes teintes.
- Les dégradés rayonnent sur les fonds sombres mais y font facilement du banding : ils gagnent à recevoir une légère couche de grain.

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.

- Base: #0e0f12
- Surface: #121417
- Surélevé: #1a1d22
- Carte: #22262c
- Menu et popover: #2b3038
- Texte: #e6e8ec
- Texte secondaire: #9aa1ad

Une échelle neutre de sombres. Chaque surface est un peu plus claire que celle du dessous. Le texte mesure 15:1 et le texte secondaire 7,1:1 sur la couleur de surface.

## 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.

| Calque | Couleur | Séparation supplémentaire |
| --- | --- | --- |
| Arrière-plan de la page | `#0e0f12` | Aucune |
| Surface principale | `#121417` | Aucune |
| Cartes | `#22262c` | Bordure de 1px `rgb(255 255 255 / 0.06)` |
| Menus et popovers | `#2b3038` | Bordure, plus une douce ombre sombre |
| Boîtes de dialogue | `#2b3038` | Un voile atténué sur tout ce qui est dessous |

L’élévation par la luminosité. Les valeurs sont un point de départ ; gardez vos propres pas réguliers.

## 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](https://gradiently.design/fr/guide/color-contrast-accessibility) explique comment le vérifier.

> **Le poids paraît plus lourd sur fond sombre** Un texte clair sur fond sombre tend à paraître plus gras que la même graisse en sombre sur clair. Si le texte courant paraît lourd en mode sombre, essayez une graisse un peu plus légère ou un peu plus d’espacement des lettres.

## 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.

### Accent du mode clair sur sombre

- Violet `#7c3aed` : 3,2:1 sur `#121417`
- Bleu `#2563eb` : 3,6:1 sur `#121417`
- Bords lourds et vibrants sur de grandes zones
- Échoue comme texte de lien

### Nuance du mode sombre de la même teinte

- Violet `#a78bfa` : 6,8:1 sur `#121417`
- Bleu `#93c5fd` : 10,2:1 sur `#121417`
- Douce, lumineuse, nettement fidèle à la marque
- Passe comme texte de lien

## 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.

- Halo supérieur sur surface sombre: `radial-gradient(ellipse at 50% 0%, #3b2a7a, #121417 60%)`
- Lumière d’angle: `radial-gradient(circle at 85% 15%, #0e7490, #121417 45%)`
- Lavis violet doux: `linear-gradient(180deg, #1a1033, #121417 70%)`
- Braise d’horizon: `radial-gradient(ellipse at 50% 120%, #9d174d, #1a1033 45%, #121417 75%)`

Des dégradés de mode sombre qui rayonnent et finissent pourtant sur la couleur de la surface : ils s’insèrent dans l’interface au lieu de la recouvrir.

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](https://gradiently.design/fr/guide/gradient-banding) et, pour le web, la [texture de bruit CSS](https://gradiently.design/fr/guide/css-noise-texture). Pour des arrière-plans entièrement dans le sombre, les [fonds dégradés sombres](https://gradiently.design/fr/guide/dark-gradient-backgrounds) 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.

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

Un seul jeu de jetons, deux thèmes. Atténuer légèrement les photos en mode sombre les empêche d’éblouir contre la page plus sombre.

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](https://gradiently.design/fr/guide/gradients-in-email) 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é](https://gradiently.design/fr/guide/logo-on-gradient-background).
- Les deux thèmes relus sur un vrai téléphone, dans une pièce tamisée et en plein jour.

## FAQ

### Le mode sombre doit-il utiliser du noir pur ?

En général non pour les surfaces principales. Un gris foncé, comme #121212 ou proche, réduit l’éblouissement, laisse de la place à des surfaces plus claires surélevées et évite les traînées sur certains écrans OLED.

### Quelle couleur de texte pour le mode sombre ?

Un blanc cassé comme #e6e8ec plutôt que du blanc pur. Il donne encore un contraste très élevé tout en éblouissant moins.

### Comment montrer la profondeur en mode sombre ?

Rendez les surfaces plus claires à mesure qu’elles se rapprochent du spectateur, et utilisez des bordures discrètes entre surfaces similaires, car les ombres se voient à peine sur fond sombre.

### Pourquoi les couleurs de ma marque paraissent-elles fausses en mode sombre ?

Les couleurs saturées choisies pour un fond blanc paraissent lourdes sur du sombre et peuvent échouer au contraste. Utilisez des nuances plus claires et plus douces des mêmes teintes.

### Les dégradés marchent-ils en mode sombre ?

Très bien : la couleur rayonne sur les fonds sombres. Employez-les à quelques endroits, terminez-les sur la couleur de surface et ajoutez un léger grain pour stopper le banding.