Dark mode : accessibilité, énergie et éco-index — ce qui est vrai
🇬🇧 Read in English : Dark mode: accessibility, energy and ecoindex — what is actually true
Ce matin, j’ai activé le mode sombre sur kimoun.com. Pas pour suivre la tendance, et surtout pas pour m’offrir un vernis « écolo » : afficher du noir à la place du blanc ne change rien à l’éco-index d’un site. Le vrai sujet du dark mode, c’est le confort de lecture et l’accessibilité — à condition de le faire proprement. Voici ce qu’il change vraiment, ce qu’il ne change pas, et comment je l’ai posé sans casser le contraste.
Pourquoi j’ai activé le dark mode — et pourquoi je ne l’impose à personne
Votre téléphone et votre ordinateur ont déjà un réglage clair/sombre, au niveau du système. La bonne approche, techniquement, tient en une règle de CSS : prefers-color-scheme. Le site lit la préférence de votre appareil et s’y aligne. Si votre Android ou votre Mac est en sombre, kimoun.com s’affiche en sombre. Sinon, il reste clair.
C’est exactement ce que j’ai fait. Je n’impose pas un thème : je respecte le choix que vous avez déjà exprimé au niveau de l’OS. C’est la première règle d’accessibilité du dark mode, et la plus souvent oubliée : laisser la main à l’utilisateur, parce que personne ne lit dans les mêmes conditions.
L’énergie : vrai sur écran OLED, marginal ailleurs
Astuce
Le dark mode économise de l’énergie surtout sur les écrans OLED à forte luminosité ; sur un écran de bureau rétroéclairé, le gain est négligeable.
C’est là que la plupart des articles racontent n’importe quoi. Le gain énergétique du mode sombre est réel, mais étroitement conditionné par le type d’écran. Sur un écran OLED, chaque pixel émet sa propre lumière : un pixel noir est un pixel éteint. Sur un écran LCD rétroéclairé — la majorité des écrans de bureau — le rétroéclairage reste allumé quelle que soit la couleur affichée. Noir ou blanc, il consomme pareil.
Et même sur OLED, l’ampleur dépend de la luminosité. L’ étude de l’université Purdue (2021) a mesuré une économie de seulement 3 à 9 % à une luminosité d’intérieur (30-50 %), mais 39 à 47 % à 100 % de luminosité. Autrement dit : un vrai gain pour qui consulte son téléphone en plein soleil, un effet quasi invisible le reste du temps.
Reste l’idée tenace que le dark mode « allégerait » l’empreinte d’un site. Non. L’ éco-index, la référence française d’éco-conception, calcule sa note sur trois critères : la complexité du DOM (pondérée ×3), le nombre de requêtes HTTP (×2) et le poids de la page (×1). Les couleurs n’y figurent pas. Passer un site en noir ne déplace pas son score d’un point. Si vous voulez un site réellement sobre, le levier est ailleurs : moins d’éléments, moins de requêtes, des images plus légères — ce qui, au passage, est aussi ce que récompensent les Core Web Vitals de Google.
L’accessibilité n’est pas automatique : ce qu’il aide, ce qu’il gêne
On présente souvent le dark mode comme « plus accessible ». C’est à moitié vrai. Il aide réellement certaines personnes : sensibilité à la lumière, migraines, lecture le soir, certaines basses visions. Mais il en gêne d’autres.
Attention
Forcer le mode sombre à tout le monde peut pénaliser les personnes astigmates : le texte clair sur fond sombre « bave » et crée un effet de halo. La règle qui en découle : proposer les deux thèmes, n’en imposer aucun.
L’astigmatisme est très répandu. Pour ces lecteurs, un texte clair sur fond foncé devient flou, particulièrement sur les paragraphes longs. C’est exactement l’inverse de l’effet recherché. C’est pour ça qu’un site sérieux ne tranche pas à la place de l’utilisateur : il s’adapte.
Remarque
En 2025, j’ai repris le site d’une structure associative du nord Grande-Terre conçu uniquement en thème sombre, « parce que ça fait moderne ». Plusieurs membres, plutôt âgés, n’arrivaient pas à lire les textes longs. On a rétabli le thème clair par défaut et laissé le sombre en option : les retours se sont inversés.
WCAG AA : le contraste se vérifie dans les deux thèmes
C’est le cœur du métier, et c’est là que je ne transige pas. Les critères WCAG 2.2 niveau AA fixent des ratios de contraste minimaux : 4,5:1 pour le texte courant, 3:1 pour le grand texte et les composants d’interface — boutons, champs, icônes porteuses de sens. Ces ratios valent dans chaque thème, séparément.
L’erreur classique : auditer le thème clair, le valider AA, puis bricoler un thème sombre en collant du blanc pur sur du noir pur (trop dur pour les yeux) ou du gris sur du gris (qui échoue au test). Un thème sombre se règle aussi rigoureusement qu’un thème clair.
Je suis évaluateur accessibilité certifié AccessiWeb depuis 2005 — le premier des départements d’outre-mer à l’époque, via IPEOS. Concrètement, quand j’ai aligné le thème sombre de kimoun.com, j’ai re-testé chaque paire texte/fond. Le thème clair était déjà AA ; pour le sombre, j’ai calé la palette pour tenir les mêmes 4,5:1 et 3:1. Les deux modes sont conformes AA sur les couleurs. Détail utile au passage : le blanc pur sur noir pur est en réalité trop contrasté et fatigant — un blanc légèrement adouci sur un gris très foncé est plus confortable et reste conforme.
Pour une TPE ou une association, l’accessibilité n’est pas toujours une obligation légale — le RGAA vise d’abord le secteur public — mais c’est une bonne pratique qui élargit votre audience et soigne votre image.
Ce que ça veut dire pour votre site
Trois choses à retenir. D’abord, respectez le choix de l’utilisateur : lisez prefers-color-scheme, proposez les deux thèmes, n’en forcez aucun. Ensuite, vérifiez le contraste dans les deux thèmes — un dark mode mal réglé est moins lisible qu’un bon thème clair. Enfin, ne vendez pas le dark mode comme un geste écologique : c’est un choix de confort, pas un argument vert. Si la sobriété vous intéresse vraiment, on regarde le poids et la structure des pages, pas la couleur du fond.
Quand je construis un site, ces trois points font partie du cahier des charges par défaut — pas d’une option « accessibilité » facturée à part. C’est la même exigence qui fait qu’un site se voit et tient dans le temps.