Sommaire

• Quelle couleur de thème utilisez-vous ?
• Le mode que j’utilise
• La fatigue des yeux
• Avantages du mode sombre
• Avantages du mode clair
• Comment implémenter un bon mode sombre ?
• Les sites et outils à connaitre
• Mes recommandations
• FAQ

Quelle couleur de thème utilisez-vous ?

Lorsque vous entrez des lignes de code, rédigez un rapport ou lisez un livre numérique, le faites-vous sur un fond clair ou un fond foncé ? Chacun a ses préférences et c’est très bien ainsi. Cependant, cette vidéo n’a pas pour but de créer un débat, mais plutôt de vous informer sur les faits scientifiques que vous devez connaître pour votre santé et pour bien implémenter le mode sombre dans vos designs graphiques.

Le mode que j’utilise

J’utilise au quotidien et je code exclusivement sur un fond clair. Cela n’a pas toujours été le cas. Comme la majorité des développeurs, j’ai utilisé un éditeur de code en mode sombre pendant de nombreuses années, principalement par mimétisme, par habitude sociale et parce que ça fait toujours plus cool.

La fatigue des yeux

Mais au fil des années, en fin de journée, même avec des lunettes adaptées, mes yeux étaient fatigués au point de voir flou et de ne plus savoir lire du tout. J’en ai parlé à mon ophtalmo, qui a soulevé trois points intéressants :

Avantages du mode sombre

Le premier est que si les appareils modernes proposent tous désormais un mode sombre, c’est pour diminuer la luminosité produite par les écrans, ce qui a un impact sur la durée de vie de la batterie et améliore notre confort dans une pièce sombre où l’écran vient nous éblouir la figure. Cela permet également de diminuer la quantité de lumière bleue émise, reconnue pour nous tenir éveiller et avoir un impact sur la qualité de notre sommeil.

Avantages du mode clair

Le deuxième point intéressant est que même si un thème sombre présente tous les avantages énoncés précédemment, d’un point de vue physique, il est beaucoup plus facile et moins fatigant pour l’œil de lire un texte sur un fond clair. La première raison pour laquelle il est moins fatigant de lire du texte sur un fond clair est la mise au point. Dans un environnement lumineux, la pupille doit se contracter pour laisser passer moins de lumière, ce qui a pour effet d’augmenter notre champ de vision et de rendre l’ensemble de l’image plus nette.

À l’inverse, en mode sombre, les pupilles doivent se dilater pour laisser passer plus de lumière, ce qui a pour conséquence de réduire le champ de vision. Nos yeux doivent donc travailler plus pour faire le point sur chaque mot du texte affiché.

La deuxième raison est que lorsque la luminosité baisse, un effet de halo se produit et peut laisser une traînée sur les contours du texte, créant ainsi une sorte d’ombre floue autour des lettres. Cela a pour conséquence de rendre la lecture plus difficile, d’autant plus pour les personnes astigmates.

Enfin, il y a la question du contraste. Avoir un bon contraste est aussi, si ce n’est pas plus important que le choix d’un fond clair ou foncé. Le contraste, c’est la différence entre deux couleurs. Si la différence est trop faible, comme un texte noir sur du bleu foncé par exemple, la lecture sera difficile. Tout comme ce sera également le cas pour un contraste trop fort, comme du texte blanc sur un fond noir.

Comment implémenter un bon mode sombre ?

Maintenant que nous savons que le contraste et la luminosité jouent un rôle essentiel sur la lisibilité d’un texte, il est de notre responsabilité, en tant que développeurs web, de proposer un mode sombre correctement implémenté pour nos projets. Si vos utilisateurs savent mieux lire le texte de votre site, ils resteront plus longtemps et le site générera plus de revenus ou de ventes, c’est logique.

Les sites et outils à connaitre

Je vous recommande vivement de faire l’effort de parcourir la documentation produite par Google à propos de son Material Design, ainsi que celle d’Apple sur les couleurs et le mode sombre. Vous y apprendrez beaucoup sur l’importance du contraste et vous verrez que vos designs web évolueront énormément. Ces documents vous donnent même des palettes de couleurs toutes faites que vous pouvez directement utiliser, sans devoir réinventer la roue.

Si vous utilisez Tailwind CSS, je vous recommande l’outil Nightwind, qui est un plugin vous permettant de générer automatiquement un mode sombre adapté à vos couleurs existantes. Et sachez que le plugin officiel « typography » vient par défaut avec la classe « prose-invert » qui ajoute le mode sombre à la palette de couleurs de base.

Mes recommandations

Pour votre environnement de développement, si vous débutez la programmation ou utilisez un thème sombre uniquement pour faire comme les autres, je vous invite vraiment à tester un fond clair pendant quelques jours. J’ai d’ailleurs mis le lien en description de la vidéo pour vous permettre de télécharger le thème que j’utilise et que j’ai créé sur mesure au fil des années. Allez-y, téléchargez-le et voyez par vous-même si vos yeux sont moins fatigués en fin de journée. Je peux vous dire que j’ai personnellement senti la différence en revenant à un thème clair.

FAQ