Black Background, White Text: When and How to Use It

Black-background-white-text is a deliberate design register: dramatic, focused, premium. Used in the right places with the right values, it outperforms light themes. Used lazily — pure white paragraphs on pure black — it tires readers in minutes. Here is the practical split, and the styling that keeps it comfortable.

Where it genuinely wins

Where it loses

Articles, documentation, email, terms and conditions — anything a person reads for more than a couple of minutes in a lit room. For those, default to dark-on-light and offer dark mode as a user option. The research on this is consistent: sustained reading favors positive polarity. Full breakdown in white text on black: readability.

The styling that makes it comfortable

1. Text #E8E8E8, not #FFFFFFKeeps the look, cuts the glow. At 87% white you lose almost no contrast and gain noticeably crisper edges.
2. Background #0E0F12 – #141414 for UITrue #000000 is for OLED wallpapers and video surrounds, not reading surfaces.
3. Larger body size16–18px minimum. Light-on-dark reads smaller and thinner than it is; compensate.
4. Restrained line length60–70 characters. Long glowing lines are hard to track back to.
5. Lighter weights, wider spacingBody text one weight lighter than your light theme, with slightly increased letter- and line-spacing.
6. Lift accent colorsSaturated brand colors vibrate on black. Desaturate a step and lighten.

Example CSS

:root[data-theme="dark"] {
  --bg: #0E0F12;
  --surface: #171921;
  --text: #E8E8E8;
  --text-muted: rgba(255,255,255,.62);
  --link: #8AB4F8;
}
body { background: var(--bg); color: var(--text); font-size: 17px; line-height: 1.65; }
p { max-width: 68ch; }

Testing checklist

Check body text at 4.5:1 or better on every surface, not just the page. View at arm’s length in a lit room, not only in a dark studio. Ask someone who wears glasses to read a paragraph — astigmatism is where light-on-dark fails first (see why white on black can double). And always ship a light alternative.

Test any color pair yourself with our free contrast checker — live WCAG ratios as you pick.

Frequently asked questions