Dark mode: accessibility, energy and ecoindex — what is actually true

🇫🇷 Lire en français : Dark mode : accessibilité, énergie et éco-index — ce qui est vrai

This morning I switched on dark mode for kimoun.com. Not to follow a trend, and certainly not to claim a green credential: swapping white for black has zero effect on a site’s ecoindex. The real story of dark mode is reading comfort and accessibility — provided it’s done properly. Here’s what it actually changes, what it doesn’t, and how I implemented it without breaking contrast.

Why I switched on dark mode — and why I’m not forcing it on anyone  

Your phone and your computer already have a light/dark preference built into the operating system. The technically correct approach takes a single CSS rule: prefers-color-scheme. The site reads your device’s preference and follows it. If your Android or your Mac is set to dark, kimoun.com displays in dark mode. Otherwise it stays light.

That’s exactly what I did. I’m not imposing a theme: I’m respecting the choice you’ve already expressed at the OS level. This is the first and most commonly ignored rule of dark mode accessibility: leave the decision to the user, because nobody reads under the same conditions.

Energy: real on OLED screens, marginal everywhere else  

  Tip

Dark mode saves energy primarily on OLED screens at high brightness; on a backlit desktop monitor, the saving is negligible.

This is where most articles get it wrong. The energy saving from dark mode is real but tightly conditional on screen type. On an OLED screen, each pixel emits its own light: a black pixel is a pixel switched off. On a backlit LCD — the majority of desktop monitors — the backlight stays on regardless of the displayed colour. Black or white, it draws the same power.

And even on OLED, the magnitude depends on brightness. The Purdue University study (2021) measured a saving of only 3 to 9% at typical indoor brightness (30–50%), but 39 to 47% at 100% brightness. In plain terms: a real benefit for someone checking their phone in full sunlight, an almost invisible effect the rest of the time.

There’s also the persistent idea that dark mode would reduce a site’s carbon footprint. It doesn’t. ÉcoIndex, the French web eco-design benchmark, calculates its score on three criteria: DOM complexity (weighted ×3), number of HTTP requests (×2) and page weight (×1). Colours are not in the formula. Making a site dark does not shift its score by a single point. If you genuinely care about reducing your site’s footprint, the lever is elsewhere: fewer DOM elements, fewer requests, lighter images — which, incidentally, is also what Google’s Core Web Vitals reward.

Accessibility isn’t automatic: what it helps, what it doesn’t  

Dark mode is often described as “more accessible”. That’s half true. It genuinely helps certain people: light sensitivity, migraines, evening reading, certain forms of low vision. But it makes things harder for others.

  Warning

Forcing dark mode on every visitor can penalise people with astigmatism: bright text on a dark background “bleeds” and creates a halo. The practical rule that follows: offer both themes, force neither.

Astigmatism is very common. For those readers, bright text on a dark background becomes blurry, particularly over long paragraphs — the exact opposite of the intended effect. That’s why a serious site doesn’t make the call on behalf of the user: it adapts.

  Note

In 2025, I overhauled the website of a local non-profit in northern Grande-Terre that had been built in dark mode only, “because it looks modern”. Several members, mostly older, couldn’t read long passages. We restored the light theme as the default and kept dark as an option: the feedback reversed immediately.

WCAG AA: contrast must be checked in both themes  

This is the core of the work, and where I draw the line. WCAG 2.2 Level AA sets minimum contrast ratios: 4.5:1 for body text, 3:1 for large text and interface components — buttons, input fields, meaningful icons. These ratios apply to each theme independently.

The classic mistake: audit the light theme, validate it as AA, then cobble together a dark theme using pure white on pure black (too harsh on the eyes) or grey on grey (which fails the test). A dark theme requires the same rigour as a light one.

I have been a certified AccessiWeb accessibility auditor since 2005 — the first person in the French overseas departments to hold that certification at the time, through IPEOS. Concretely, when I aligned the dark theme for kimoun.com, I retested every text/background pair. The light theme was already AA; for the dark one, I calibrated the palette to hold the same 4.5:1 and 3:1 ratios. Both modes are fully AA-compliant on colour contrast. One practical detail worth noting: pure white on pure black is actually too high in contrast and tiring — a slightly softened white on a very dark grey is more comfortable to read and still compliant.

For a small business or a non-profit, accessibility isn’t always a legal requirement — the French RGAA primarily targets the public sector — but it’s a sound practice that widens your audience and strengthens your credibility.

What this means for your site  

Three things to take away. First, respect the user’s choice: read prefers-color-scheme, offer both themes, force neither. Second, check contrast in both themes — a poorly tuned dark mode is less readable than a solid light one. Third, don’t sell dark mode as an environmental gesture: it’s a comfort choice, not a green argument. If genuine web sobriety interests you, we look at page weight and DOM structure, not background colour.

When I build a website, all three points are part of the default specification — not an “accessibility add-on” charged separately. The same rigour is what makes a site visible and built to last.