Color Contrast
Checker

Understanding WCAG Color Contrast Requirements

Color contrast is one of the most fundamental aspects of web accessibility. When text doesn't have enough contrast against its background, it becomes difficult or impossible to read for the roughly 300 million people worldwide with low vision, the 250 million with color vision deficiencies, and even for anyone using a screen in bright sunlight.

The Web Content Accessibility Guidelines (WCAG) establish specific, measurable contrast ratios to ensure text remains readable. These ratios are calculated using a formula that compares the relative luminance of two colors — essentially measuring the difference in perceived brightness between your text and its background.

What Is a Contrast Ratio?

A contrast ratio is expressed as a number from 1:1 (no contrast — identical colors) to 21:1 (maximum contrast — pure black on pure white). The ratio is calculated by comparing the relative luminance values of two colors using a formula defined in WCAG 2.1 Success Criterion 1.4.3.

For example, dark gray (#333333) on white (#FFFFFF) has a contrast ratio of 12.63:1 — comfortably above all WCAG thresholds. Light gray (#999999) on white drops to just 2.85:1, failing even the most lenient WCAG requirement.

WCAG AA vs. AAA: Which Level Do You Need?

WCAG defines two conformance levels for contrast. Level AA is the standard referenced by most legal and regulatory frameworks, including the Americans with Disabilities Act (ADA), Section 508 of the Rehabilitation Act, and the European Accessibility Act (EAA). It requires:

• 4.5:1 for normal text (below 18pt / 24px)
• 3:1 for large text (18pt+ or 14pt+ bold)

Level AAA provides enhanced accessibility and is recommended for body text, especially on content-heavy pages. It requires:

• 7:1 for normal text
• 4.5:1 for large text

While AAA isn't legally required in most jurisdictions, meeting these higher thresholds significantly improves readability for all users and provides a stronger legal safety net against accessibility lawsuits.

Non-Text Contrast (WCAG 1.4.11)

WCAG 2.1 introduced Success Criterion 1.4.11, which extends contrast requirements beyond text to user interface components and graphical objects. Form field borders, buttons, icons, chart segments, and focus indicators must all maintain a minimum 3:1 contrast ratio against adjacent colors. You can use this color contrast checker to verify those combinations too.

Common Contrast Mistakes to Avoid

Low contrast is the most common accessibility failure on the web. The WebAIM Million study found that 81% of home pages had insufficient text contrast — making it the single most prevalent WCAG violation. Here are the most frequent mistakes:

• Light gray text on white backgrounds — a trend in "minimalist" design that sacrifices readability for aesthetics
• Placeholder text in form fields — default placeholder colors rarely meet the 4.5:1 requirement
• Text over images or gradients — contrast can vary dramatically across the image, creating invisible text in some areas
• Colored links without underlines — links that rely only on color must have 3:1 contrast against surrounding body text
• Disabled state styling — while WCAG exempts disabled controls from contrast requirements, users still need to identify them

Beyond Individual Colors: Full-Page Scanning

While this color contrast checker is great for testing individual color pairs during design, real websites have hundreds of color combinations across elements, states, and responsive breakpoints. A single page might use different text colors for headings, body text, links, buttons, captions, and error messages — each against potentially different backgrounds.

For comprehensive contrast auditing, automated accessibility scanners like RatedWithAI can test every text element on your page simultaneously, flagging the specific elements that fail and showing you exactly what to fix.