SITE INTERNET

Le mode sombre : la nouvelle tendance des affichages numériques

Véritable tendance, le mode sombre séduit la majorité des sites internet, plateformes et logiciels d'aujourd'hui. Avec de nombreux avantages notables, cette configuration se démarque sur différents points. Nous allons vous détailler pourquoi le mode sombre sort de l'ombre. 🌗

Anne-Laure CompainAnne-Laure Compain

Anne-Laure Compain

Web designer chez Snoweb
Publié le 18 mai 2021 (Mise à jour le 8 avril 2022)


De plus en plus apprécié par les internautes, le mode sombre ou « dark mode » en anglais s’est popularisé rapidement ces derniers temps. Offrant un affichage plus discret, cette configuration s’est vulgarisée sur la plupart des applications, des réseaux sociaux, et même des systèmes d’exploitation.

  • Quels sont les atouts de ce mode sombre ?
  • Comment profiter au maximum des bienfaits de cette configuration ?

Réponses dans cet article.


1. Les avantages du mode sombre pour un site internet

Concrètement, le mode sombre est un thème qui propose une interface constituée majoritairement de noir et de gris. Utilisée par les géants du numérique tels que sur Facebook, Snapchat, Linkedin, Twitter, Tik Tok, Netflix et encore Apple, cette configuration présente de nombreux atouts incontournables.

Cependant, attention a bien différencier le mode sombre du mode nuit. En effet, le mode nuit permet de diminuer l'intensité de la lumière bleue sur nos écrans. Alors que le mode sombre lui, va changer les couleurs du site internet ou de l'application.

Ci-dessous, retrouvez un aperçu du site de Snoweb en mode sombre. D'ailleurs, peut-être que certains d'entre vous lisent actuellement cet article en mode sombre !
mode-sombre-site-internet

1.1 L’expérience utilisateur au cœur du sujet

La première force du mode sombre est sa faculté à s’adapter correctement à l’utilisateur. Cette alternative au mode clair permet aux internautes de permuter de thème d’affichage selon leurs envies. Autrement dit, il offre la possibilité de se passer de la version classique à fond blanc qui n’est pas toujours appréciée vers une version plus sombre en un clic.

De plus, la teinte sombre arrive à uniformiser les pages et les couleurs d’un appareil. Ce système permet de :

  • Diminuer la lumière
  • Éliminer la couleur blanche prédominante de la configuration traditionnelle
  • Rester concentré plus longtemps derrière un écran

1.2. Le repos des yeux durant l’utilisation

Après plusieurs heures derrière un écran, on a tous déjà connu cette fatigue oculaire. Le fond blanc du mode clair fatigue les yeux à cause de sa forte intensité en lumière blanche. En pleine nuit, ce constat est encore plus alarmant. Votre écran peut même faire office de lampe tellement que la lumière blanche est forte !

Cela s’explique par la diffusion d’ondes émises contenant une grande quantité de lumière bleu-violet.

Par ailleurs, d’après une recherche de l’université de Toledo aux États-Unis, l’exposition constante à ces ondes peut entraîner la dégénérescence oculaire et l’altération de la rétine...

Ainsi, le changement de thème en mode sombre permet alors d’éviter ces problèmes et de faire reposer ses yeux. En éliminant une grande partie de lumière bleue, qui empêche la production de mélatonines (l'hormone du sommeil), le dark mode permet de lutter correctement contre les troubles de l’endormissement et du sommeil.

1.3. La facilité de lecture en toute circonstance

Avec le mode sombre, les textes et les éléments d'une page deviennent plus lisibles. De plus, étant donné qu'il n'y a pas de blanc sur la page, l’œil fatigue beaucoup moins et peu donc lire plus longtemps.

Mais attention, tout cela dépend des couleurs du site internet. En effet, si le fond sombre est de couleur noire et que le texte est blanc, la lecture ne sera pas du tout confortable. On aura l'impression que le texte bouge ou qu'il devient flou. Un peu plus bas dans cet article, je vous explique comment bien gérer ses couleurs en mode sombre !

De plus, avec le mode sombre, les malvoyants ainsi que les daltoniens ont une meilleure visibilité de l'information. Autrement dit, la lecture d’un contenu devient plus accessible, et à un plus grand nombre.

Attention : point de vigilance pour le choix des nuances de couleurs. Des teintes mal maîtrisées peuvent générer un effet indésirable. Voilà la raison pour laquelle, il est essentiel d’employer des codes classiques de noir, de gris et de bleu par exemple.

1.4. L’impact incontestable sur la consommation d’énergie

On parle ici d'utilisation du mode sombre sur un smartphone, une tablette ou un ordinateur portable. Lors de sa conférence Android Dev Summit en 2018, Google a confirmé que le mode sombre permettrait de réaliser des économies en matière de batterie. D’après cette étude, cette réduction de consommation peut atteindre 60 % de l’énergie électrique totale utilisée par jour.

Autrement dit, moins vous consommer de batterie sur votre appareil et moins vous avez besoin de le recharger ! Ce qui est bon pour notre Planète.

1.5 L’esthétique personnalisable

Le mode sombre peut vite devenir très attractif et capter les regards. En effet, sur un fond noir ou foncé, il devient plus facile de mettre certains contenus colorés en valeur, par effet contraste. Une bonne utilisation des couleurs à la fois simples, basiques et discrètes permet d'apporter une satisfaction visuelle aux internautes.

En outre, le noir est la couleur majoritairement utilisée dans les domaines du luxe et du prestige. On pourrait donc penser qu'un arrière-plan de couleur noir apportera luxe et prestige à son site internet. Mais ce n'est pas si simple ! Le noir ne suffit pas à apporter du luxe, les couleurs secondaires et la typographie jouent un rôle important.

Les avantages du mode sombre
mode sombre expérience utilisateur
Expérience utilisateur
mode sombre repos des yeux
Repos des yeux
mode sombre facilité de lecture
Facilité de lecture
mode sombre impact énergétique
Impact énergétique
mode sombre esthétisme
Esthétisme
mode sombre valorisation du contenu
Valorisation du contenu

2. Les inconvénients du mode sombre sur un site internet

Cependant, le mode sombre a aussi des inconvénients, comme la transmission de certaines émotions ou encore la sensation d'oppression.

2.1 Émotions moins fortes

En terme d'émotions transmissent avec les couleurs, nous avons des classiques :

  • Le orange nous apporte de la joie
  • Le jaune nous fait penser à la chaleur, au soleil et donc aux vacances
  • Le rouge nous rappel l'amour ou l'urgence

Mais attention associée à certaines couleurs leur signification change totalement :

  • Associé au noir, le rouge et le jaune deviennent un danger
  • Le noir ne nous rappel pas que le luxe mais aussi la mort
  • Le violet nous rappel al science fiction, la magie ou encore le mystère

Tout cela pour vous dire qu'il est important de bien choisir ses couleurs pour faire passer le bon message. Vous pouvez avoir l'intention de faire passer un message positif mais il sera ressenti comme un message négatif. Le mode sombre n'est pas bénéfique pour tous les sites internet.

2.2 Sentiment d'oppression

Est-ce que vous vous êtes déjà retrouver dans une pièce avec les murs de couleur sombre ? Si oui, vous savez où je veux en venir ! L'espace devient vite petit, vous sentez que les murs se rapprochent de vous. Il en va de même pour un site internet. Si votre site internet est trop sombre, les internautes ne se sentiront pas à l'aise en le parcourant. C'est pourquoi, il ne faut pas passer tous les éléments de son site internet en couleur foncé !


3. Comment utiliser le mode sombre sur un site internet ?

Il est possible d’utiliser le mode sombre sur une page web, un site internet et sur la plupart des interfaces disponibles. Pour ce faire, deux systèmes distincts peuvent être adoptés. Le premier choix se base sur l’intégration d’un système d’automatisation du site internet en question. Le second, on donne l’opportunité à l'utilisateur de basculer d'un mode à l'autre en installant un sélecteur adapté sur la plateforme.

3.1. Automatiser le changement de thème

Cette solution est très pratique pour une société qui veut toucher le cœur des internautes. Le concept est simple et se base sur les préférences de l’utilisateur. En d’autres termes, si un visiteur utilise un mode sombre sur son navigateur ou sur son appareil, le site internet qu'il consulte va aussi présenter cette configuration. Tout comme cela se passe avec le mode clair, sauf qu'on ne s'en rend pas compte ! Notre appareil (ordinateur, tablette ou smartphone) est configuré de base en mode clair donc tout nous est affiché en mode clair.

Bien entendu, l’expertise d’un bon développeur web est requise pour effectuer ce réglage automatiquement. En effet, ce genre de manipulation nécessite du travail et des compétences adaptées.

Exemple : en optant pour le mode sombre dans les réglages de votre smartphone, certains sites internet peuvent automatiquement apparaître en mode sombre (si le développeur web le gère). Vous pouvez faire l'expérience avec le site de voyage en Laponie finlandaise !

Finlande France TravelVivez l'expérience du mode sombre automatique
gif mode sombre voyage finlande

En optant pour le mode sombre dans les réglages de votre smartphone, de votre navigateur ou de votre ordinateur, certains sites internet peuvent automatiquement apparaître en mode sombre (si le développement web est conçu pour).

3.2. Donner le choix aux internautes

Ce système reste le concept le plus utilisé en ce moment. Pour ce faire, il n’est pas obligatoire de connaître réellement les préférences des visiteurs. Que cela soit pour le mode sombre ou pour la version classique, le mieux est de laisser les internautes faire eux-mêmes leur choix. Dans cette perspective, il suffit d’installer un bouton de défilement ou un curseur pour basculer le thème en mode sombre, et vice versa.

Il est aussi possible de recourir aux deux méthodes pour son site internet. Dans cette voie, on suit les préférences des visiteurs, tout en leur laissant la liberté de changer de configuration à tout instant. L’emploi d’un switch adapté, d’un bouton curseur ou d’un onglet de réglage est donc nécessaire pour ce changement. Cela peut être observé comme sur cet exemple réalisé par Zhenya Karapetyan

switch light dark mode


4. Adopter le mode sombre à son site, quelques conseils

Réseaux sociaux, navigateurs, site internet, et même interface de télévision, le mode sombre est partout dans notre quotidien. Il peut permettre de vous différencier de vos concurrents, mais en respectant certains principes.

4.1. Sombre ou noir, que choisir ?

Le noir est une couleur terne, il vaut mieux privilégier une couleur noire teintée de bleu, de violet ou de vert ou encore du gris foncé pour les arrière-plans de site internet. De plus, le noir augmente le contraste entre deux couleurs et l’œil n'aime pas ça.

Il faut savoir que la couleur sombre fait appel :

  • au luxe et au prestige quand elle est associée à des couleurs comme le doré ou le jaune
  • aux nouvelles technologies quand elle est associée au bleu clair, turquoise, vert clair ou encore violet

4.2. Respecter son identité

L'identité de votre marque contient déjà des nuances sombres ? Parfait ! Il ne vous reste plus qu'à travailler des palettes de couleurs sombre en fonction de ces nuances. Mais comment faire ?

Premièrement, vous devez savoir que les couleurs d'arrière-plan en mode sombre sont souvent :

  • gris foncé
  • bleu foncé
  • violet foncé

Ça, ce sont des classiques qui marchent à tous les coups. Après, rien ne vous empêche d'utiliser un marron ou un vert foncé, mais attention, se sont des palettes de couleur plus compliqué à construire.

Voici un exemple de 4 palettes de couleur sombre :

Gris bleuté

gris bleuté palette couleur sombre

Gris froid

gris froid palette couleur sombre

Gris moyen

gris moyen palette couleur sombre

Gris chaud

gris chaud palette couleur sombre

Néanmoins, si votre identité de marque ne contient pas de couleur sombre et que vous souhaitez absolument avoir un mode sombre sur votre site internet, je vous conseille ceci :

  • Prenez la couleur la plus foncée de votre identité
  • Élargissez sa palette dans des nuances sombres
Utilisez le site Coolors pour le faire, c'est un outil très pratique pour la gestion des couleurs ! Comme sur l'exemple ci-dessous.
palette-couleur-coolors

4.3. Jouer avec le contraste

Selon le W3C, "Le rapport de contraste entre une couleur et son arrière-plan varie de 1 à 21 en fonction de l'intensité de la lumière émise." Le rapport de contraste nous permet de connaître la différence entre deux couleurs. Ce rapport est écrit sous la forme A: A. Il faut savoir que plus il y a de différence entre les deux chiffres et l'intensité de lumière entre les deux couleurs est grande.

Voici ce qui est recommandé en terme de contraste :

TYPE DE TEXTERAPPORT DE CONTRASTE DE COULEUR

Gros textes et graphiques

3 : 1 sur le fond

petit texte

4,5 : 1 en arrière plan

On évite donc de mettre un arrière-plan de couleur noir avec du texte blanc dessus. Ce sera impossible à lire. Optez plutôt pour un gris clair !

4.4. Désaturer vos couleurs

Que fait une couleur trop saturée à côté d'une couleur sombre ? Elle "vibre" ! On a l'impression que les contours de la forme ou du texte bougent, ce n'est donc pas agréable à lire. C'est pourquoi, il faut utiliser des couleurs désaturées mais aussi des couleurs qui s'adaptent avec le sombre.

Par exemple vous aller devoir adapter vos couleurs entre le mode clair et le mode sombre, comme sur l'exemple, regardez ⬇️

difference light dark

5. Conclusion

Le mode sombre est une belle évolution dans le web et sans doute la nouvelle étape pour beaucoup de supports, que ce soit des sites internet ou des réseaux sociaux. Cette nouveauté permet aux utilisateurs de passer plus de temps sur les écrans qu'avant, il faut donc apporter de plus en plus de contenu pertinent afin de les satisfaire.

Je souhaite créermon site internet
En savoir plus

Le sujet des sites internet vous fascine, alors ces articles devraient vous intéresser également.

Inscrivez-vous à notre newsletter sur les sites internet

Recevez les dernières nouveautés et astuces sur les sites internet directement dans votre boite e-mail.

Partager cet article sur les réseaux sociaux

Nos derniers articles sur les sites internet personnalisés

Inscris-toi à notre newsletter et reçois les dernières nouveautés et astuces sur sites internet custom et applications web.

newsletter web app