WCAG Color Contrast Checker
A color contrast checker measures the ratio of luminance between two colors and tells you whether that ratio passes accessibility standards. WCAG 2.1 requires a ratio of at least 4.5:1 for normal text (AA) or 7:1 for the stricter AAA level.
Aa — The quick brown fox
Ratio: 5.70:1
WCAG AA normal: ✅ Pass
WCAG AA large: ✅ Pass
WCAG AAA normal: ❌ Fail
Pick a foreground (text) color and a background. The tool computes the relative luminance of both, divides the larger by the smaller, and shows the contrast ratio. WCAG AA passes at 4.5:1 for normal text, 3:1 for large text. AAA passes at 7:1. If your design fails, nudge the foreground toward black or white until it passes. Contrast is the single most ignored part of web accessibility — failing it makes your text unreadable for people with low vision.
Think you know color well enough?
Test your color skills →