Dark Mode Color Design
Inverting a light theme does not produce a dark one. What changes when the background goes dark, and what the legibility research actually found.
Short answer: a dark theme is a second palette, not a transformation of the first. Flip the background and four things break at once. Saturated colors that read as confident on white glow and smear on black. Shadows, which carried your depth cues, stop being visible. The contrast ratios all change, and some of them change in the wrong direction. And your brand color, chosen against a light ground, may now fail the accessibility floor it used to clear. None of that is fixed by an invert filter, and the research on reading with light text on a dark ground is more mixed than the design discourse suggests.
What the polarity research actually says
The technical terms are positive polarity, dark text on a light background, and negative polarity, light text on a dark one. This has been studied for decades, well before dark mode became a product feature.
A 2007 study in Ergonomics tested polarity across different ambient illumination levels and different color contrasts and found a performance advantage for positive polarity that persisted regardless of those conditions. Later work by the same research group found the advantage held for both younger and older adults, and a further study found it was particularly pronounced at small character sizes. A 2017 study on glance-like reading, the short look you give a display while doing something else, found polarity interacting with ambient light and letter size rather than acting alone.
More recently, a 2024 study looked specifically at reading data visualizations rather than text and compared age groups, which matters because the visualization case has different demands from a paragraph of prose.
The useful summary is not "dark mode is bad". It is that for sustained reading of small text, the light theme has a measured advantage that a dark theme has to work to overcome, and that the advantage shrinks as text gets larger and as the room gets darker. Offering both, and letting the reader choose, is the defensible design. Assuming dark is automatically kinder is not supported.
The four things that break on inversion
| What breaks | Why | The fix |
|---|---|---|
| Saturated colors | A vivid hue against a dark ground has a very large luminance ratio, which reads as glare rather than as color | Reduce chroma and raise lightness slightly for the dark theme |
| Depth cues | Drop shadows are darker than the surface behind them; on a near-black surface there is nothing darker to be | Encode elevation as lighter surfaces rather than as shadows |
| Contrast ratios | The ratio is a function of two luminances, and inverting does not preserve the relationships across a scale | Recompute every pair; do not assume the light theme's passes carry over |
| Brand color | A mid-lightness brand color has good contrast against white and poor contrast against near-black | Ship a second tint of the brand color for dark surfaces |
Why not pure black and pure white
Two conventions have settled in, and both have reasons behind them rather than being fashion.
Avoid pure white text on pure black. That pairing produces the largest luminance ratio a screen can make. Some readers find the letters smear or bloom at that extreme, and the effect gets worse at low ambient light with a bright display. Pulling the background up to a very dark grey and the text down to a near-white takes most of the harshness out and costs almost nothing in measured contrast.
Avoid pure black as a surface color. If your darkest surface is already at zero, you have no room below it, which means every layer of your interface has to go lighter and your elevation scale runs out fast. Starting a few steps up leaves headroom in both directions.
The contrast ratio is polarity blind, and that is a real gap
The accessibility contrast ratio is computed from the relative luminance of two colors, and the formula is symmetric: swap foreground and background and the number is unchanged. The reading research above says the experience is not symmetric. So a pair that passes at 4.5:1 as dark-on-light is scored identically as light-on-dark, even though the second case may read differently, especially at small sizes.
This is one of the known limits of the current metric, and it sits alongside the others: the ratio also knows nothing about stroke width, and a 2021 study in Vision Research quantified how the width of a character's strokes changes the contrast needed to read it. A hairline weight and a bold weight at the same color pass or fail together under the ratio, and do not perform the same way. Our page on color contrast and accessibility covers the formula and the thresholds; the point here is that clearing them is a floor, not a finish line, and dark themes are where the gap between the two shows up most.
Elevation without shadows
In a light theme, a card sits above the page because a shadow says so. That mechanism has no dark equivalent, because there is nothing darker than the surface to cast onto. The working substitute is to make higher surfaces lighter: the page is the darkest layer, a card is a step up, a menu floating over the card is another step, and the steps are small and consistent.
Two cautions. Keep the steps large enough to be visible and small enough not to look like different colors, which is a just-noticeable-difference question and is exactly what the JND page is about. And remember that a lighter surface reduces the contrast of the text on it, so an elevation scale and a text-contrast budget have to be designed together rather than separately.
Simultaneous contrast bites harder in the dark
The same grey looks lighter on a dark ground and darker on a light one. That is simultaneous contrast, and it is not a small effect. In a dark theme it means a neutral you picked while looking at a white canvas will look wrong once it is surrounded by near-black, and a colored surface will look more saturated than its numbers say.
The practical consequence is that you cannot port a palette by arithmetic. You have to look at the dark theme in the dark theme, and preferably in a dim room, because the surround is part of the stimulus. The generated colors and the perceived colors are different things, and only one of them is what your reader gets.
Building both themes from one scale
The maintainable approach is a single tonal scale per hue, with the two themes selecting different rungs. Build the scale in a space where the lightness steps mean something, which is the argument on our OKLCH page, then define semantic roles rather than raw colors: surface, surface raised, text primary, text muted, accent, accent on dark. The light theme maps those roles to one set of rungs and the dark theme to another. When you need to adjust, you adjust the scale once.
Do the accessibility check per theme, not once. And test the dark theme at the brightness people actually use, which on a phone at night is far lower than your desk monitor at noon.
The connection to the games
Every one of our games runs on whichever theme your device asked for, and the background is part of the puzzle. A shade step that is obvious against a light ground can be genuinely hard against a dark one, and the reverse also happens. Hueseam makes this measurable: it hides a faint vertical seam where a color bar steps, and asks you to find the edge. Play it in one theme, then the other, and the score difference is your own simultaneous-contrast effect, quantified on your own screen.
That is also the honest caveat. These are not calibrated measurements of your vision. They are measurements of you, this screen, this theme, and this room, which is precisely why comparing your own scores across those conditions is the interesting thing to do.
Find the seam, light theme and dark. Hueseam hides a faint step inside a color bar. Play it once in each theme and see how much the background moved your threshold.
Frequently asked questions
Is dark mode better for your eyes?
The reading research does not support that as a general claim. Studies of display polarity have repeatedly found an advantage for dark text on a light background, including for older adults and especially at small character sizes. The advantage narrows with larger text and in darker rooms. The right conclusion is to offer both themes and let the reader choose.
Can I just invert my light theme?
No, and the reason is concrete rather than aesthetic. Inversion turns saturated colours into glare against the dark ground, destroys shadow-based depth cues, changes every contrast ratio in ways that do not preserve the original relationships, and usually breaks the brand colour. A dark theme is a second palette that shares a structure with the first.
Why do designers avoid pure black backgrounds?
Two reasons. Pure white on pure black is the harshest pairing a screen can produce, and some readers find the text smears or blooms at that extreme. And a surface already at zero leaves no room underneath it, so every layer of the interface has to go lighter and the elevation scale runs out.
How do I show that a card is above the page without shadows?
Make higher surfaces lighter. The page is the darkest layer, a card is one small step up, a floating menu is another. Keep the steps just large enough to see, and remember that a lighter surface lowers the contrast of the text sitting on it, so elevation and text contrast have to be budgeted together.
Does the contrast ratio work the same in dark mode?
The number does, and that is the problem. The formula is symmetric: swap foreground and background and the ratio is unchanged, even though the reading research says the two situations are not equivalent. The ratio is also blind to stroke width and font weight. Clearing it is a floor for a dark theme, not proof that the theme reads well.
Why does my grey look wrong once I switch themes?
Simultaneous contrast. The same grey appears lighter against a dark surround and darker against a light one, and the effect is large enough to matter. A neutral picked while looking at a white canvas will look off once it is surrounded by near-black, which is why a dark theme has to be judged in the dark theme.
Should the brand colour stay identical across themes?
Usually not. A mid-lightness brand colour that has comfortable contrast on white often falls below the floor on near-black. The standard answer is a second tint of the same hue, lighter and a little less saturated, reserved for dark surfaces. The brand stays recognisable and the text stays readable.
Does dark mode save battery?
On OLED screens dark pixels do draw less power, so there is a real effect there. How much depends heavily on screen brightness and on how much of the interface is actually dark, and on LCD panels with a backlight the saving is close to nothing. It is a side benefit, not a reason to design badly.
Keep reading
- Color contrast and accessibility: the ratio, the thresholds and what they are for.
- Simultaneous contrast: why the surround changes the color.
- Display calibration basics: brightness, white point, and what your screen is really doing.
Sources: Buchner, A. and Baumgartner, N. (2007), Text-background polarity affects performance irrespective of ambient illumination and colour contrast, Ergonomics 50(7), 1036; Piepenbrock, C., Mayr, S., Mund, I. and Buchner, A. (2013), Positive display polarity is advantageous for both younger and older adults, Ergonomics 56(7), 1116; Piepenbrock, C., Mayr, S. and Buchner, A. (2014), Positive display polarity is particularly advantageous for small character sizes, Human Factors 56(5), 942; Dobres, J., Chahine, N. and Reimer, B. (2017), Effects of ambient illumination, contrast polarity, and letter size on text legibility under glance-like reading, Applied Ergonomics 60, 68; While, Z. and Sarvghad, A. (2024), Dark mode or light mode? Exploring the impact of contrast polarity on visualization performance between age groups, 2024 IEEE Visualization and Visual Analytics, 211; Ohnishi, M. and Oda, K. (2021), The effect of character stroke width on legibility: the relationship between duty ratio and contrast threshold, Vision Research 185, 1; W3C, Understanding Success Criterion 1.4.3, Contrast (Minimum); W3C, CSS Color Module Level 4, predefined color spaces.
Understand it, now train it. The daily games stay free forever. A Personal Pass adds progress tracking (trends + export); Teacher / School tools let you assign it and follow a whole class. For teachers & self-learners →