Color Contrast Checker - WCAG AA & AAA Accessibility Test Free

WebAIM's 2025 analysis of the top one million home pages found that colour contrast failures appear on over 83% of websites - making it the single most common web accessibility issue, ahead of missing alt text, missing form labels, and empty buttons. The scale of this problem is not from malicious intent but from designers and developers not having easy access to real-time contrast feedback during the design process.

Sufficient colour contrast is not just a compliance requirement - it is a usability requirement for a very large proportion of users. Approximately 300 million people worldwide have colour vision deficiency. Hundreds of millions more have low vision, age-related contrast sensitivity loss, cataracts, or simply view screens in bright sunlight that washes out colour contrast. Text that is readable in a dark room in ideal viewing conditions may be completely illegible for a significant portion of real users.

The European Accessibility Act (EAA) entered enforcement across EU member states in June 2025, and the ADA in the United States has seen thousands of accessibility-related website lawsuits annually. WCAG Level AA - which this checker validates - is the standard referenced by most of these regulations. The most frequent failing element in enforcement actions is colour contrast.

AA Normal Text (4.5:1): The primary standard for body text, navigation links, labels, and any text under 18pt (24px) or under 14pt (18.67px) bold. This is the ratio that 4.5 times the minimum luminance difference required by the WCAG committee to compensate for 20/40 visual acuity - the typical acuity of people in their 80s.

AA Large Text (3:1): A lower threshold applies to large text - 18pt (24px) or larger in normal weight, or 14pt (18.67px) or larger in bold weight. Large text is inherently easier to read, so a lower contrast ratio is sufficient for compliance. Headlines, section titles, and large navigation items often qualify for this category.

AA UI Components (3:1): Non-text elements - form input borders, checkbox outlines, icon graphics, progress bar fills, button borders - must achieve 3:1 against their adjacent background colour. This is one of the most frequently overlooked requirements, particularly for light-grey input borders on white backgrounds.

AAA Normal Text (7:1): The enhanced standard compensates for 20/80 visual acuity - significant low vision without assistive technology. Not legally required by most regulations, but strongly recommended for healthcare, government, and education sites where users with low vision are more likely to visit without assistive technology.

AAA Large Text (4.5:1): The enhanced standard for large text. This is the same ratio as AA normal text - a good baseline to target even for headings if you want to push beyond the minimum.