DevBentoDark Mode Color Contrast Accessibility Checker
Check if your dark mode colors meet WCAG AA contrast requirements. Test foreground and background pairs for readability in dark themes.
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Check Dark Mode Color Contrast
Dark mode is not just inverting your color palette. The contrast relationship between text and background changes completely, and many color pairs that work in light mode fail accessibility standards when reversed. This example tests a common dark mode pairing: light gray text (#e2e8f0) on a dark slate background (#1e293b).
Why Dark Mode Contrast Is Different
In light mode, you darken text on a light background. In dark mode, you lighten text on a dark background. The problem is that the human eye perceives contrast differently on dark backgrounds. A light gray that looks readable in isolation may not provide enough contrast against a dark background that is not actually black.
The WCAG contrast formula accounts for relative luminance, not just color difference. Dark backgrounds have very low luminance values, so even small increases in text lightness can push the ratio above or below the 4.5:1 threshold. This makes dark mode more sensitive to color choices than light mode.
Common Dark Mode Color Mistakes
| Mistake | Example | Problem |
|---|---|---|
| Using pure white on pure black | #ffffff on #000000 | 21:1 ratio passes, but causes halation and eye strain on OLED screens |
| Medium gray text on dark background | #9ca3af on #1e293b | 3.93:1 ratio, fails WCAG AA for normal text |
| Low saturation dark backgrounds | #2d2d2d with #cccccc | Passes at 8.59:1 but looks washed out on many displays |
| Too much contrast | #ffffff on #0a0a0a | 20.35:1 ratio, excessive for extended reading |
The Ideal Dark Mode Range
For body text in dark mode, aim for a contrast ratio between 7:1 and 12:1. This range provides excellent readability without the eye strain of pure white on pure black. The specific values:
| Element | Foreground | Background | Ratio | WCAG |
|---|---|---|---|---|
| Body text | #e2e8f0 | #1e293b | 11.56:1 | AAA |
| Muted text | #94a3b8 | #1e293b | 6.49:1 | AA |
| Headings | #f1f5f9 | #0f172a | 17.35:1 | AAA |
| Links | #60a5fa | #1e293b | 6.15:1 | AA |
| Disabled text | #64748b | #1e293b | 3.39:1 | Fails AA |
Testing Your Dark Mode Palette
Enter your dark mode foreground and background colors above to check the contrast ratio. The tool shows both WCAG 2.x ratings (AA and AAA for normal and large text) and APCA Lc ratings, which are designed for the next generation of accessibility standards.
How to Use
- Enter your dark mode text color in the foreground field
- Enter your dark mode background color in the background field
- Check if the ratio meets 4.5:1 for body text or 3:1 for large text
- Use the accessible color suggestions to fix failing pairs
- Copy the CSS variables for your dark theme
Migrating from Light to Dark Mode
The most reliable approach is to build a dark palette from scratch using fixed lightness targets rather than trying to invert your light mode colors. Start with your design tokens, test every foreground/background pair, and document which pairs pass which WCAG levels. The Color Converter can help you adjust HSL values systematically.
Nothing you paste leaves this tab. Every tool runs entirely in your browser — no upload, no server, no account.