How do gray text and dark backgrounds fare in WCAG contrast ratios?

By TechCompare · Updated · How we check

Dark mode uses the same 4.5:1 and 3:1 thresholds as light mode. The exact shade of black changes the result, so the numbers have to come from the real background.

Gray text on a dark theme is a different pair from the same gray on white, even though the formula doesn't change. This page checks a range of grays against pure black and against a near black background. Each ratio comes from the same calculation the tool uses, so you can rerun any pair yourself.

WCAG level
WCAG AA
Minimum contrast (4.5:1+)
Example ratio
4.6:1
#767676 on #000000
Category
Practical Tips
Accessibility knowledge base

How this is calculated

The thresholds don't change. 1.4.3 Contrast (Minimum) asks for 4.5:1 for normal text and 3:1 for large text, and 1.4.11 Non-text Contrast asks for 3:1 for the visual information that identifies controls. The formula doesn't care which color is lighter, so light text on dark uses the same calculation as dark text on light. Pure white on pure black gives 21:1, the maximum. Every other pair scores lower on that scale. Text on photos is covered on the text over images page, so this page sticks to solid backgrounds.

#767676 is one of the few grays that pass 4.5:1 on both pure black and pure white. On pure black it reaches 4.62:1, and on white it reaches 4.54:1. On #121212 the same gray gives 4.12:1, which misses 4.5:1 for normal text but still clears 3:1 for large text. A soft dark background raises the bar for gray text. Darker gray #4D4D4D reaches only 2.22:1 on #121212, which fails even the 3:1 bar.

Verdict

Design the dark theme's pairs on their own, then test them. Don't invert the light theme's hex values, since a gray chosen for white can fall short on black. Put the tested dark pairs into the same semantic tokens as the light theme, as the accessible palettes page describes, so components never reach for raw hex values.

More Contrast scenarios

Frequently asked questions

Is there a different WCAG contrast minimum for dark mode?
No. Normal text needs 4.5:1, large text needs 3:1, and the visual information that identifies controls needs 3:1, in either theme. What changes is the pair. Each dark mode pair gets its own check against the background it actually sits on.
Is pure white on black allowed under WCAG?
Yes. The criteria set minimum ratios, so a higher ratio never fails a threshold. Pure white on pure black reaches 21:1, the maximum any pair can reach.
How light does gray text need to be on a near black background?
There's no single cutoff, because the background shade changes the result. On #121212, #8C8C8C reaches 5.57:1, which clears 4.5:1 for normal text. #A6A6A6 reaches 7.70:1, which clears the 7:1 AAA level.
What dark background works for dark mode body text?
A near black like #121212 is one option for the page, and pure black is also an option. Off-white #E5E5E5 reaches 14.87:1 on #121212, which clears the 7:1 AAA level. Check your own text color on your own background before you ship.