82% des utilisateurs smartphone ont activé le dark mode sur leur appareil, selon les données Apple et Google publiées en 2026. Cette adoption massive en à fait une attente standard : une application qui ne supporte pas le dark mode est perçue comme incomplète. Mais l’implémentation correcte du dark mode est plus complexe qu’une inversion de couleurs, et les erreurs les plus fréquentes dégradent l’expérience au lieu de l’améliorer.
Contrairement à l’idée reçue, le dark mode n’est pas universellement meilleur pour la lisibilité. Pour les personnes astigmates (environ 50% de la population adulte), un texte blanc sur fond noir crée un halo lumineux qui fatigue la lecture. Le dark mode est meilleur pour des contextes spécifiques (luminosité ambiante basse, lecture nocturne) mais pas comme mode de lecture principal pour tous les utilisateurs.
Construire une palette dark mode correcte
La première erreur : utiliser du noir pur (#000000) comme fond et du blanc pur (#FFFFFF) comme texte. Le contraste est maximum mais la fatigue visuelle est élevée. Les systèmes de design matures (Material Design, Apple Human Interface Guidelines) utilisent des gris foncés pour les fonds :
- Fond principal : #121212 (Material) ou #1C1C1E (Apple iOS dark). Pas #000000.
- Fond de surface (cartes, modales) : #1E1E1E à #2C2C2E. L’élévation se communique par la luminosité, pas par les ombres portées (invisibles sur fond sombre).
- Texte principal : #E0E0E0 ou blanc à 87% d’opacité, pas blanc pur.
- Texte secondaire : blanc à 60% d’opacité. Le texte tertiaire à 38%.
Cette hiérarchie d’opacité est plus flexible que des couleurs fixées : elle s’adapte automatiquement si le fond change.
Couleurs d’accentuation en dark mode
Les couleurs vives de la palette light mode ne fonctionnent généralement pas sans ajustement en dark mode. Un bleu #2563EB est lisible sur fond blanc (ratio de contraste 5.4:1). Sur fond #121212, ce même bleu passe à 4.2:1, sous le seuil WCAG AA pour le texte normal.
- Éclaircir les couleurs d’accentuation en dark mode : passer de #2563EB (blue-600) à #60A5FA (blue-400)
- Ne pas désaturer les couleurs : un bleu grisé sur fond sombre perd son caractère distinctif
- Tester le contraste texte/fond pour chaque couleur dans les deux modes avec un outil dédié (Stark, Colour Contrast Analyser)
En dark mode, l’élévation remplace l’ombre. Plus une surface est haute dans la hiérarchie (modale au-dessus d’un fond), plus elle est légèrement plus claire. C’est une convention intuitive que Material Design à formalisée et que les utilisateurs reconnaissent sans effort.
Typographie et lisibilité en dark mode
Plusieurs ajustements typographiques améliorent la lisibilité en mode sombre :
- Réduire légèrement le font-weight : un texte en font-weight 400 (Regular) en light mode peut devenir 300 (Light) en dark mode. Le halo autour des lettres claires sur fond sombre épaissit visuellement le trait.
- Augmenter légèrement le line-height : +5 à 10% en dark mode améliore la lisibilité pour les textes longs.
- Éviter les polices à empattements fines : les sérifs avec des traits très fins (Garamond, Didot) sont difficiles à lire en mode sombre. Préférer des sérifs à chasse plus régulière ou des sans-sérifs.
Implémentation technique et considérations système
L’implémentation correcte du dark mode dans un design system passe par les Variables Figma avec Modes (light/dark) côté design, et par les CSS custom properties avec media query prefers-color-scheme côté code.
Plusieurs décisions d’implémentation méritent attention :
- Mode système vs mode manuel : permettre les deux. Respecter la préférence système par défaut (
prefers-color-scheme: dark), mais proposer une option de basculement manuel dans l’interface. Certains utilisateurs veulent un mode différent de leur préférence système selon l’application. - Les images ne s’inversent pas : prévoir des variantes dark d’illustrations, pictogrammes et logos si nécessaire. Un logo noir sur fond blanc devient invisible en dark mode si on ne gère pas ce cas.
- Les transparences se comportent différemment : une ombre (box-shadow) noire semi-transparente sur fond blanc donne un effet attendu. Sur fond sombre, le même code produit un résultat différent. Tester chaque usage de transparence dans les deux modes.
- Les formulaires et champs de saisie : les champs avec un fond blanc en light mode doivent avoir un fond de surface en dark mode, avec une bordure légèrement plus visible pour les distinguer du fond d’écran.
Tester le dark mode avant de livrer
Les tests du dark mode sont souvent traités comme une vérification rapide plutôt qu’une phase de QA complète. Checklist minimale :
- Contraste WCAG AA vérifié pour chaque combinaison texte/fond (pas seulement le fond principal)
- Toutes les icônes visibles (icônes noires sans fond en dark mode)
- Tous les états interactifs (hover, focus, disabled, error) vérifiés dans les deux modes
- Images et illustrations vérifiées
- Transitions entre modes testées (si l’app supporte le basculement manuel)
- Test sur un vrai appareil, pas seulement dans le simulateur de navigateur
