Color Contrast Checker WCAG 2.2 Compliance Guide What the New Accessibility Standards Mean for Your Website

WCAG 2.1 was published in 2018. WCAG 2.2 was published in 2023. If your website was built to WCAG 2.1 standards, you might assume you are compliant with the latest accessibility guidelines. You might be wrong. WCAG 2.2 added new success criteria — and a color contrast checker is still the first tool you need to verify compliance. Here is what changed, what stayed the same, and how to check your site against the latest standards.

What WCAG 2.2 Added (and Why Contrast Still Matters)

WCAG 2.2 introduced several new success criteria: Focus Appearance (2.4.11) — keyboard focus indicators must have a contrast ratio of at least 3:1 against the surrounding area, and the focus indicator must be at least 2 CSS pixels thick. This is a contrast requirement for an element that most websites style minimally or not at all. The default browser focus indicator (a thin dotted line) does not meet this requirement. You need to design a custom focus indicator with sufficient contrast.

Target Size (2.5.8): Interactive elements (buttons, links, form controls) must have a target size of at least 24×24 CSS pixels. This is not a contrast requirement, but it affects how you design buttons — the colors you choose for your buttons must now work on a minimum 24×24 pixel area, which is larger than many existing button designs.

Consistent Help (3.2.6): Help mechanisms (contact forms, chat, documentation links) must appear in the same relative order across pages. This is a structural requirement, not a visual one. But the help mechanism must also meet contrast requirements — the link or button to access help must have sufficient contrast against its background.

All existing WCAG 2.1 contrast requirements remain in effect: 4.5:1 for normal text, 3:1 for large text, and 3:1 for UI components and graphical objects. The new criteria add to these requirements. They do not replace them.

How to Check Your Site Against WCAG 2.2

Step 1: Check text contrast (existing requirement, still required). Use the contrast checker to verify all text elements meet the 4.5:1 (normal) or 3:1 (large) ratio. Check: body text, headings, links (including hover and visited states), button text, form labels, and placeholder text in input fields. These are the most common contrast failures.

Step 2: Check UI component contrast (existing requirement, still required). Verify that all interactive elements have 3:1 contrast against adjacent colors. Check: button backgrounds vs page backgrounds, form input borders vs page backgrounds, and icon colors vs their backgrounds.

Step 3: Check focus indicator contrast (new WCAG 2.2 requirement). This is the most commonly missed new requirement. Verify that your keyboard focus indicator has 3:1 contrast against both: the element's background and the surrounding page background. The focus indicator must be visible regardless of what it is on top of. A focus indicator that is visible against a white background might be invisible against a dark section of the page. Check it against all backgrounds on your site.

Step 4: Check target size (new WCAG 2.2 requirement). Measure your interactive elements. They must be at least 24×24 pixels. Small icons, tiny close buttons, and inline text links are the most common failures.

Why This Matters Beyond Compliance

WCAG 2.2 compliance is not just about avoiding lawsuits. It is about: reaching more users (15-20% of the population has some form of disability — visual, motor, cognitive, or auditory), improving usability for everyone (accessible design is better design — higher contrast text is easier for everyone to read, larger buttons are easier for everyone to click), and improving SEO (Google ranks accessible sites higher — accessibility is a ranking factor).

Check your site at color contrast checker — WCAG 2.2 compliance starts with contrast. The new requirements are in addition to the old ones. Both matter. Both are checkable in seconds.