Dark mode colors: how to pick backgrounds, text and accents

Why pure white on pure black is tiring

White #ffffff on black #000000 is the maximum contrast a screen can show: 21:1 in WCAG 2 and Lc -107.9 in APCA. For a button label that is fine. For paragraphs it is too much.

The problem is halation. Bright letters on a black field seem to bleed light into the dark around them, so strokes look thicker and blurry, especially for people with astigmatism. Your eyes also keep adapting between the glaring text and the black gaps, which is tiring over a long read.

Lowering both ends fixes it without hurting readability. #e5e5e5 on #121212 still gives 14.87:1 and Lc -90.4, which is above APCA’s preferred level of Lc 90 for body text.

• Pure black#000000
• Dark surface#121212
• Off-white text#e5e5e5
• Pure white#ffffff

Best background colors for dark mode

Most dark themes use a background between OKLCH lightness 0.14 and 0.28. The table shows common choices with two text colors on top: #e5e5e5 for comfortable body text and #fafafa for maximum emphasis.

Going from pure black to #18181b costs almost nothing in APCA terms: #e5e5e5 text drops from Lc -91.0 to -89.9. What you gain is room below the background for shadows and room above it for raised surfaces. #1f2937 is slightly blue (chroma 0.03), which works if your brand is cool and looks off next to warm accents.

WCAG 2 overrates contrast on dark backgrounds

The WCAG 2 formula treats a ratio the same whether the colors are light or dark. Human vision does not: differences between dark colors are harder to see. APCA models this, and the gap is large. The table shows which gray you need on each background to reach WCAG AA and two APCA levels.

On white, a gray that just passes AA already reaches Lc 71.6. On #121212, a gray that just passes AA reaches only Lc -32.8, below APCA’s Lc 45 minimum for large headlines. To get the same APCA body text level of Lc 75 you need 5.10:1 on white but 11.67:1 on #121212.

The same happens with color. The blue #4a83f0 on #121212 passes WCAG AA with 5.17:1, yet its APCA value is Lc -37.6. In dark mode, treat 4.5:1 as a floor. For body text aim for about 9:1 or more, which is where a gray on #121212 reaches Lc 60, or check APCA directly.

Why you cannot just invert the light palette

A brand color tuned for white backgrounds is usually too dark and too saturated for dark ones. Take the blue #2f6bdf from a light theme. On white it passes as link text with 4.90:1. On #121212 it drops to 3.83:1 and Lc -27.7, which fails for text of any size.

The fix is to move up the brand scale: higher lightness, lower chroma. The table compares four steps of the same blue scale on both backgrounds.

Step 300 is the dark-mode equivalent of step 600 for links and colored text: lightness goes from 0.555 to 0.805 and chroma drops from 0.188 to 0.082, less than half. The lower chroma matters too, because saturated colors on a dark background look like they glow and vibrate at the edges.

Filled buttons are different, because the button brings its own background. White text on #2f6bdf keeps 4.90:1 in both themes, so the primary button can stay the same. Only colored text, icons and outlines need the lighter step.

Elevation: lighter surfaces instead of shadows

Shadows barely show on a dark background, so dark themes signal height with lightness: the closer a surface is to the viewer, the lighter it gets. Material Design’s original dark theme did this with a white overlay on #121212, from 5% at 1 dp elevation, used for cards, to 16% at 24 dp, used for dialogs.

Each level adds roughly 0.02 to 0.05 of OKLCH lightness. Even the top level differs from the background by only 1.60:1, so add a 1 px border to surfaces that must stand out. In OKLCH you can write the same system without overlays: keep chroma and hue and raise L by about 0.03 per level.

prefers-color-scheme and the color-scheme property

The prefers-color-scheme media query tells you whether the operating system is set to light or dark. The color-scheme property tells the browser which schemes your page supports, so it can render scrollbars, form controls and the default canvas in matching colors.

Set color-scheme on the root, then override your color variables inside the media query.

:root {
    color-scheme: light dark;
    --bg: #ffffff;
    --surface: #f4f5f6;
    --text: #15171b;
    --text-muted: #6e7279;
    --link: #2f6bdf;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #121212;
        --surface: #1e1e1e;
        --text: #e5e5e5;
        --text-muted: #b2b2b2;
        --link: #a3c0f5;
    }
}

body {
    background: var(--bg);
    color: var(--text);
}

Without color-scheme, a dark page still shows a light scrollbar and white inputs in most browsers. It is one line and it is easy to forget.

The light-dark() function in CSS

light-dark() takes two colors and returns the first in a light scheme and the second in a dark one. It has worked in all major browsers since 2024: Chrome and Edge 123, Firefox 120 and Safari 17.5. It reads the color-scheme property: without color-scheme: light dark it always returns the light value.

Each color is declared once, next to its dark pair, and a theme switch only has to change color-scheme.

:root {
    color-scheme: light dark;
    --bg: light-dark(#ffffff, #121212);
    --surface: light-dark(#f4f5f6, #1e1e1e);
    --text: light-dark(#15171b, #e5e5e5);
    --text-muted: light-dark(#6e7279, #b2b2b2);
    --link: light-dark(#2f6bdf, #a3c0f5);
    --primary: #2f6bdf;
    --on-primary: #ffffff;
}

:root[data-theme='light'] {
    color-scheme: light;
}

:root[data-theme='dark'] {
    color-scheme: dark;
}

On the page background, every text color in this block passes AA in both themes. In the light theme: text 17.94:1, muted text 4.83:1, links 4.90:1. In the dark theme: text 14.87:1, muted text 8.84:1 with Lc -60.1, links 10.18:1. You can check any pair of your own in the PickShade contrast checker, which shows WCAG 2 and APCA side by side.

Questions and answers