WCAG 2.1 Color Contrast Ratio Checker (AA & AAA)
Calculate exact color contrast ratios and verify accessibility compliance for normal text, large text, and UI components.
About This Tool
WCAG Color Contrast Checker computes the exact mathematical contrast ratio between foreground and background colors using relative luminance, providing instant pass/fail ratings for WCAG 2.1 Level AA and AAA standards.
Key Features
Relative luminance mathematical ratio calculation
WCAG 2.1 AA and AAA pass/fail compliance ratings
Live sample text preview card
Color swapping button and curated presets
How to Use This Tool
- Pick or enter text/foreground color and background color.
- View the calculated contrast ratio (e.g. 7.42 : 1).
- Check compliance badges for WCAG AA and AAA ratings.
- Use Swap Colors to test reversed contrast.
Why Use This Tool
- Essential for building accessible, ADA-compliant, and SEO-friendly websites.
- Instant compliance grading for both normal body text and large headings.
- Includes quick one-click contrast presets.
Pro Tips
- Aim for at least 4.5:1 for all essential text to pass Google Lighthouse accessibility audits
- Large text is defined as 18pt (24px) regular or 14pt (18.66px) bold
Frequently Asked Questions
What is the minimum WCAG contrast ratio for regular text?
WCAG Level AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt / 24px) and 3:1 for large text.
What is the requirement for WCAG AAA?
WCAG Level AAA requires an enhanced contrast ratio of 7:1 for normal text and 4.5:1 for large text.