Stop using pure black in dark mode.

Dark mode stopped being a preference and became the default. Surveys now put dark-mode use around 82 percent of smartphone owners, and most of those dark themes reach for the wrong black. Pure black, the #000000 kind, looks bold in a swatch and turns punishing on a screen. If your dark theme makes people squint, this is usually why.

Google learned this building Material Design and landed on a dark gray, #121212, as the recommended surface, not black. The reasons are not taste. They are how the eye works and how depth reads in the dark. Here is the practical version, with the rules that actually matter.

Key takeaways

• Do not start from #000000. Start from a dark gray around #121212 and treat it as your canvas, the value Material Design recommends.
• White text on pure black is the maximum contrast a screen can make. It causes halation and eye strain, worst for the many readers with astigmatism (Nielsen Norman Group).
• Build depth with light, not shadow. In the dark, a higher surface is a lighter surface.
• Desaturate and lighten brand colors, then re-check contrast. A color that passed on white often fails on dark.
• Dark mode is its own design with its own rules, not a filter you flip.

Why is pure black the wrong default?

Because it pushes contrast past the point that helps. White text on pure black is the most contrast a screen can produce, and the eye pays for it. The light blooms at the edges of the letters, an effect called halation, and it hits readers with astigmatism hardest. The Nielsen Norman Group found that people with astigmatism struggle with white-on-black because of this haloing, and astigmatism is common, affecting a large share of adults.

This is not a small audience or a small moment. With dark-mode use near 82 percent, a punishing dark theme is most of your users, on long reading sessions, slowly tiring of your product. Comfort is the whole point of dark mode. Maximum contrast quietly throws it away.

What color should the background be?

A dark gray, not black. Material Design recommends #121212 as the base surface, and it is a good place to start. It still reads as dark and still feels premium, but it stops fighting the reader. Pure black becomes a rare accent, not the whole room.

There is one honest trade-off. On OLED screens, true black pixels switch off and save power, which is why some apps reach for #000000. But your surfaces carry real content: bright photos, colored cards, vivid brand art. Against pure black, all of it spikes to harsh contrast. For anything people read or look at for more than a moment, the small battery saving is not worth the strain.

How do you build depth without shadow?

You raise a surface by making it lighter, not by dropping a shadow under it. In a light theme, elevation comes from shadow. In the dark a shadow has nothing to land on, so it disappears. Material solves this by lightening the surface as it rises. The higher the layer, the more it lifts toward white.

Under the hood that is a translucent white overlay composited over the #121212 base, and the more elevated the surface, the more opaque the overlay. You do not need the math. You need the rule. Higher means lighter. That one move gives a dark interface the layering it would otherwise lose to a flat black void.

What about your brand colors?

Soften them. Saturated colors that sing on a white page will vibrate against a dark canvas and tire the eye. Desaturate them, lighten them, and pull them back toward calm. The goal is legible and comfortable, not loud.

Then re-check contrast, because dark mode breaks your old assumptions. A text color that cleared the WCAG AA threshold of 4.5 to 1 on white can quietly fail on a dark background. Test the dark theme on its own. It is a different surface, with different math.

Dark mode is its own design

It is not a filter you flip at the end. It is a second design of the same product, with its own canvas, its own depth model, and its own color. Pick a dark gray near #121212, lift surfaces with light, soften the color, and re-check every contrast value. None of it is hard. All of it is the difference between a theme people stay in and one they leave.

Small rules like this are most of what makes an interface feel effortless. For another one with outsized impact, read how Fitts’s Law decides whether your buttons feel easy or fiddly, below.

FAQ

Should I use pure black for dark mode?

No. Pure black with white text is maximum contrast, which causes halation and eye strain, especially for people with astigmatism. Use a dark gray around #121212 as the canvas and keep pure black as a rare accent.

What color should a dark mode background be?

A dark gray rather than #000000. Around #121212 is a good base. Raise elevated surfaces by making them slightly lighter, since you cannot use shadow for depth in the dark.

How do I use brand colors in dark mode?

Desaturate and lighten them. Saturated colors that look right on white vibrate on a dark canvas, and contrast that passed on white can fail on dark, so re-check text legibility.