Dark Mode on a Service Website: What the Research Supports

Dark mode often enters a website project as a single line in the brief: “Can we have dark mode?” It sounds like a toggle. In practice it is a second color system, with its own contrast checks, image treatments, and form styles, and every future page has to work in both.

Before a business commits to that cost, it helps to know what dark mode does and does not deliver. This article looks at controlled reading research on light and dark text, battery measurements on OLED phones, and the two CSS features from the World Wide Web Consortium (W3C) that let a site respond to a visitor’s preference, then turns them into a practical decision for service websites.

---

Why dark mode requests reach service websites

Phones and desktop operating systems now let people choose a light or dark appearance for the whole device. Once someone has made that choice, a bright white website can feel out of place at night, and clients notice. The request is reasonable; the question is what it should become.

Two terms make the discussion precise. Display polarity describes the relationship between text and background: positive polarity means dark text on a light background, and negative polarity means light text on a dark background. Dark mode is a product feature that switches an interface to negative polarity, usually in response to a system setting.

What goes wrong when dark mode is treated as a toggle

1. Colors are inverted, not designed. Brand colors chosen for a white page can lose contrast or look harsh on a near-black one.
2. Assets break. Logos with dark lettering, screenshots, and illustrations with transparent backgrounds can disappear against a dark surface.
3. Embedded content clashes. Maps, booking widgets, and video players keep their own colors, leaving bright rectangles inside a dark page.

---

What the reading research measured

The strongest claim made for dark mode is that it is easier to read. Controlled studies point the other way. In a 2013 study published in Ergonomics, Cosima Piepenbrock, Susanne Mayr, Iris Mund, and Axel Buchner of Heinrich-Heine-Universität Düsseldorf tested 84 younger adults (aged 18 to 33) and 85 older adults (aged 60 to 85). Each participant was randomly assigned to a single polarity, then completed a visual acuity test and a timed proofreading task, searching short texts for spelling and grammar errors.

Both age groups performed better with dark text on a light background, on acuity and on proofreading. Reading rate was similar in both conditions, so the advantage was not people trading speed for accuracy. Questionnaires on eyestrain, headache, and mood showed no reliable differences between polarities. The authors recommend presenting dark characters on a light background regardless of the audience’s age.

How brightness produces the effect

The explanation the authors give is optical, not habitual. A light page emits more light, so the pupil contracts. A smaller pupil reduces spherical aberration and increases depth of field, which sharpens the image on the retina. In the experiment, white screen elements measured 350 cd/m² (candelas per square meter, a unit of luminance) against 1 cd/m² for black ones.

An earlier study by Buchner, Mayr, and Brandt (2009), summarized in the same paper, supports this mechanism: when light-on-dark and dark-on-light displays were matched for overall luminance, the polarity advantage in proofreading disappeared, and the brighter displays did better. Familiarity with dark-on-light text appears to play little or no role.

Where the finding stops

The dark-text advantage was smaller for older adults on the acuity test (effect sizes of d = 0.58 versus d = 2.17 for younger adults), which the authors attribute to glare from light scattering inside the aging eye. The study also excluded people with clinically relevant cataracts or other eye disease. The paper reports earlier work by Legge and colleagues (1985) in which low-vision readers with cloudy ocular media read 10 to 15% better with light text on a dark background.

That is the real case for dark mode. It does not make text more readable for most people, but it can matter a great deal for some visitors, and people who prefer it have usually chosen it for a reason. The research supports offering a choice rather than imposing either polarity.

---

The battery argument is smaller than it sounds

Dark mode is often promoted as a battery saver. On OLED (organic light-emitting diode) screens, which light each pixel individually, darker pixels do draw less power. The size of the effect depends heavily on brightness.

Pranab Dash and Y. Charlie Hu of Purdue University measured this for a paper presented at the ACM MobiSys conference in 2021. They recorded 60 seconds of activity in six Google Android apps on four OLED phones (Pixel 2, Moto Z3, Pixel 4, and Pixel 5). At 30 to 50% screen brightness, switching from light to dark mode saved only 3 to 9% of power on average. At 100% brightness, the average saving rose to 39 to 47%. Purdue’s release notes that auto-brightness indoors tends to sit around 30 to 40%.

The study measured native apps, not websites, so any website estimate is an inference. A visitor reading a service page for a few minutes, usually indoors, is close to the low-brightness case. Battery savings are a weak reason to build dark mode for a marketing site, and a poor claim to make in its favor.

---

How browsers negotiate a color scheme

If a dark theme is worth offering, the web platform already has the right mechanism. Two W3C CSS features divide the work.

prefers-color-scheme reads the visitor’s preference

The prefers-color-scheme media feature, defined in the Media Queries Level 5 Working Draft (19 February 2026), reports light or dark. The detail designers miss is that light also covers visitors who have expressed no preference at all; they receive the web’s light default. The specification suggests writing styles as dark and not dark, so that any future values, such as a possible sepia option, still land in one of the two blocks.

Support is broad. Can I Use data, as of October 2026, shows full support in 97.15% of tracked browser usage, beginning with Chrome 76, Firefox 67, Safari 12.1, and iOS Safari 13. The feature only works where the operating system or browser offers a light/dark setting.

color-scheme tells the browser what the page supports

Your CSS cannot restyle everything on the screen. The CSS Color Adjustment Module Level 1 (a Candidate Recommendation Snapshot dated 16 December 2025) defines the color-scheme property, which tells the browser which schemes a page or element is designed for. The browser matches that against the visitor’s preference and adjusts the parts it controls: default form control colors, scrollbars, spellcheck underlines, and the page canvas behind your content.

The specification also explains why browsers will not do this by themselves: many pages were written before color schemes existed, and automatic changes could produce unreadable contrast. Beyond that short list, user agents generally leave page colors alone. Declaring support is the site’s job.

A minimal setup looks like this:

:root {
  color-scheme: light dark;
  --surface: #ffffff;
  --text: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #121212;
    --text: #e8e8e8;
  }
}

The HTML specification defines a matching document-level declaration, <meta name="color-scheme" content="light dark">, which sets the page’s supported color schemes in the markup itself. Contrast for every color pair still has to be checked in each theme; the property only hands the browser’s own interface the right palette.

“Dark mode is not an inverted stylesheet. It is a second set of design decisions, and it deserves the same review as the first.”
— Windware Studio Practice Note

---

Should your service website offer dark mode?

The evidence suggests a simple order of priorities: make the light theme excellent first, then add dark mode where the audience and budget justify it.

Factor	Leans toward light only	Leans toward adding dark mode
Audience	Short visits by prospective clients	Repeat users, evening use, or a technical audience that expects it
Content	Photography-led pages and brand-color-heavy layouts	Text and documentation, dashboards, client portals
Embedded tools	Many third-party widgets that cannot be themed	Few embeds, or embeds that support a dark option
Maintenance	Small team, frequent ad hoc page building	Design tokens and a component library that already centralize color

A dark theme test checklist

• Contrast: every text, link, focus indicator, and button state meets your contrast targets in both themes.
• Logos and images: dark-on-transparent assets have light-theme and dark-theme variants or a safe background.
• Form controls: inputs, select menus, and error messages read correctly once color-scheme is set.
• Embeds: maps, calendars, and video players are checked inside the dark page, with fallbacks where they cannot be themed.
• Brand colors: accent colors are adjusted for dark surfaces rather than reused at full saturation.
• Print: printed pages use dark text on white; the Media Queries specification notes that someone who prefers dark screens may still want light pages on paper.
• No-preference visitors: confirm they receive the light theme.

Tradeoff to accept

Each extra theme multiplies testing. Every new section, campaign page, and component has to be reviewed twice, and an unmaintained dark theme degrades faster than the light one because fewer people on the team look at it. If that review cannot be sustained, a carefully designed light theme serves visitors better than a dark theme that drifts out of date.

---

Practical takeaways for your next website

1. Default to dark text on a light background. Controlled research found it read better for both younger and older adults.
2. Offer dark mode as a choice, not a correction. Its strongest case is visitor preference and some low-vision needs, not better readability for everyone.
3. Do not sell dark mode as a battery saver. Measured savings at typical indoor brightness were small, and those measurements came from apps rather than websites.
4. Use the platform features. Follow prefers-color-scheme, declare color-scheme, and keep colors in variables so a theme is one coordinated change.
5. Budget for testing both themes. If you cannot review every new page in dark mode, wait until you can.

---

Ready to Discuss Your Website?

If you are planning a new website, a service redesign, or custom development for your business, we’re here to help shape the work.

• Explore Our Services: Web Design · Web Development · Website Redesign
• Start a Conversation: Tell us about your project via our Contact Form or email us directly at [email protected].