WCAG Contrast Checker
Test color contrast ratios against WCAG 2.1 AA and AAA accessibility standards
Embed This Tool
Add this tool to your website with customizable styling
How to Use
- 1 Enter foreground color — Enter your text (foreground) color using hex, RGB, or HSL format, or use the color picker.
- 2 Enter background color — Enter your background color in any supported format.
- 3 View contrast results — See the contrast ratio and pass/fail status for WCAG AA and AAA levels.
- 4 Use suggested colors — If your combination fails, apply the suggested colors that meet WCAG requirements.
- 5 Share or copy results — Copy the results text or share the URL with your color combination.
Frequently Asked Questions
What is WCAG?
WCAG (Web Content Accessibility Guidelines) is a set of international standards developed by the W3C for making web content accessible to people with disabilities, including visual, auditory, physical, speech, cognitive, and neurological disabilities.
What contrast ratio is needed for WCAG compliance?
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.
What is considered large text?
Large text is defined as 18pt (24px) or larger for regular weight fonts, or 14pt (18.5px) or larger for bold fonts. Large text has lower contrast requirements because it is easier to read.
Why is color contrast important?
Sufficient color contrast ensures that text is readable for people with low vision, color blindness, or in challenging lighting conditions. It also improves readability for all users.