123 Design StudioUn bon mode sombre de site web n'est pas un thème clair aux couleurs inversées, et la différence saute aux yeux dès qu'on en livre un bâclé. Un mauvais mode sombre ressemble à de la boue grise avec du texte blanc flottant ; un bon donne l'impression d'un matériau designé, avec profondeur, hiérarchie et calme.
Voici un guide pratique de bonnes et mauvaises pratiques du mode sombre, bâti sur ce qui casse vraiment en clienttèle — surfaces, contraste, décalages de couleur et tests.
Surfaces et élévation
L'idée clé, empruntée à Material et affinée par les interfaces d'Apple : en mode sombre, l'élévation s'exprime par des surfaces plus claires, pas par des ombres plus lourdes. Les ombres disparaîssent presque sur fond sombre, donc la proximité au regard se signale par un gris un peu plus clair.
- À faire construire une petite échelle de tons de surface — base, surfacé, overlay — chacun d'un cran plus clair.
- À faire garder les écarts subtils ; de grands sauts créent des bandes visibles.
- À éviter compter sur les ombres portées pour la profondeur ; elles ne se voient quasiment pas sur le sombre.
Jamais de noir pur
Le noir pur (#000000) sous du texte blanc pur crée un contraste dur et vibrant qui fatigue l'œil, et il ne laisse aucune place pour montrer l'élévation. Les thèmes sombres bien faits reposent sur un gris très foncé ou un quasi-noir légèrement teinté froid ou chaud.
Le noir pur est un mur. Un quasi-noir est une pièce où l'on peut poser des meubles.
Désaturer tout
Les couleurs saturées superbes sur blanc deviennent agressives et fluorescentes sur sombre. Le remède : baisser la saturation et remonter la luminosité pour que les accents soient présents sans hurler.
- À faire créer des variantes mode sombre des couleurs de marque, pas réutiliser le même hex.
- À faire adoucir surtout les grands aplats colorés ; les petits accents peuvent rester plus francs.
- À éviter poser un rouge ou un bleu de marque saturé sur du quasi-noir en espérant ; ça va vibrer.
Du contraste, mais pas le maximum
Le corps de texte ne doit pas être blanc pur. Visez un contraste élevé mais confortable — un blanc cassé dans la zone gris clair — tout en passant WCAG AA pour le corps et les seuils des éléments interactifs.
- À faire un système de texte par niveaux : primaire, secondaire, désactivé, chacun avec son opacité ou son ton.
- À faire vérifier le contraste sur les vraies surfaces, y compris vos gris surfacés et overlay, pas seulement la base.
- À éviter supposer qu'un passage sur le fond de base vaut partout ; les cartes changent le calcul.
Décalages des couleurs de marque
Votre logo, vos illustrations et votre UI produit peuvent tous demander des palettes ajustées en mode sombre. C'est la partie que les équipes sautent et regrettent. Stripe, Linear et Apple maintiennent des palettes claires et sombres distinctes plutôt qu'une inversion automatique.
| Élément | Mode clair | Geste mode sombre |
|---|---|---|
| Accent de marque | Pleine saturation | Désaturer, remonter la luminosité |
| Corps de texte | Quasi-noir | Blanc cassé, pas blanc pur |
| Surfaces | Blanc + ombre | Quasi-noir + élévation plus claire |
| Bordures | Lignes gris clair | Clair-sur-sombre subtil ou blanc faible opacité |
| Images/illustrations | Telles que conçues | Vérifier les halos ; prévoir des variantes sombres |
De vrais exemples à étudier
Pas besoin de tout réinventer. Observez comment les références connues s'y prennent :
- Linear — une référence d'UI sombre sobre et stratifiée, élévation subtile.
- Apple — un mode sombre système avec des échelles de surfaces cohérentes et une vibrance ajustée.
- Stripe — documentation et dashboards sombres soignés où la couleur reste lisible.
Testez avant de faire confiance
Le mode sombre est le thème le plus susceptible d'être parfait sur votre écran calibré et de s'effondrer ailleurs.
- À faire tester sur téléphones OLED, LCD bon marché, en pièce claire et sombre.
- À faire vérifier que focus, erreurs et états désactivés survivent au basculement.
- À faire contrôler que les images transparentes ne montrent pas de halos blancs.
- À éviter livrer un mode sombre sans vous engager à le maintenir ; un thème sombre à moitié cassé est pire que du clair seul.
La version courte
Traitez le mode sombre comme un design à part, pas comme un filtre. Base quasi-noire, surfaces stratifiées pour l'élévation, accents désaturés, texte blanc cassé, vérifs de contraste sur chaque surface, et tests sur appareils. Faites ça et le mode sombre se lit comme de l'artisanat. Bâclez-le et il se lit comme un ajout après coup — parce que c'en était un.