ColorCheckerColorContrast

Dark Mode Contrast Checker

Dark mode has different rules. Light text on dark backgrounds behaves differently from dark text on light — same math, different perception. Check your dark theme colors for WCAG compliance and real-world readability.

Light Mode vs Dark Mode: Same Color, Different Result

Light Mode✓ AA 4.6:1
Blue CTA Text — readable on white
##3B82F6 ##FFFFFF
Dark Mode✕ FAILS 2.3:1
Same blue — unreadable on dark
##3B82F6 ##111827

The #1 dark mode mistake: using light-mode brand colors unchanged. You need a tint ~30% lighter for dark backgrounds.

Dark Mode Text Color Guide (on #0F172A)

21:1
Pure white#FFFFFF
Harsh — glare risk on OLED
16.8:1
Off-white#E2E8F0
✓ Ideal for body text
12.5:1
Light gray#CBD5E1
✓ Good for secondary text
5.9:1
Mid gray#94A3B8
✓ Passes AA — subtle text
3.1:1
Dark gray#64748B
⚠ Only for large/disabled text
1.7:1
Slate#475569
✕ Fails — never use for readable text

Dark Mode Non-Text Contrast (3:1 required)

Focus ring
3.8:1 — Passes
Input border
2.1:1 — Fails
Toggle off state
1.4:1 — Fails
Divider line
1.2:1 — Fails

SC 1.4.11 (Non-Text Contrast) is the most overlooked dark mode requirement. Every border, icon, and focus indicator needs 3:1 against its dark background.

The Halation Effect: Why Dark Mode Needs Extra Care

When light text sits on a dark background, the human eye experiences halation — the light areas appear to spread or bleed into the dark, making text look slightly blurred. This is a physiological effect, not an optical illusion: the eye's photoreceptors scatter incoming light, and brighter pixels excite neighboring receptors more than darker ones.

The practical takeaway: a 4.5:1 ratio in dark mode feels subjectively harder to read than 4.5:1 in light mode. This is why professional dark mode implementations (like GitHub, VS Code, and macOS Dark Mode) routinely target 7:1 or higher — not because AAA requires it legally, but because it compensates for halation and delivers equivalent readability.

Two quick fixes that cost nothing: (1) use a slightly heavier font weight in dark mode — the extra stroke width counters halation blur, and (2) avoid pure white text — off-white (#E2E8F0 range) reduces the bloom effect while still exceeding 10:1 on typical dark backgrounds.

How to Check Dark Mode Contrast

1. Set your text color — pick the light text color from your dark theme. Common choices: off-white #E2E8F0 for body text, or your brand's light tint for CTAs.

2. Set your dark background — typical dark mode backgrounds range from #0F172A (Slate 900) to #111827 (Gray 900) to #000000 (OLED). Test the exact shade your design system uses.

3. Check both text AND non-text elements — don't forget borders, focus rings, dividers, and icons. These need 3:1 under SC 1.4.11 and are the most common dark mode contrast failures.

Contrast Ratio

14.5:1
AA Normal
AA Large
AAA Normal
AAA Large

Heading Preview

Body text rendered in your selected colors. This is how your content will look — check if it's comfortable to read at normal paragraph sizes.

12px caption · secondary information

URL Scanner

Scan any site for WCAG issues

Palette Explorer

Pick a seed color and get WCAG-compliant harmonies.

AI Color Recommendations

This feature is not yet available. We're actively building it — if you'd like early access or have ideas to share, reach out and we'll prioritize your needs.

Contact Us

Frequently Asked Questions

Do WCAG contrast rules apply the same way in dark mode?
Yes — WCAG contrast ratios work identically regardless of which color is lighter or darker. A light text on a dark background must still meet 4.5:1 (AA) or 7:1 (AAA). However, the visual perception is different: light text on dark backgrounds appears to 'glow' or bloom (halation), which can make the same mathematical ratio feel less readable in dark mode. This is why dark-mode-optimized designs often target slightly higher ratios.
What's the best text color for dark mode backgrounds?
Pure white (#FFFFFF) on pure black (#000000) gives 21:1 — technically perfect but visually harsh. Most dark mode designs use slightly off-white text (#E5E7EB or similar) on near-black backgrounds (#111827 or #0F172A), yielding 14-17:1. This reduces eye strain while staying well above the 4.5:1 minimum. Avoid pure white text on dark gray (#333) — it creates uncomfortable glare for many users.
Why does my brand color fail in dark mode when it passes in light mode?
This is the most common dark mode gotcha. Brand colors optimized for white backgrounds (like a medium blue #3B82F6 at 4.6:1 on white) often fail dramatically on dark backgrounds (#3B82F6 on #111827 is only ~2.3:1). You need a lighter tint of your brand color for dark mode — typically 20-40% lighter. Our AI suggestions can find dark-mode-safe brand color variants automatically.
Does WCAG 2.2 add any dark-mode-specific contrast rules?
WCAG 2.2 doesn't add dark-mode-specific contrast criteria, but SC 1.4.11 (Non-Text Contrast) becomes more important in dark mode: focus rings, selection indicators, input borders, and toggle states must all meet 3:1 against dark backgrounds. The most common dark mode violation is a focus ring at #374151 against a #1F2937 background — invisible to keyboard users.
Should I check contrast differently for OLED dark modes?
OLED dark modes use pure black (#000000) backgrounds, which yield the highest possible contrast ratios. This is good for accessibility — even lighter text colors pass easily. However, pure white text on pure black can cause ghosting and eye strain on OLED screens. The sweet spot is text at ~#D1D5DB (15.3:1) on #000000 — high contrast without the harshness. Our tool lets you test exact OLED-safe values.

Related Tools

WCAG AA CheckerText Contrast CheckerButton Contrast CheckerIcon Contrast Checker