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

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é par les géants du numérique tels que Facebook, Snapchat, LinkedIn, Twitter, TikTok, Netflix et même Apple, cette configuration présente de nombreux atouts incontournables.

Cependant, attention à 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 !

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

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

De plus, le thème sombre permet d’uniformiser les pages et les couleurs d’un appareil. Ce système permet de :

• Réduire la luminosité
• Éliminer la prédominance du blanc dans la configuration traditionnelle
• Rester concentré plus longtemps devant 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 l’intensité élevée de la lumière blanche. En pleine nuit, ce constat est encore plus alarmant. Votre écran peut même faire office de lampe, tant 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 d’éviter ces problèmes et de reposer les yeux. En éliminant une grande partie de la lumière bleue, qui empêche la production de la mélatonine (l’hormone du sommeil), le mode sombre permet de lutter correctement contre les troubles de l’endormissement et du sommeil.

1.3. La facilité de lecture en toutes circonstances

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 peut 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 à 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 de l’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 consommez de batterie sur votre appareil, moins vous aurez 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 de 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 noire 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.

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 termes d’émotions transmises par les couleurs, nous avons des classiques :

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

Mais attention : associées à certaines couleurs, elles changent totalement de signification :

• Associés au noir, le rouge et le jaune deviennent un danger.
• Le noir ne nous rappelle pas que le luxe, mais aussi la mort.
• Le violet nous rappelle la 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

Vous vous êtes déjà retrouvé dans une pièce aux murs sombres ? Si oui, vous savez où je veux en venir ! L’espace devient vite étroit : vous avez l’impression 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 votre site internet en couleur foncée !

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

Il est possible d’utiliser le mode sombre sur une page web, sur un site internet et sur la plupart des interfaces disponibles. Pour ce faire, deux systèmes distincts peuvent être adoptés. Le premier consiste à intégrer un système d’automatisation sur le site internet en question. Le second consiste à donner à l’utilisateur la possibilité 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, par défaut, configuré 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 !

3.2. Donner le choix aux internautes

Ce système demeure le plus utilisé à l’heure actuelle. Pour ce faire, il n’est pas nécessaire de connaître réellement les préférences des visiteurs. Que ce soit pour le mode sombre ou pour la version classique, il est préférable de laisser les internautes choisir eux-mêmes. Dans cette perspective, il suffit d’installer un bouton bascule ou un curseur pour basculer le thème en mode sombre et inversement.

Il est aussi possible de recourir aux deux méthodes sur son site Internet. Dans cette optique, on suit les préférences des visiteurs tout en leur laissant la liberté de modifier la configuration à tout moment. L’emploi d’un switch adapté, d’un bouton à curseur ou d’un onglet de réglage est donc nécessaire pour ce changement. On peut l’observer sur cet exemple réalisé par Zhenya Karapetyan

4. Adopter le mode sombre sur son site : quelques conseils

Réseaux sociaux, navigateurs, sites internet et même interfaces de télévision, le mode sombre est partout dans notre quotidien. Il peut vous permettre de vous différencier de vos concurrents, à condition de respecter certains principes.

4.1. Sombre ou noir : que choisir ?

Le noir est une couleur terne; il vaut mieux privilégier un noir teinté de bleu, de violet ou de vert, ou encore un gris foncé pour les arrière-plans d’un 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 évoque :

• le luxe et le prestige quand elle est associée à des couleurs comme le doré ou le jaune
• les nouvelles technologies quand elle est associée au bleu clair, au turquoise, au vert clair ou encore au 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 sombres 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, ce sont des palettes de couleurs plus compliquées à construire.

Voici un exemple de 4 palettes de couleurs sombres :

Gris bleuté

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 s’écrit sous la forme A : A. Il faut savoir que plus la différence entre les deux chiffres est grande, plus l’intensité lumineuse entre les deux couleurs est importante.

Voici ce qui est recommandé en termes de contraste :

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 au mode sombre.

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