Designing for Dark Mode: Practical Rules for Color, Contrast and Depth

A good dark mode is not a light interface with the colors inverted. It uses dark gray surfaces instead of pure black, softer accent colors, lighter surfaces to show depth and text that still meets contrast requirements at every level of the layout. Get those four things right and a dark theme feels calm and readable. Get them wrong and it looks muddy, glows uncomfortably or fails users with low vision. Here is how to approach each decision.

Why Dark Mode Deserves Its Own Design Pass

Dark mode has moved from a niche setting to an expected feature. Operating systems let people switch between light and dark appearance, often automatically at sunset, and browsers pass that preference on to websites. In the long evenings of late autumn and winter, many people spend more of their screen time in dark mode than in light.

That makes it tempting to treat the dark theme as a quick variation: swap white for black, black for white and ship it. The result is usually disappointing. Brand colors that worked on white become harsh, shadows disappear, and carefully balanced hierarchy flattens out. A dark theme needs the same attention to color, contrast and layout as the light one.

Choose Dark Gray Surfaces, Not Pure Black

Google's Material Design guidance uses a dark gray, #121212, as the baseline surface color for its dark theme rather than pure black. There are good practical reasons for that choice:

Pure black is not forbidden. Apple's guidance for its own platforms uses true black backgrounds in places, and some apps choose black deliberately for a cinematic look. The point is to make the choice consciously, not by default.

Contrast Rules Still Apply in the Dark

The Web Content Accessibility Guidelines do not change when the background does. Under WCAG success criterion 1.4.3 (level AA), normal text needs a contrast ratio of at least 4.5:1 against its background, and large text needs at least 3:1. WCAG treats text of 18 point and above, or 14 point bold and above, as large. Criterion 1.4.11 asks for at least 3:1 for user interface components and meaningful graphics, such as input borders, icons and focus indicators.

Dark themes tend to fail these rules in predictable places:

If you are setting up these checks for the first time, our guide to accessible design and color contrast covers the wider principles, from never relying on color alone to designing for keyboards and screen readers.

Rework Your Color Palette

Saturated colors that look rich on white tend to vibrate against dark backgrounds and can be tiring to read. Material Design recommends using desaturated, lighter tones of your palette in dark themes, for example tones around the 200 level of a color scale instead of the 500 to 700 range typically used on light backgrounds.

In practice, a workable approach looks like this:

  1. Start from the dark surface. Define the background and two or three elevation levels before choosing accents.
  2. Create a lighter, less saturated version of each brand color. Keep the hue so the brand stays recognizable, but raise the lightness and lower the saturation.
  3. Check every pairing. Run text on accent, accent on surface and icon on surface through a contrast checker.
  4. Use color sparingly. In a dark interface, a small amount of accent color draws a lot of attention. Reserve it for primary actions and important states.
  5. Define tokens, not hex values. Name colors by role, such as surface, on-surface, primary and error, so the light and dark themes can map the same role to different values.

Show Depth With Lighter Surfaces

In light interfaces, shadows do most of the work of showing what sits on top of what. In dark interfaces, shadows are much harder to see. Material Design solves this by placing a semi-transparent white overlay on raised surfaces: the higher the element, the more opaque the overlay and the lighter the surface. A dialog therefore looks lighter than a card, and a card lighter than the background.

Text opacity can carry hierarchy as well. Material's dark theme guidance suggests white text at about 87 percent opacity for high-emphasis content, 60 percent for medium emphasis and 38 percent for disabled text. Treat those numbers as a starting point and confirm the actual contrast, because the result depends on the surface underneath.

Implementing Dark Mode on the Web

On websites, the CSS media feature prefers-color-scheme tells you whether the user has asked for a light or dark theme in their operating system or browser. It accepts two values, light and dark. A common pattern is to define color variables for the light theme and override them inside a @media (prefers-color-scheme: dark) block, so components never need to know which theme is active.

A few details are easy to miss:

Does Dark Mode Save Energy?

Partly, and less than often claimed. On OLED screens, dark pixels use less power than bright ones, so dark mode can save energy. A 2021 study by researchers at Purdue University measured popular Android apps on several OLED phones and found that switching from light to dark mode saved an average of 39 to 47 percent of display power at 100 percent brightness, but only about 3 to 9 percent at the 30 to 50 percent brightness most people use. On LCD screens, where the backlight stays on, the savings are minimal.

So dark mode is a modest contribution to green UX, not a solution on its own. The stronger reasons to build it well are comfort, user choice and readability in low light.

If you are adding a dark theme to an existing product, begin with an audit: list every surface, text style and accent color, map each to a role-based token, then rebuild the dark values one role at a time and test contrast on the lightest surface. That single spreadsheet of tokens will save more time than any amount of fixing screens one by one.