Design notes / No. 01Reading time: about 8 minutes

A study in contrast

The case for light
and dark.

A deep look at how colour themes affect readability, accessibility, focus, emotion, battery life, eye comfort, and user trust.

Read the study Try the examples
01 / Daylight
Your reading listA quieter way
to begin.
Continue reading ↗
02 / After hours
Your reading listA quieter way
to begin.
Continue reading ↗
Scroll to explore

Overview

Which mode works better?

Light mode and dark mode both solve different problems. A strong interface does not force one experience on everyone. It gives users a thoughtful default, then gives them control.

Clarity in the daylight.

Best for reading-heavy interfaces, daylight environments, forms, documents, productivity tools, and content that needs high clarity.

Calm after dark.

Best for low-light environments, media apps, dashboards, developer tools, entertainment apps, and interfaces used for long focus sessions.

The Science

The screen meets the eye.

The experience of a theme is shaped by luminance, contrast, pupil size, ambient lighting, reading distance, typography, and visual sensitivity.

Pupil size and sharpness

In bright interfaces, the pupil usually contracts, which can increase depth of field and make text edges feel sharper. This is one reason long-form reading often performs well in light mode.

Glare and visual fatigue

In dark rooms, a bright screen can feel harsh because the screen is much brighter than the environment. Dark mode can reduce perceived glare and make the interface feel calmer at night.

Halation effect

White text on a black background can sometimes appear to glow or blur around the edges, especially for users with astigmatism. Dark mode works best when it uses soft dark greys instead of pure black.

OLED battery impact

On OLED screens, black pixels can use less power because individual pixels can dim or turn off. The benefit is usually strongest when the design uses very dark backgrounds and the device brightness is high.

Benefits

Where each mode shines.

Light Mode Benefits

  • Often stronger for long reading, writing, and scanning dense text.
  • Feels familiar because paper, documents, and forms are traditionally light.
  • Works well in daylight and office environments.
  • Can make shadows, cards, inputs, and hierarchy easier to detect.
  • Usually safer as the default for broad audiences.

Dark Mode Benefits

  • Can feel more comfortable in low-light settings.
  • Useful for apps used at night, such as media, reading, or messaging.
  • Can reduce the visual dominance of the interface so content stands out.
  • Often preferred by developers, gamers, designers, and power users.
  • Can save battery on OLED screens when designed correctly.

Trade-offs

When each mode falls short.

Light Mode Problems

Light mode can feel too bright at night, create glare in dark rooms, and make screens feel visually aggressive when brightness is high. Poor light themes can also look flat if contrast and spacing are weak.

Dark Mode Problems

Dark mode can reduce readability for long paragraphs, create glowing text edges, hide weak contrast issues, and make complex forms harder to scan. Pure black and pure white combinations are especially harsh.

Live Examples

Change the setting. Notice the shift.

These mini interfaces show how the same content can feel different when colour, contrast, depth, and hierarchy change.

Reading app

Article Preview

Why contrast matters

Comfortable reading depends on more than dark or light. Line height, font weight, background softness, and contrast all shape how long someone can read without fatigue.

Analytics dashboard

Weekly Overview

Engagement74%

Dark dashboards can help charts glow, but weak text contrast can make labels harder to read.

Form interface

Decision Matrix

A starting point for each task.

Situation Start with Why
Long reading or writing Light Mode Usually easier for scanning paragraphs and dense text.
Night-time use Dark Mode Can reduce glare and feel less visually harsh.
Complex forms Light Mode Inputs, labels, errors, and sections are often easier to distinguish.
Creative or media app Dark Mode The interface can fade back while images, videos, or artwork stand out.
Public website User Choice Different users, devices, and environments need different experiences.

Design Recommendations

Design both on purpose.

01

Do not use pure black with pure white text for large amounts of content. Use softened dark greys and slightly muted whites.

02

Test both themes separately. A colour that works in light mode may fail contrast or feel too bright in dark mode.

03

Respect system preferences, but still give users a visible manual toggle.

04

Use colour for support, not as the only way to communicate status, errors, or priority.

05

Make dark mode feel designed. Shadows, borders, icons, and surfaces need different treatment.