Dark Mode : Faut-il utiliser le mode sombre sur son site web ?

Les Français ont passé 2h25 en moyenne sur Internet en 2020, soit 15% de temps en plus que l’année précédente, selon la dernière étude de Médiamétrie. Entre télétravail, confinements et couvre-feux, nous sommes donc de plus en plus exposés aux écrans. Dans ces conditions, le mode sombre qui avait déjà le vent en poupe en 2019 semble s’imposer plus que jamais, vu qu’il semble favoriser le confort visuel face aux écrans. Quels sont les véritables avantages du dark mode pour les internautes ? Faut-il adopter le dark mode sur votre site web ? Existe-t-il des cas où cet affichage n’est pas recommandé ? 

À quoi sert le mode sombre des interfaces web ?

Pour rappel, le “mode sombre”, aussi appelé “dark mode” en anglais, se définit comme une configuration visuelle où le contenu apparaît sur un fond noir ou foncé. Le gris relève donc aussi du mode sombre, ou “obscur”. Si beaucoup d’applications et d’interfaces web optent pour ce thème sombre, c’est parce qu’il a plusieurs avantages : 

1/ Le mode sombre réduit la fatigue oculaire, qui croisse d’autant plus que nos yeux sont exposés à la couleur blanche de la majorité des sites web. De nombreuses études, comme l’enquête Effects of Dark mode on visual fatigue and acuity, montrent que la fatigue visuelle apparaît moins rapidement quand la lecture d’un site web se fait en mode obscur. Ce bénéfice s’explique notamment par une moindre exposition à la lumière bleue des écrans. 

2/ Utiliser moins de pixels lumineux, et donc moins de lumière, c’est aussi consommer moins d’énergie. Le mode sombre préserve ainsi l’autonomie des smartphones. Un point important pour vos utilisateurs, quand on sait que la navigation sur mobile a dépassé celle sur ordinateur depuis 2017. Par extension, passer son site web en mode sombre incarne par conséquent également un geste écologique. 

3/ D’un point de vue strictement symbolique, les graphistes utilisent souvent le noir pour associer certaines marques à l’idée de puissance et d’élégance. C’est ce qui explique qu’on retrouve souvent des teintes obscures dans les identités graphiques de marques de luxe ou de produits haut de gamme. 

4/ Le noir rend certains éléments graphiques plus lisibles. Il permet ainsi d’attirer l’attention de l’internaute vers les éléments visuels les plus stratégiques. Appliquer le mode sombre à un site internet améliore effectivement le pouvoir de contraste de la page. Le dark mode met donc l’accent sur le contenu, et fait oublier l’arrière-plan. Pour en avoir un exemple parlant, consultez le paragraphe sur le Pixel 3a de Google de notre article Top 5 des sites UX/UI design. 

Le mode sombre est-il fait pour mon site web ?

Certains sites web ont plus intérêt à recourir au dark mode que d’autres. Il existe notamment deux critères principaux à prendre en compte pour implémenter un thème sombre sur son site : 

• la volonté d’attirer l’attention sur des éléments visuels ;
• l’intérêt pour l’internaute dans un souci d’optimisation UX (User eXperience).

Si votre site internet a pour objectif de valoriser un style graphique ou des capacités de conception web, le mode obscur est tout indiqué. Il montre à vos internautes l’efficacité de votre site web, capable de valoriser visuellement les éléments les plus importants. Le dark mode s’utilise également si vous voulez mettre en avant de jolis visuels produits. 

Quand votre site web repose plus sur son contenu que sur l’originalité de son design ou de ses illustrations, le mode sombre ne s’impose pas nécessairement. Il peut cependant s’avérer très utile si vous développez votre site dans une perspective SXO, qui fait de l’expérience utilisateur un critère de votre référencement naturel. 

Si votre site facilite la navigation de ses utilisateurs avec un mode sombre qui simplifie sa lisibilité, il a de grandes chances de réduire les taux de rebond. Indirectement, le dark mode encourage donc le trafic sur votre site internet, et par conséquent sa crédibilité auprès des moteurs de recherche de Google. 

Opter pour un thème sombre, y compris sous forme d’option, c’est aussi montrer à vos visiteurs que vous vous souciez de leur expérience de navigation. Un critère central dans le contexte de 2021, où la mise à jour Google Page Experience de mai devrait faire de l’ergonomie des pages web un critère de référencement naturel encore plus stratégique qu’avant. 

Besoin d’un autre exemple ? Venez découvrir notre travail sur le site internet de Word of Mouth, où le mode sombre est résolument au service de l’identité de marque. 

Comment s’y prendre ?

Si vous décidez d’opter pour un site internet en mode sombre, ou pour un version dark mode activable par l’internaute, il y a quelques règles à respecter : 

• Assurez-vous que le mode sombre convient à la façon dont vous définissez vos personae. Si vos utilisateurs relèvent principalement d’une audience jeune, mobinaute, qui navigue beaucoup la nuit, le dark mode se prête bien à vos objectifs. 

• L’arrière-plan sombre attire l’œil des internautes sur les éléments visuels de votre site. Vérifiez donc que ceux-ci dépendent d’une palette de couleurs adaptée : ni trop saturée, ni trop lumineuse. Pour rappel, pour que votre site web soit lisible pour des internautes aux capacités visuelles variables, il faut qu’il respecte un niveau de contraste de 4.5 : 1 minimum sur les corps de textes, selon les règles régissant le contraste de la couleur dans les Web Content Accessibility Guidelines.

• Si vous optez pour un option dark mode désactivable, pensez à identifier clairement les icônes du commutateur qui permettent d’en profiter ou de l’éteindre. 

• Testez ! Assurez-vous que tous les éléments de vos pages web, et notamment les textes, restent visibles et lisibles si vous passez en mode obscur. Évaluez cette lisibilité en luminosité maximale et minimale. 

Dans quel cas ne pas utiliser le mode sombre ? 

Bien qu’il soit tendance et recommandé pour diverses raisons liées à l’expérience utilisateur, adopter un mode sombre sur votre site internet n’est pas toujours recommandé. On vous déconseille de recourir au dark mode dans les contextes suivants : 

• Comme le souligne le site britannique Webdesigner Depot à propos du dark mode, évitez le mode obscur si votre cible principale est âgée et a l’habitude des lectures au format papier. Vous risquez de la déstabiliser et de nuire à vos taux de rebond.

• Vous utilisez déjà beaucoup d’éléments graphiques différents sur votre site à fond blanc : textes, visuels, listes déroulantes, paragraphes, chiffres etc. ? Vous allez probablement éprouver de grandes difficultés à trouver un niveau de contraste efficace pour chacun de ces éléments en mode sombre. Votre site s’expose en outre à de nombreuses incohérences entre les deux versions. 

• Votre logo de marque n’est peut-être pas adapté à l’absende fond blanc.

Pour éviter toute erreur, découvrez 5 étapes avant de créer son site internet.

Les web designers de Digital Cover adoptent une approche particulièrement orientée UX design. Pour en savoir plus sur la façon dont nous concevons les sites web de nos clients, nous vous invitons à lire notre page sur les processus de création de notre direction artistique.