Dark Mode Design: More Than Inverting Colors

A well-made dark mode isn't black and white swapped: it means rebuilding surfaces, elevation, saturation, and contrast. What the guidelines and evidence say.

info Quick Definition

A dark mode is a visual theme with dark backgrounds and light text, designed to be comfortable in low light. Designing one doesn’t mean inverting colors. It means rebuilding surfaces, elevation, saturation, and contrast so the hierarchy still works.

What does designing a dark mode involve?

There are two ways to do it. The first is to apply a filter that inverts colors. It is fast and almost always gives a bad result: images get damaged, brand colors change meaning, and the hierarchy breaks. EZUD warns that the inversion filter (filter: invert(1)) ruins images, videos, and any carefully calibrated color (EZUD, “Dark mode as an accessibility feature”).

The second is to build a theme of its own, with color decisions made intentionally for dark backgrounds. It takes more work, but it is the only way for dark mode to look and work well.

Why should a designer care?

Because dark mode isn’t a decorative extra. Many people use it by preference, at night, or because they are sensitive to light. If your product offers it badly, the problem shows up on every screen, not just one.

It is also a test of your color system. If your colors are fixed values rather than roles, switching themes means touching every component. If they are defined as tokens with meaning, the theme changes in one place. That is why dark mode pushes you to think about token architecture in your design system.

These are the most repeated recommendations across the sources below:

Dark gray background, not pure black. Material Design recommends a #121212 base surface; EZUD adds #1A1A1A as an alternative. According to A11y explained with Diana, pure black with pure white is often not the most comfortable combination.
Text that isn’t pure white. EZUD suggests #E0E0E0 or #D4D4D4 on the dark background. Material Design notes that text at 87% white reaches a 15.8:1 contrast ratio on #121212.
Elevation through lightness. Shadows barely show on dark backgrounds, so higher elements are lighter. Material Design layers white at opacities from 5% to 16%, depending on the elevation level (in dp).
Desaturated colors and extra cues for status. Material Design recommends desaturating colors (tones around 200). EZUD points out that red, green, and yellow indicators need checking against the dark background because some fail, and recommends pairing them with icons or text labels.

Images also need review: logos and illustrations may need alternative versions or transparent backgrounds.

What does the evidence say about reading?

Here it pays to be cautious. Nielsen Norman Group reviewed academic studies (it did not run its own research) and concludes that, for people with normal vision, light mode performs better most of the time. In one study it cites, polarity had no significant effect in daytime, but at night light mode beat dark mode and small text was much harder to read in dark mode. Even so, it recommends offering dark mode as an option, because of possible long-term effects of light mode, its help for some low-vision users, and personal preference (Nielsen Norman Group, “Dark Mode vs. Light Mode: Which Is Better?”, Raluca Budiu, February 2, 2020).

Diana Khalipina, at A11y explained with Diana, agrees that people generally read dark text on light backgrounds faster. She acknowledges that dark interfaces reduce light sensitivity and help with migraines, but also produce blurrier text edges and increase eye strain (A11y explained with Diana, “What science says about black & white combinations in UI design”, May 13, 2026). That is why the sensible approach is to offer the theme as an option rather than impose it.

On contrast, the criterion is the same in both themes. WCAG 1.4.3 requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text, where large starts at 18 pt, or 14 pt in bold (W3C, “Understanding Success Criterion 1.4.3”). Meeting that minimum is necessary, but it doesn’t mean the theme is comfortable.

Example

Illustrative example: a notes app has a dark mode built with automatic inversion. Note photos show strange colors, the main button looks duller than in light mode, and the cards blend into the background. The team rebuilds the theme: #121212 background, cards slightly lighter to show elevation, #E0E0E0 text, the brand color desaturated by 15% for dark mode, and photos with a light dark overlay. They then read with the theme for 15 to 20 minutes straight, and again at low brightness, as A11y explained with Diana suggests, and ask five people to use it at night. Two say they now prefer it for reading; one says she prefers light mode outdoors. The team keeps both themes.

When NOT to offer a dark mode

If you don’t have color tokens. Without roles, every component needs a manual adjustment, and the result will be inconsistent.
If the content is read mostly in daylight. A reference product used outdoors may prioritize the light theme.
If you won’t test it in real conditions. Testing only in Figma doesn’t tell you how it looks in low light or on a low-quality screen.
If the brand depends on a color that doesn’t work in dark mode. Define a dedicated variant instead of forcing the original color.

Common mistakes

Inverting colors with a filter and shipping it.
Using pure black and pure white as the default rule.
Keeping shadows to show elevation.
Forgetting images, charts, and error and success states.
Reviewing one screen instead of the whole flow.
Trusting the contrast result without testing long reading sessions.

How to start tomorrow

Open your product in dark mode, if it has one, or switch your system to that mode. Review five screens: the home screen, a form, a list with images, an error, and an empty state. Note which color lost its meaning, which element lost its hierarchy, and which image looks wrong. Then define tokens for background, surface, text, and brand color for both themes, instead of changing components one by one. If you want the contrast criteria documented, the math of color contrast gives you the basis for checking each pair.

Sources

Frequently asked questions

Is inverting colors enough to make a dark mode?

No. Inverting colors damages images and carefully calibrated colors, and breaks the hierarchy. A dark mode needs its own theme, with surfaces, elevation, saturation, and contrast designed for dark backgrounds.

Which background color should a dark mode use?

Material Design recommends a #121212 base surface, and EZUD also suggests #1A1A1A, instead of pure black. For text, EZUD suggests off-whites such as #E0E0E0 or #D4D4D4. Check the contrast of your own palette.

How is elevation shown without shadows?

With lighter surfaces for higher elements. Material Design applies white overlays with growing opacity as elevation rises (5% to 16% on its scale), because shadows barely show on dark backgrounds.

Is dark mode easier to read?

It depends on the person and the light. After reviewing academic studies, Nielsen Norman Group concludes that with normal vision light mode performs better most of the time, but it recommends offering dark mode as an option because it helps some low-vision users and people who prefer it. Test it with your content and with real people.