WCAG Contrast Checker
Check WCAG 2.x contrast ratio between foreground and background colors with AA and AAA pass indicators.
About this tool
Measure contrast between text and background colors against WCAG guidelines so UI copy stays readable for more users. Includes a live text preview and separate pass/fail badges for normal and large text at AA and AAA levels.
What you get
- Contrast ratio (e.g. 4.5:1) with live recalculation
- Live text preview on the chosen color pair
- WCAG AA pass/fail for normal text
- WCAG AA pass/fail for large text (18pt+ or 14pt+ bold)
- WCAG AAA pass/fail for normal and large text
- Color picker and hex input for foreground and background
How to use
Pick or paste foreground and background colors using the picker or hex fields, then read the ratio and WCAG outcome badges.
Related searches
- contrast checker
- wcag contrast
FAQ
What is WCAG contrast ratio requirement?
Normal text needs at least 4.5:1 for AA and 7:1 for AAA; large text has lower thresholds. The checker shows pass/fail for each level.
How to check if text color meets accessibility standards?
Enter foreground and background hex colors and read the contrast ratio with a live text preview.
What is the difference between WCAG AA and AAA?
AAA targets stricter contrast for maximum readability; AA is the common legal and design baseline for most interfaces.
What contrast ratio is needed for small text?
Body-sized text below roughly 18 pt regular (or 14 pt bold) must meet the normal-text AA ratio of 4.5:1.
How to pick accessible button text color on brand background?
Enter your brand hex as background and trial label colors until AA and AAA rows pass for normal or large text sizes.
By using this tool you agree to our Terms of Use and Privacy Policy. Results are provided as-is without warranty.