Check WCAG AA and AAA contrast ratios between any two colors. Live preview with pass/fail badges.
Aa — Large text sample (24px+)
Normal body text sized at 16px — does this look readable?
Small label or caption at 14px.
21.00:1
Contrast ratio
PassMeets WCAG AA for normal text
Normal text
< 18pt regular / 14pt bold
AA (4.5:1)Pass
AAA (7:1)Pass
Large text
≥ 18pt regular / 14pt bold
AA (3:1)Pass
AAA (4.5:1)Pass
UI components
Icons, borders, inputs
AA (3:1)Pass
Based on WCAG 2.1 success criteria 1.4.3 (AA), 1.4.6 (AAA), and 1.4.11 (UI components).
About Color Contrast Checker
Color Contrast Checker calculates the WCAG 2.1 contrast ratio between any foreground and background color pair. It shows instant pass/fail results for AA and AAA compliance across normal text, large text, and UI components. Use it to ensure your designs meet accessibility standards before shipping.
Frequently Asked Questions
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors. AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
Text that is 18pt (24px) or larger in regular weight, or 14pt (approximately 18.67px) or larger in bold weight qualifies as large text under WCAG 2.1.
Why do AA and AAA exist?
AA is the legal minimum for most accessibility regulations worldwide. AAA is the enhanced standard for maximum readability — useful for body text and critical UI where legibility is paramount.
Does this apply to icons and borders?
Yes. WCAG 1.4.11 (Non-text Contrast) requires a minimum 3:1 ratio for UI components like icons, input borders, and focus indicators against their adjacent colors.