Contrast Checker for Dark and Black Backgrounds
Check whether text and UI colours are readable on a dark or black background. Pick a text colour and a background colour to get the WCAG 2 contrast ratio and an AA / AAA verdict for normal text, large text and interface components, with a live preview.
| Use | AA | AAA |
|---|---|---|
| Normal text | ||
| Large text (24px+, or 18.66px+ bold) | ||
| UI components and graphics | – |
Large heading text
Normal body text at 16px. The quick brown fox jumps over the lazy dog.
Small caption text at about 13.6px.
Try a common dark-theme pair:
WCAG contrast requirements
- AA, normal text: at least 4.5:1 (success criterion 1.4.3).
- AA, large text: at least 3:1. Large means at least 18pt (24 CSS px) regular or 14pt (about 18.66 CSS px) bold.
- AAA: 7:1 for normal text and 4.5:1 for large text (1.4.6).
- Non-text contrast: 3:1 for UI component boundaries, focus indicators and meaningful graphics against adjacent colours (1.4.11, AA).
The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colour, so it runs from 1:1 (identical colours) to 21:1 (white on black). The checker uses exact values without rounding, because WCAG says a ratio of 4.49:1 does not meet 4.5:1.
Reference: common colours on dark backgrounds
| Preview | Pair | Ratio | AA text | AAA text | Large / UI (3:1) |
|---|---|---|---|---|---|
| Aa | #FFFFFF on #000000 | 21:1 | Pass | Pass | Pass |
| Aa | #E0E0E0 on #121212 | 14.19:1 | Pass | Pass | Pass |
| Aa | #FFD700 on #000000 | 14.97:1 | Pass | Pass | Pass |
| Aa | #D4AF37 on #000000 | 9.99:1 | Pass | Pass | Pass |
| Aa | #9E9E9E on #121212 | 6.99:1 | Pass | Fail | Pass |
| Aa | #BB86FC on #121212 | 7.07:1 | Pass | Pass | Pass |
| Aa | #800000 on #000000 | 1.92:1 | Fail | Fail | Fail |
| Aa | #0000FF on #000000 | 2.44:1 | Fail | Fail | Fail |
Dark reds and pure blue are the usual surprises: #800000 maroon and #0000FF on black fail even the 3:1 large-text threshold, so use them only as decorative accents and lighten them for text (for example #FF6B6B or #4FC3F7). More pairings are on colours that work with a black background, and design guidance is in accessible dark backgrounds.
Limits of a contrast ratio
Contrast ratio is necessary but not sufficient. Text over images, gradients or translucent "glass" panels has no single background colour, so test it against the lightest part behind it, or add a solid overlay. Very thin or small fonts can still be hard to read at a passing ratio, and very high contrast (pure white on pure black) causes a glow or halation effect for some readers, which is why many dark themes use off-white on off-black. See shades of black for off-black options and their ratios.