Dark mode is now expected in virtually every serious digital product. But many dark mode implementations fail at the most basic level: they invert light-mode colors without accounting for the different contrast requirements and perceptual balance of dark interfaces. The result is text that glares, semantic colors that blind, and surfaces that lose the layered depth that makes dark mode beautiful.
Checking your dark mode palette for accessibility and visual quality requires the same tools as light mode, but with different targets. Text on dark backgrounds needs the same WCAG contrast requirements (4.5:1 for normal text) but the specific values that achieve that ratio will be different — lighter text on dark backgrounds rather than darker text on light backgrounds.
The Contrast Checker and Color Blindness Simulator together give you a complete dark mode palette audit: verify contrast ratios for all text/surface combinations, and verify that your dark-mode semantic colors (success green, error red) remain distinguishable under color blindness conditions.
What It Does
Use the Contrast Checker to verify any dark background + text color combination for WCAG compliance. Test your dark surface colors (background, card, elevated) against your text hierarchy (primary, secondary, muted). Test your semantic colors (success, error, warning) against your dark surfaces. Use the Color Blindness Simulator to verify your dark-mode palette under common vision deficiency conditions.
Who It's For
UI developers building dark mode for web and mobile apps, designers creating dark theme variants of existing products, design system engineers specifying dark tokens for component libraries, and anyone who wants to verify that their dark UI meets accessibility standards.
How to Use This Tool
- 1Open the Contrast Checker tool
- 2Set your dark background color as the background
- 3Test your text colors against it for WCAG compliance
- 4Test each semantic color (success, warning, error) against your dark surface
- 5Use the Color Blindness Simulator to check semantic color distinguishability
- 6Adjust any failing combinations by lightening text or saturating semantic colors
Related Tools
Useful For These Use Cases
Frequently Asked Questions
Does dark mode have different contrast requirements than light mode?
WCAG contrast requirements (4.5:1 for normal text) apply equally to both light and dark mode. The difference is in which combinations achieve those ratios: dark mode requires light text on dark backgrounds, so your text colors need to be lighter and your backgrounds darker than the equivalent light mode values. The ratio requirement is the same.
What text color should I use on a dark background?
Near-white text (F1F5F9 or similar) achieves very high contrast against dark slate backgrounds. For secondary text, a 60–70% opacity white (equivalent to #94A3B8 on a dark slate) maintains excellent contrast while creating visual hierarchy. Avoid pure white (#FFFFFF) which can cause visual vibration against near-black backgrounds.
Why do bright colors look harsh on dark backgrounds?
Highly saturated colors appear to glow against dark backgrounds because of the simultaneous contrast effect — bright color on dark creates a perception of greater vividness than the same color on a light background. For dark mode UI, desaturate your semantic and brand colors by 10–20% compared to their light-mode equivalents to achieve equivalent perceived intensity.
How do I test dark mode across different brightness levels?
Test your dark palette with your device brightness at 30%, 50%, and 100%. Colors that pass contrast checks at full brightness may become indistinguishable at low brightness, especially lighter colors with similar values. The Contrast Checker shows absolute ratios, but real-world testing at device-typical brightness levels is also important.
Ready to try it?
Free, no sign-up, no ads. Works instantly in your browser.
Open Dark Mode Color Palette Checker