WCAG Contrast Checker
Pick foreground and background colors. Get the WCAG contrast ratio and pass/fail for AA and AAA. Live preview with sample text.
WCAG contrast
The four WCAG thresholds
| Level | Normal text | Large text (18pt+) |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
What "large text" means: at least 18pt (24px) regular, or 14pt (18.66px) bold. Anything smaller follows the normal-text threshold.
How the ratio is computed
For each color, compute relative luminance (a weighted, gamma-corrected sum of RGB):
L = 0.2126 R + 0.7152 G + 0.0722 B
(R, G, B are linearized — squared / linearization formula)Then the contrast ratio is:
(Lmax + 0.05) / (Lmin + 0.05)
ranging from 1:1 (same color) to 21:1 (black on white)Implementation in this tool follows WCAG 2.1's specification exactly.
Common ratios in popular palettes
| Foreground | Background | Ratio | Result |
|---|---|---|---|
#000 (black) | #fff (white) | 21:1 | AAA, all sizes |
#212529 (Bootstrap dark) | #fff | ~16.1:1 | AAA |
#6b7280 (gray-500) | #fff | ~4.6:1 | AA normal, just barely |
#9ca3af (gray-400) | #fff | ~2.7:1 | Fails normal AA |
#fff | #2563eb (Tailwind blue-600) | ~5.2:1 | AA normal |
#fff | #3b82f6 (blue-500) | ~4.1:1 | Fails AA normal, OK for large |
What contrast doesn't catch
A passing contrast ratio means the foreground/background brightness relationship is good enough. It doesn't catch:
- Color blindness. Two colors with the same luminance can be indistinguishable to some viewers (red/green, blue/yellow).
- Pattern interference. Text over a busy background image often fails real-world readability even if the average colors check out.
- Animation / movement. Text on a video background needs static-frame contrast, but motion makes it harder regardless.
- Font weight and size details. Thin fonts at AA-borderline ratios are still hard to read; thick fonts at the same ratio are easier.
- Anti-aliasing. Sub-pixel rendering can effectively lower contrast at letter edges.
Common patterns
Brand color over white
Most brand colors fail AA on white at normal size. Solutions:
- Use the brand color only at large sizes (headings, hero text).
- Pair brand color with a darker contrast variant for body text.
- Use brand color as a background, with white text on top.
Dark mode
Pure black on pure white (or vice versa) is too high-contrast for long reading. Use slightly off-black/white pairs:
- Light:
#1a1a1aon#fbfbfa= ~17:1 - Dark:
#edededon#111111= ~16:1
Both pass AAA easily and are gentler on eyes than absolute extremes.
Try the related tools
- Color converter — pick or paste any color
- Hex vs RGB vs HSL vs OKLCH — when each format helps
FAQ
What ratio do I need?
WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold and larger). AAA requires 7:1 for normal text and 4.5:1 for large text.
What about dark mode?
Same rules. Dark backgrounds need light enough text — and white text on a navy background can still fail AAA. Test both light and dark themes.
Are these the WCAG 2.x rules or APCA?
This tool uses WCAG 2.x's relative luminance formula, which is what most accessibility audits still check. APCA is the proposed WCAG 3 successor — better-correlated with perception, but not yet finalized. For audits today, target WCAG 2.x.
Does the tool consider color blindness?
Contrast checks luminance only — sufficient for most accessibility issues. For color-blindness simulation, use a dedicated tool (Sim Daltonism on macOS, Color Oracle cross-platform).