Dark mode : nécessité ou effet de mode

Le dark mode se retrouve aujourd’hui dans tous les types d’interfaces. À l’origine, c’était une option. Aujourd’hui, on a l’impression que c’est devenu une obligation. Nous allons faire le tri entre idées reçues, réalités techniques et bonnes pratiques de design.

Le dark mode permettrait de consommer moins d’énergie. Mais qu’en est-il vraiment ? Et bien ça dépend de l’écran.

Sur les écrans LCD (encore très répandus), le rétroéclairage est toujours allumé. Que votre interface soit blanche ou noire, la consommation varie ainsi très peu.

Par contre, sur les écrans OLED, chaque pixel émet sa propre lumière. Un pixel noir, c’est un pixel éteint ce qui relève d’une consommation quasi nulle. Donc oui, sur un écran OLED, une interface majoritairement sombre peut réduire la consommation d’énergie.

Pour compléter : si votre dark mode utilise beaucoup de gris foncé plutôt que du vrai noir (#000000), le gain diminue. De plus, si l’utilisateur est en luminosité faible, la différence devient marginale.

L’idée que le dark mode économiserait de l’énergie n’est donc pas totalement fausse, mais a surtout été popularisée comme argument de vente ou de communication.

C’est probablement l’argument le plus répété. La vérité ? C’est surtout une question de contraste et le contexte d’usage.

En intérieur sombre, le dark mode est souvent plus confortable car il réduit l’écart brutal entre la luminosité de l’écran et celle de l’environnement : un fond clair dans une pièce peu éclairée agit comme une source lumineuse intense, provoquant éblouissement, contraction pupillaire répétée et donc fatigue visuelle.

À l’inverse, dans un espace lumineux, la lumière ambiante est tellement forte qu’un fond sombre perd en contraste perçu : les reflets sur l’écran “lavent” les zones sombres, rendant le texte plus difficile à lire.

Pour exemple, la nouvelle application de la SNCF conçue uniquement en dark mode a subit de vives critiques à sa sortie. En effet, nombre d’utilisateur·rices l’utilisaient sur les quais de gare et n’y voyait pas grand chose avec les reflets de lumière en plein soleil. Un bon mauvais exemple qui prouve encore que ce n’est pas parce qu’une grosse marque fait quelque chose que c’est forcément bien.

Vous l’avez compris, le dark mode est donc considéré comme “meilleur” lorsque le contexte d’utilisation présente une faible luminosité.

Du texte blanc sur un fond noir aura tendance à créer un effet de “halo” autour des lettres, surtout dans les petites tailles. Cela rendra la lecture moins agréable et sera plus fatiguant sur la durée. Pour éviter cet effet, il faut réduire le contraste entre un texte et son fond.

En lecture prolongée, plusieurs études montrent que le mode clair reste généralement plus performant pour la vitesse et la compréhension. En effet, notre système visuel est historiquement adapté à lire du sombre sur fond clair (le papier, c’est quand même vachement plus vieux que les écrans).

Le mode sombre présente de meilleures performances uniquement dans des espaces peu éclairés.

Certains utilisateur·rices préfèrent le dark mode d’un point de vue purement esthétique. Personnellement, je préfère Youtube ou Figma en dark mode, même si je les consulte souvent dans des endroits bien éclairés. Peut-être parce que j’ai toujours rêvé d’être ninja.

Créer une interface sombre peut également être un choix d’image de marque. Si demain vous refaite le site d’un “restaurant dans le noir” (oui mon exemple est cliché), vous allez sûrement optez pour des teintes sombres, même si le site sera souvent consulté dans des milieux éclairés. On ne va pas passer des heures à lire sur ce site, tout va bien.

Si votre interface propose différents modes, lequel utiliser par défaut ? L’idéal, c’est de s’en remettre au système d’exploitation de l’utilisateur. Ainsi, ses préférences personnelles seront respectées (dépendant notamment de l’heure et donc de la lumière naturelle).

Bien sûr, continuez de lui proposer la possibilité de changer manuellement s’il·elle le souhaite.

Il y a plusieurs subtilités à prendre en compte pour créer un système de couleurs solide. Nous allons les passer en revue.

Si vous assignez des couleurs “primitives” à vos éléments, il faudra les changer une par une en voulant passer au dark mode. En ajoutant un niveau appelé “sémantique”, vous leur attribuez des rôles plutôt que de simples couleurs. Grâce à cette systématisation, vous n’aurez ensuite qu’un mode à switcher.

Pour commencer, créez une collection de “Primitives”. Ce sont vos couleurs de base.

Créez ensuite une collection “Semantic”. Ces variables sont des rôles, qui font appel à vos couleurs de la collection “Primitives”

Définissez deux modes, et attribuez les bonnes primitives. C’est ici que c’est moins simple qu’il n’y paraît. Il ne suffit pas d’inverser les couleurs. Une card sur un fond a besoin d’une teinte plus claire pour paraître plus proche et se détacher. Si on ne fait qu’inverser, en dark mode, la card sera plus foncée que le fond. Il faut donc prévoir et adapter.

Vous ne concevez plus un système de “simples couleurs” mais un système de rôles. Cette méthode a d’ailleurs d’autres bénéfices : meilleure maintenabilité, plus de flexibilité et même langage que vos ami·es développeu·euses. C’est un peu plus long à mettre en place mais permet ensuite plus d’être plus performant.

En dark mode, les couleurs paraissent souvent plus intenses. Il est bon de les ajuster pour obtenir une perception similaire au light mode.

Pensez également à re-vérifier que vos contrastes soient suffisants entre chaque texte et son fond pour des questions d’accessibilité.

En dark mode, les ombres se voient beaucoup moins. Il est donc primordial d’établir des règles hiérarchiques qui ne reposent pas uniquement sur ces dernières. Vous risqueriez de vous retrouver avec ce problème :

Favorisez des changements de fonds ou des contours pour délimiter les zones qui doivent l’être. Ainsi, la délimitation des éléments sera claire peut importe le mode :

Cela dépend de votre produit et de votre contexte d’usage. Les questions à se poser :

Le dark mode n’est pas un bonus marketing. C’est un choix d’expérience.