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é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 !

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.

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 !

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

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é

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 :

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 ⬇️