Dark mode sur un site web : faut-il proposer un mode sombre, et comment le faire proprement ?

Faut-il proposer un dark mode sur un site web ? Pour une TPE ou une PME, oui quand il sert vos lecteurs, non comme effet de style : un mode sombre est un second thème complet, avec ses couleurs, ses contrastes, ses images et son logo, à entretenir à chaque nouvelle page. Notre position chez Inleven : on ne l’impose pas par défaut à une clientèle grand public ; on le propose quand il rend service (lecture longue, consultation du soir, portfolio où l’image prime) et on le construit proprement, ou on s’abstient.

Nos sources : Nielsen Norman Group pour la lecture, l’université Purdue pour la batterie, le critère 3.2 du RGAA pour les contrastes, MDN et web.dev, en français, pour la technique. Aucune de ces sources ne chiffre l’adoption du mode sombre ni son effet sur le référencement : vous n’en trouverez donc pas ici.

Faut-il un mode sombre sur son site internet ?

Pas par défaut si votre public est large ; oui en option, quand il sert le lecteur. Dans sa synthèse du 2 février 2020, Raluca Budiu, de Nielsen Norman Group, conclut qu’en vision normale ou corrigée, on lit en général mieux en mode clair. NN/g déconseille donc le sombre par défaut pour le grand public, mais recommande fortement de laisser chacun basculer, en priorité sur les sites de lecture longue et ceux qu’on consulte souvent.

Le texte de Nielsen Norman Group est net : « à ce stade, nous ne recommandons pas de passer au mode sombre par défaut si votre public cible inclut la population générale. Cela dit, nous recommandons fortement aux designers de permettre aux utilisateurs de passer au mode sombre s’ils le souhaitent » (traduit de l’anglais).

Pourquoi le clair l’emporte ? L’étude de Piepenbrock et ses collègues (Düsseldorf, revue Ergonomics, 2013) a comparé deux groupes d’adultes sans maladie des yeux, âgés de 18 à 33 ans et de 60 à 85 ans. Le mode clair gagne sur toutes les mesures, tests d’acuité comme exercices de relecture, avec un écart plus faible chez les plus âgés. Côté fatigue, aucune différence significative. La même équipe a montré que l’avantage du clair grandit quand la police rétrécit, et que les participants ne percevaient aucune différence de lisibilité alors qu’ils lisaient mieux en clair : votre impression ne suffit pas à trancher.

NN/g donne pourtant trois raisons de proposer l’option : un effet possible du clair à long terme (une étude de Tübingen, en 2018, suggère un lien avec la myopie, mais sur 7 personnes seulement, trop peu pour conclure), la meilleure lecture de certaines personnes malvoyantes, la simple préférence. Un site d’usage fréquent devrait envisager l’option ; les sites de lecture longue, liseuses, magazines ou actualité, devraient l’offrir, idéalement sur toutes leurs pages.

Pour un site de TPE ou de PME, cela donne la grille ci-dessous ; la dernière colonne est notre recommandation, pas un résultat d’étude.

Deux cas pour fixer les idées. Sur un site de photographe, la galerie gagne à s’afficher sur fond sombre : la photo prend toute la lumière, et les études citées par NN/g portent sur la lecture de texte, pas sur le regard posé sur une image. Sur un site d’artisan, le visiteur cherche un numéro et un formulaire de devis : le clair suffit, un second thème doublerait l’entretien pour rien.

Le dark mode est-il meilleur pour l’accessibilité ?

Pour certaines personnes, oui ; pour la majorité, non. NN/g rapporte que des personnes atteintes de cataracte ou de troubles proches peuvent mieux lire en mode sombre, alors qu’en vision normale le clair l’emporte. Côté couleurs, la règle qui compte est le contraste : le RGAA exige au moins 4,5:1 pour le texte courant et 3:1 pour le gros texte, seuils à viser dans le thème sombre comme dans le clair.

L’indice est ancien. Legge (université du Minnesota, 1985) explique la préférence de certaines personnes malvoyantes pour le sombre par la diffusion de la lumière dans des milieux oculaires troubles. Dans son étude, les 7 participants concernés lisaient tous plus vite en mode sombre, tandis que ceux dont la vision centrale était altérée n’étaient pas affectés. Deux réserves : 7 personnes, c’est un indice, pas une preuve ; et NN/g rappelle que ces mesures ont été faites sur des écrans cathodiques, plus sujets au scintillement en clair, ce qui a pu biaiser les résultats.

Le seuil, lui, est écrit. Le critère 3.2 du RGAA, le référentiel général d’amélioration de l’accessibilité, fixe le rapport de contraste entre un texte et son arrière-plan :

• texte normal de moins de 24 px, ou texte gras de moins de 18,5 px : 4,5:1 au moins ;
• texte normal de 24 px et plus, ou texte gras de 18,5 px et plus : 3:1 au moins.

Le RGAA ne parle pas de mode sombre et admet une alternative : un mécanisme qui affiche le texte au contraste requis. Un thème sombre trop pâle pourrait donc s’abriter derrière le bouton qui ramène au clair, mais il renverrait vers le clair précisément les lecteurs qui avaient besoin du sombre. Notre règle : chaque thème passe le test seul.

Le piège est concret. Prenons un bleu d’accent, #1d4ed8. Sur un fond presque blanc (#fafafa), il atteint 6,42:1 et passe. Sur un fond anthracite (#141414), il tombe à 2,75:1 et échoue, même pour un gros titre. Calcul fait avec la formule de contraste des WCAG, auxquelles renvoie le RGAA. Une couleur validée en clair ne prouve rien en sombre.

Le mode sombre économise-t-il la batterie des smartphones ?

Un peu, sur écran OLED, et surtout quand la luminosité est forte. L’étude de Pranab Dash et Y. Charlie Hu (université Purdue, conférence MobiSys 2021) mesure en moyenne 3 à 9 % d’énergie économisée à 30-50 % de luminosité, et 39 à 47 % à pleine luminosité. Or la luminosité automatique reste autour de 30 à 40 % en intérieur, selon Purdue : au quotidien, le gain passe largement inaperçu.

Le communiqué de Purdue du 28 juillet 2021 le dit sans détour : « le mode sombre a peu de chances de faire une grande différence sur l’autonomie de la batterie, vu la façon dont la plupart des gens utilisent leur téléphone au quotidien » (traduit de l’anglais).

Le périmètre compte. Les chercheurs ont mesuré 60 secondes d’activité dans six applications Android parmi les plus téléchargées de Google Play (Google Maps, Google News, Téléphone, Agenda, YouTube et Calculatrice), sur quatre téléphones : Pixel 2, Moto Z3, Pixel 4 et Pixel 5. Ce sont des applications, pas des sites web : appliquer ces chiffres à votre site est une extrapolation que l’étude ne fait pas. Le gain dépend aussi de l’écran : un écran OLED, probable sur les téléphones sortis après 2017 selon Purdue, consomme moins sur les pixels sombres ; d’après l’explication de Purdue, c’est l’absence de rétroéclairage qui fait ce gain, et le communiqué ne mesure pas les écrans LCD.

Un détail parlant : sur un Pixel 5, Google News consomme autant en clair à 20 % de luminosité qu’en sombre à 50 %. Le communiqué en tire un usage : si le sombre vous repose les yeux mais qu’il faut monter la luminosité pour bien voir, la batterie n’en souffre pas davantage. Pour vous, la batterie de vos visiteurs n’est donc pas une raison d’imposer le sombre ; NN/g elle-même écrit seulement que les écrans sombres « pourraient » prolonger l’autonomie (traduit de l’anglais).

Comment ajouter un mode sombre à un site web ?

Avec deux outils du langage CSS. La requête média prefers-color-scheme lit le réglage clair ou sombre de l’appareil ; la propriété color-scheme indique au navigateur quels thèmes votre page sait afficher. Selon MDN, la première est disponible sur tous les navigateurs depuis janvier 2020, la seconde depuis janvier 2022. Le vrai travail est ailleurs : définir un second jeu de couleurs complet, puis le mesurer page par page.

En quatre étapes :

1. Nommer les couleurs par leur rôle. Des variables CSS comme --fond, --texte ou --accent, plutôt que --bleu ou --jaune. Thomas Steiner le conseille sur web.dev : une couleur d’accent jaune en clair ne le sera peut-être plus en sombre.
2. Écrire le clair par défaut, le sombre dans la requête média. C’est l’usage courant selon MDN ; la valeur light couvre aussi le visiteur sans préférence exprimée.
3. Déclarer les deux thèmes au navigateur. color-scheme: light dark sur la racine adapte les couleurs par défaut des champs de formulaire et des barres de défilement. La balise meta du même nom, placée dans le head avant toute feuille de style, aide à éviter les flashs au chargement (MDN).
4. Éviter le blanc pur. En sombre, web.dev conseille un texte d’un blanc à peine cassé, comme rgb(250, 250, 250), pour que la couleur ne soit pas trop vive.

<meta name="color-scheme" content="light dark">

:root {
  color-scheme: light dark;
  --fond: #fafafa;
  --texte: #1c1c1c;   /* 16,33:1 sur le fond */
  --accent: #1d4ed8;  /* 6,42:1 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #141414;
    --texte: #fafafa;   /* 17,65:1 */
    --accent: #8ab4f8;  /* 8,74:1 ; le bleu du clair tomberait à 2,75:1 */
  }
}

body {
  background: var(--fond);
  color: var(--texte);
}

S’abstenir se fait proprement, aussi. Si vous gardez un seul thème clair, dites-le au navigateur : selon MDN, color-scheme: only light sur la racine peut désactiver les remplacements de couleurs du thème sombre automatique. Sans cette ligne, certains navigateurs peuvent assombrir vos pages eux-mêmes, avec des couleurs que vous n’avez pas choisies.

Comment adapter les images et le logo en mode sombre ?

Selon leur nature. Les photos s’atténuent avec un filtre CSS ou se remplacent par une version dédiée grâce à l’élément picture ; les icônes et un logo d’une seule couleur, en SVG, prennent la couleur du texte avec currentColor ; un logo en plusieurs couleurs reçoit un fichier par thème. Sur web.dev, Thomas Steiner rapporte que la majorité des personnes interrogées dans ses études préfèrent des images un peu moins vives et lumineuses en mode sombre.

Les photos. web.dev applique en sombre un léger filtre à toutes les images qui ne sont pas des SVG, une désaturation de moitié (grayscale(50%)), réglable ou désactivable. L’inversion des couleurs, elle, est à proscrire pour les photos : les utilisateurs ne l’apprécient pas, rappelle web.dev, alors qu’elle fonctionne bien pour la plupart des icônes. Quand le filtre ne suffit pas, c’est une question de direction artistique : une autre image pour chaque thème, choisie par l’attribut media.

<picture>
  <source srcset="atelier-soir.webp" media="(prefers-color-scheme: dark)">
  <img src="atelier-jour.webp" alt="L'atelier vu depuis l'entrée">
</picture>

Le logo et les icônes. Trois solutions, de la plus légère à la plus fidèle :

• un SVG intégré dans la page, dont les tracés utilisent currentColor : il prend la couleur du texte, donc celle du thème (web.dev) ;
• un fichier SVG qui contient sa propre requête prefers-color-scheme : appelé par une balise img, il suit le jeu de couleurs de la page qui l’affiche (MDN) ;
• deux fichiers, un par thème, servis par l’élément picture, quand le logo porte plusieurs couleurs de marque.

À éviter : inverser un logo en couleurs avec un filtre. L’inversion retourne aussi les teintes ; un bleu marine pur (#000080) inversé devient un jaune pâle (#ffff7f). Le RGAA exclut le texte d’un logo du critère de contraste, mais ce n’est pas une raison de le laisser disparaître sur fond noir.

La barre du navigateur. Depuis Chromium 93 et Safari 15, la balise meta theme-color accepte un attribut media : une couleur pour le clair, une pour le sombre (web.dev).

<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fafafa">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#141414">

Comment laisser le visiteur choisir et éviter le flash au chargement ?

Suivez d’abord le réglage de l’appareil, puis proposez un bouton qui le remplace et retient le choix d’une visite à l’autre. C’est le modèle que décrit Thomas Steiner sur web.dev : respecter au départ le signal de prefers-color-scheme, puis laisser le visiteur passer outre. Contre le flash d’un thème clair affiché avant le sombre, MDN conseille la balise meta color-scheme dans le head, avant toute feuille de style.

Pourquoi le réglage de l’appareil d’abord ? Parce que, rappelle NN/g, « il est peu probable que les gens changent le mode d’affichage d’un site web pris au hasard » (traduit de l’anglais). NN/g conseille aussi d’utiliser l’interface de programmation (API) de mode sombre du système quand il en offre une, comme iOS. Le bouton sert ensuite les habitués, et ceux qui gardent leur téléphone en sombre mais préfèrent lire votre site en clair : pour la plupart des utilisateurs, rappelle web.dev en citant la documentation d’Apple, le mode sombre est un choix esthétique.

Ce bouton s’écrit à la main ou s’installe tout fait : Thomas Steiner a publié l’élément <dark-mode-toggle>, personnalisable, qui peut mémoriser le choix.

Pour un chargement propre, trois gestes :

1. La balise meta color-scheme dans le head, avant toute feuille de style (MDN).
2. Des feuilles de thème chargées selon le media, par exemple <link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)">. La feuille qui ne correspond pas au thème actif se télécharge avec la priorité la plus basse et ne concurrence pas ce dont la page a besoin (web.dev).
3. Le choix mémorisé appliqué avant le premier affichage. Notre conseil : un court script placé dans le head, avant les feuilles de style, lit le choix enregistré et le pose sur la page. Placé en bas de page, il arrive après le premier affichage, et le mauvais thème peut apparaître un instant.

<script>
  const theme = localStorage.getItem('theme');
  if (theme) document.documentElement.dataset.theme = theme;
</script>

Votre feuille de style prévoit alors une règle par valeur de data-theme, qui l’emporte sur la requête média.

Avant de mettre en ligne : cinq vérifications

1. Chaque paire de couleurs mesurée dans les deux thèmes : 4,5:1 pour le texte courant, 3:1 pour le gros texte.
2. Le logo et les icônes nets sur les deux fonds, sans couleurs de marque inversées.
3. Les photos atténuées ou remplacées, jamais inversées.
4. Aucun flash clair quand on recharge une page en mode sombre.
5. Le choix du bouton retenu après rechargement et d’une page à l’autre.

Cette décision se prend avant le premier dessin. Dans notre méthode, le brief du premier jour pose le ton et les premières références visuelles : c’est l’endroit pour choisir entre un second thème et un seul thème irréprochable. Si vous préparez un site neuf, posez la question dès le brief de votre création de site web : un second thème se décide à ce moment-là. Pour situer le reste, le pack Essentiel, à 990 € en une fois pour la première année, comprend 5 pages dessinées sur mesure, hébergement, domaine et sécurité compris ; le détail figure sur notre offre.