Color Contrast Checker for WCAG 2.2: Accessibility Compliance Guide 2026

Most UIs fail WCAG 2.2 color contrast requirements. The failure rate among audited production applications in 2026 sits at over 60% — and the most common violation is also the easiest to fix once you know the rule.

Color contrast is not a nice-to-have. It is a legal requirement under ADA and Section 508 in the US, the European Accessibility Act in the EU, and analogous legislation across dozens of jurisdictions. Beyond compliance, it is the single accessibility fix with the broadest reach: contrast issues affect users with low vision, color blindness, users in bright sunlight, and users on cheap displays. That is not an edge case — it is a substantial fraction of your audience.

This guide covers what WCAG 2.2 actually requires, what changed from 2.1, how to use a color contrast checker correctly, and the common mistakes teams make when they think they are compliant but are not. Use our free color contrast checker tool to test your specific color pairs as you read through the requirements.

Try it yourself: Free Color Contrast Checker — free, no signup, runs in your browser.

What WCAG 2.2 Requires for Color Contrast

WCAG 2.2, finalized in October 2023, retains the core contrast requirements from WCAG 2.1 but adds new success criteria for non-text elements and focus indicators. The contrast requirements apply at two conformance levels:

Level AA (minimum legal standard):

• Normal text (under 18pt / 14pt bold): 4.5:1 contrast ratio
• Large text (18pt+ / 14pt+ bold): 3:1 contrast ratio
• UI components and graphical objects: 3:1 against adjacent colors
• Focus indicators (new in 2.2): at least 3:1 contrast between focused and unfocused states

Level AAA (enhanced):

• Normal text: 7:1 contrast ratio
• Large text: 4.5:1 contrast ratio

The contrast ratio is calculated using the relative luminance formula defined in the WCAG spec. Relative luminance is a measure of how much light a color emits, ranging from 0 (pure black) to 1 (pure white). The ratio between the lighter color and the darker color determines contrast. A 21:1 ratio (black on white) is the maximum; 1:1 (identical colors) is the minimum.

What Changed in WCAG 2.2

WCAG 2.2 introduced three changes relevant to contrast compliance that many teams have not yet caught up with.

Success Criterion 2.4.11 — Focus Appearance (Minimum): Focus indicators must have a minimum area (the perimeter of the focus target × 2 CSS pixels) and sufficient contrast. This is new. Prior to 2.2, developers could satisfy focus requirements with a nearly invisible outline. In 2.2, the focus ring must be visually distinct at 3:1 contrast. Many custom component libraries fail this criterion out of the box.

Success Criterion 2.4.12 — Focus Appearance (Enhanced) [AAA]: At AAA, the focus indicator must enclose the entire component and have a 4.5:1 contrast ratio. Most design systems aiming for full AAA compliance need an audit of their focus state implementations.

Removal of 4.1.3 (Status Messages): Not a contrast issue directly, but a removed criterion from the final WCAG 2.2 spec that may affect how you interpret older compliance reports.

The practical takeaway: if your accessibility audit was done before October 2023, it did not evaluate 2.4.11 or 2.4.12. Your focus indicators may be out of compliance even if every other contrast check passed.