Les pièges du dark mode
Le texte blanc pur sur noir pur offre un contraste maximal, mais peut être fatigant. Beaucoup d’interfaces utilisent donc des gris. Le risque est de descendre trop bas : un gris moyen sur fond #121212 peut échouer pour du texte normal.
Contrôler les états interactifs
En mode sombre, les états hover, disabled, focus et selected sont souvent très subtils. Les bordures de champs et indicateurs de focus doivent rester visibles avec au moins 3:1 contre les couleurs adjacentes lorsqu’ils portent une information.
Couleurs de marque sur fond sombre
Une couleur de marque qui passe sur blanc peut être trop peu contrastée sur un fond sombre, ou au contraire vibrer visuellement. Définissez des variantes dédiées au thème sombre plutôt que d’inverser mécaniquement la palette claire.
Méthode de test
- Listez les fonds sombres réels : page, carte, popover, input.
- Testez texte primaire, secondaire, liens et boutons sur chaque fond.
- Vérifiez les bordures et focus à 3:1.
- Gardez une marge au-dessus des seuils.