WCAG Contrast Checker
Test your color combinations for WCAG accessibility compliance. Ensure your designs are readable for all users.
Sample Text
The quick brown fox jumps over the lazy dog.
Small text for reference (14px equivalent)
Colors
Contrast Ratio
WCAG AA (Minimum)
WCAG AAA (Enhanced)
WCAG Guidelines Explained
What is WCAG?
Web Content Accessibility Guidelines (WCAG) are international standards for making web content accessible to people with disabilities, including visual impairments.
AA vs AAA
AA is the minimum recommended level for most websites. AAA is the highest level, ideal for government sites and critical information.
Normal vs Large Text
Normal text: Below 18pt (or 14pt bold). Requires higher contrast. Large text: 18pt+ (or 14pt+ bold). Allowed lower contrast ratios.
Contrast Ratio Scale
- ● 7:1+ = AAA for all text
- ● 4.5:1+ = AA normal, AAA large
- ● 3:1+ = AA large text only
- ● Below 3:1 = Fails all standards
FAQs
Why is color contrast important?▼
Low contrast makes text difficult to read, especially for people with visual impairments, color blindness, or in poor lighting conditions. Good contrast ensures readability for everyone.
Is WCAG AA compliance legally required?▼
In many countries, web accessibility is required by law for government sites and some businesses. WCAG AA is typically the standard. Check your local regulations (ADA in US, EAA in EU).
What about images and icons?▼
Non-text elements like icons should have at least 3:1 contrast against adjacent colors. Text in images must meet the same contrast requirements as regular text.