Checking Contrast for Dark-Mode UI Text

Checking Contrast for Dark Mode Text (WCAG AA and AAA)

Dark mode looks effortless until you actually have to pick the gray that text sits on top of, and the wrong choice either burns a faint afterimage into a reader's eyes or fails WCAG outright. The relative luminance formula this tool runs works exactly the same whether your background is near-black or pure white, but designers regularly get dark-mode pairs wrong in a specific, predictable way: choosing a foreground gray dim enough to feel restful, then discovering it barely clears 3:1 instead of the 4.5:1 body text actually needs.¹ A near-black background and a near-white foreground, like #121212 against #e0e0e0, is a safe, comfortably passing starting point worth understanding before you start narrowing the gap for aesthetic reasons.

Why dark mode tempts you toward failing contrast more than light mode does

Light-mode text almost always defaults toward black on white, a pairing so extreme that most designers would have to work hard to make it fail. Dark mode flips that instinct on its head, because pure white text on pure black can feel harsh and glary, especially in a dim room, so many interfaces deliberately soften both ends toward gray.

The gray-on-gray trap that fails more often than it should

That softening is exactly where trouble starts. A designer who lightens black to a comfortable charcoal and dims white to an easy-on-the-eyes off-white can end up with two colors that sit much closer together in relative luminance than either extreme would, sometimes without realizing how far the ratio dropped. Because both colors moved toward the middle of the brightness range at once, the contrast gap shrinks from both directions simultaneously, which is a faster way to fail than dimming just one side.

A safer approach keeps the background genuinely dark, close to true black, while giving the foreground more room to breathe than it would need against pure white. Material Design's widely used dark-theme baseline of a #121212 background against roughly 87% white text works for exactly this reason:² the background stays dark enough to avoid glare while the foreground stays light enough to clear AAA with room to spare.

Testing your own dark palette before you commit to it

Type your candidate background and text colors into the fields above and read the Normal Text row specifically, since that is the threshold most of your body copy actually needs to clear. The Large Text row still matters for headings inside the same dark palette, but it is a separate, more forgiving check worth reading on its own.

If the badge shows a fail or a bare AA pass and you'd rather have more headroom, click Fix text to see the closest lighter foreground that reaches AAA without drifting off your original hue, which the tool's OKLab-based search handles automatically,³ letting you keep the same general gray rather than jumping to an unrelated color.

Reading the ratio for an #e0e0e0-on-#121212 pair

Type #e0e0e0 into the foreground field and #121212 into the background field above and the badge clears every WCAG tier by a comfortable margin, including AAA's stricter 7:1 requirement for normal text.⁴ Swap the two around with the Swap button and the result stays every bit as comfortable, since the ratio treats foreground and background symmetrically.

Why this specific pairing has so much room to spare

That headroom exists because both colors sit near the extremes of the brightness range rather than compromising toward a shared middle gray. The background's near-black luminance and the foreground's near-white luminance stay far enough apart that even a slightly different gray on either side would likely still pass, which gives you real flexibility to warm or cool the palette slightly for brand reasons without risking a fail.

Treat a result this comfortable as a ceiling you can spend, not a target you need to hit exactly, since a slightly softer pairing that still clears AA is often more pleasant to read for long stretches than the maximum-contrast version.⁵ Use the ratio number above to decide how much of that ceiling you actually want to spend on any given screen.

When to use this

Use this guide whenever you are picking or auditing text colors for a dark-mode interface, and want to confirm a specific foreground and background pair before it ships rather than relying on how restful the pairing looks at a glance.

Examples

Foreground #e0e0e0, background #121212

Both colors plug directly into the formula above and clear every WCAG tier, including AAA, since the near-black background and near-white foreground sit far apart in relative luminance.

Foreground #757575, background #1e1e1e

The Normal Text row fails AA here, even though both colors read as comfortably dark and readable to the eye, since dimming the foreground reduced the ratio more than it looks like it should have.