Why You Shouldn't Just Make Dark Mode Backgrounds Pitch Black
When designing dark mode UI, setting the background to pure black creates an overly harsh contrast with text that can cause eye strain. On the other hand, a background that's too light fails to meet text readability standards (WCAG). This tool calculates the maximum brightness you can use for a dark mode background based on your text color and target contrast ratio.
How the Calculation Works — WCAG Relative Luminance
The WCAG 2.1 web accessibility standard linearizes sRGB color values and calculates relative luminance as a weighted sum (R×0.2126 + G×0.7152 + B×0.0722), then adds 0.05 to each luminance value to compute the ratio between them. This calculator works the formula backward to derive the maximum background luminance that meets your target ratio, along with the corresponding gray HEX code.
How to Use the Result
Since the calculated HEX value is a pure gray (R=G=B), you can mix in a bit of brand tint at this brightness level for your actual design. Just make sure your final background stays at or darker than the calculated brightness to preserve your target contrast.
Frequently Asked Questions
A. It's the brightness contrast standard between text and background set by the WCAG web accessibility guidelines. Normal text needs 4.5:1, large text needs 3:1, and the enhanced AAA level needs 7:1 or higher.
A. The calculated value is the maximum brightness allowed. A lighter background would lower the contrast below your target and reduce readability, so use the calculated value or something darker.
A. Pure black provides plenty of contrast, but it can cause eye strain from excessive contrast. In practice, a deep gray like #121212 is usually recommended instead.