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.
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
Related guides
Frequently asked questions
Is there a different WCAG contrast minimum for dark mode?
Is pure white on black allowed under WCAG?
How light does gray text need to be on a near black background?
What dark background works for dark mode body text?
Related tools
Color Picker
Pick colors, convert between HEX, RGB, HSL, HSV, OKLCH and CMYK, and find the nearest CSS and Tailwind color.
Use toolJSON Formatter
Validate, format, and minify JSON. Browse it as a tree, run JSONPath queries, compare two documents, or validate against a JSON Schema.
Use toolAspect Ratio Visualizer
Visually compare width differences between 16:9, 21:9, and 32:9 monitors.
Use tool