Blog Post

Color Contrast Checker: WCAG Requirements, Tools, and Common Mistakes

Q: What is the best free color contrast checker?

WebAIM Contrast Checker is the most widely used free tool for checking individual color pairs. For scanning entire pages, axe DevTools (free browser extension) checks every text element against WCAG 1.4.3. Chrome DevTools has a built-in contrast checker that shows ratios when you inspect any text element.

Q: Does color contrast apply to images and icons?

Yes. WCAG 1.4.11 (Non-text Contrast) requires 3:1 contrast for meaningful graphical objects and UI components. Icons that convey information, chart segments, and form control borders all need to meet this threshold. Decorative images and logotypes are exempt.

Q: How do I check contrast on text over images or gradients?

Automated tools struggle with complex backgrounds. Use the Colour Contrast Analyser (CCA) desktop app with its eyedropper to sample the worst-case background point. OverlayQA's AI analysis evaluates text over complex backgrounds qualitatively, flagging areas where contrast appears insufficient.

Q: Is APCA replacing the WCAG contrast formula?

No. APCA was removed from the WCAG 3.0 Working Draft in July 2023 and is not part of any current W3C standard. WCAG 3.0 is years from completion (estimated 2030+). Comply with WCAG 2 contrast ratios for legal and regulatory safety.

Low contrast text is the #1 accessibility violation on the web, affecting 83.9% of the top million websites. WCAG requires 4.5:1 contrast for normal text, 3:1 for large text, and 3:1 for non-text UI components. This guide covers the exact requirements, the best contrast checker tools, and how to integrate contrast testing into your workflow.

WCAG Color Contrast Requirements

WCAG 2.1 Level AA requires 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). WCAG 1.4.11 requires 3:1 for non-text UI components: borders, icons, form controls, and focus indicators. Level AAA raises the bar to 7:1 for normal text. Exceptions: incidental text, logotypes, and decorative images.

How Color Contrast Ratios Work

A contrast ratio compares relative luminance of two colors, producing a value between 1:1 (identical) and 21:1 (black on white). Below 3:1 fails for everything. 3:1 to 4.49:1 passes for large text and UI elements only. 4.5:1 to 6.99:1 passes AA for all text. 7:1+ passes AAA. Ratios are threshold values with no rounding: 4.499:1 fails.

Best Color Contrast Checkers Compared (2026)

Tools compared: WebAIM Contrast Checker (free web tool), Colour Contrast Analyser by TPGi (desktop eyedropper), Chrome DevTools (built-in), Stark (Figma plugin), axe DevTools (page scanner), WAVE (visual annotations), and OverlayQA (axe-core + AI visual analysis + project tracker export).

What Color Contrast Checkers Miss

Automated checkers miss text over complex backgrounds (gradients, images), non-text contrast (WCAG 1.4.11 for icons and borders), dynamic/interactive states (hover, focus, error), and dark mode theme variants. OverlayQA's AI analysis supplements axe-core by evaluating non-text contrast and text over complex backgrounds qualitatively.

The 7 Most Common Color Contrast Mistakes

Light gray text on white, brand colors that fail at body text sizes, colored links indistinguishable from body text, form borders that disappear, invisible focus indicators on dark backgrounds, error states relying only on color, and dark mode afterthoughts.

The Cost of Ignoring Color Contrast

83.9% of top websites have low contrast text. 34 violations per page average. 3,117 ADA lawsuits filed in 2025. $30,000 average settlement. Contrast violations are the easiest failure for plaintiffs to prove with automated scanning tools.

APCA: The Future of Contrast Checking?

APCA was removed from the WCAG 3.0 Working Draft in July 2023 and is not part of any current standard. WCAG 3.0 is estimated for 2030+. Comply with WCAG 2 ratios for legal safety.

How to Integrate Contrast Checking Into Your Workflow

Design phase: check contrast on every text style with Stark or similar. Development: use Chrome DevTools and axe-core in CI. Design QA: run page-level scans with OverlayQA, export violations to your project tracker, and track accessibility score over time.

Frequently Asked Questions

What color contrast ratio does WCAG require?

4.5:1 for normal text, 3:1 for large text (18pt/14pt bold), 3:1 for non-text UI components. Level AAA requires 7:1 for normal text.

What is the best free color contrast checker?

WebAIM Contrast Checker for individual color pairs. axe DevTools for scanning entire pages. Chrome DevTools for checking during development.

Does color contrast apply to images and icons?

Yes. WCAG 1.4.11 requires 3:1 for meaningful graphical objects and UI components. Decorative images and logotypes are exempt.

How do I check contrast on text over images or gradients?

Use the Colour Contrast Analyser eyedropper on the worst-case background point. OverlayQA's AI flags text over complex backgrounds qualitatively.

Is APCA replacing the WCAG contrast formula?

No. APCA was removed from WCAG 3.0 in July 2023 and is not part of any current standard.