Le Dark Mode Design

Pourquoi c'est important

Le dark mode n'est pas un filtre qu'on applique. C'est un système de design a part entiere avec ses propres regles de contraste, de couleur et de hiérarchie. Mal fait, il fatigue les yeux. Bien fait, il ameliore le confort et l'accessibilite (Material Design, Google).

Le framework

1. 01

   1. Pas de noir pur

   Evitez #000000. Le contraste extreme avec du texte blanc fatigue les yeux. Utilisez un gris fonce (#121212 ou #1E1E1E) pour un fond plus doux et lisible.

2. 02

   2. Desaturez vos couleurs

   Les couleurs saturees vibrent sur fond sombre. Utilisez des pastels et des teintes desaturees. Un bleu vif en light mode devient neon en dark mode.

3. 03

   3. Hiérarchie par elevation

   Les ombres ne marchent pas sur fond sombre. Remplacez-les par des surfaces plus claires : plus un élément est eleve, plus il est lumineux.

4. 04

   4. Contraste WCAG respecte

   Texte normal : ratio minimum 4.5:1. Texte large : 3:1. Testez avec WebAIM Contrast Checker. Le dark mode ne dispense pas des normes d'accessibilite.

5. 05

   5. Attention à l'astigmatisme

   47% de la population a de l'astigmatisme. Le texte clair sur fond sombre peut provoquer un effet de halo (halation). Evitez les polices trop fines en dark mode.

6. 06

   6. Toggle + respect OS

   Toujours offrir un switch light/dark. Respectez les préférences système par défaut (prefers-color-scheme). Ne forcez jamais un mode sans option.

Pour aller plus loin