How to Check Color Contrast for Accessibility (WCAG)
Published September 21, 2026 · 2 min read
Text that's technically readable to you might still fail accessibility guidelines for users with low vision. This tool calculates the exact WCAG contrast ratio between a foreground and background color and tells you which compliance levels it passes.
Try Color Contrast CheckerSteps
- 1
Open the Color Contrast Checker tool
Go to the contrast checker.
- 2
Choose your foreground and background colors
Pick the text color and the background it sits on.
- 3
Read the contrast ratio
See the exact calculated ratio, like 4.5:1.
- 4
Check compliance
See whether the pair passes WCAG AA and AAA standards, for both normal and large text.
Frequently asked questions
WCAG AA requires at least 4.5:1 for normal text (3:1 for large text); AAA is stricter, requiring 7:1 for normal text (4.5:1 for large text) — this tool tells you exactly which levels your color pair meets.
Larger text is inherently easier to read at lower contrast, so WCAG sets a more lenient threshold for large text (generally 18pt or larger, or 14pt bold) than for normal body text.
Yes — it uses the same relative luminance and contrast ratio formula defined in the WCAG specification, not an approximation.
Because the check is instant and exact, this is a quick way to verify your color choices before they become an accessibility problem for real users.