WCAG 2.2 AA Checklist for Designers
For: Product designers, UX designers, design system maintainers
WCAG 2.2 has 78 success criteria across 4 principles. As a designer, you don't need to memorize all of them — your engineering and QA teams handle the technical ones. But there are ~28 criteria that get decided in the design tool, before code exists. If they're wrong in Figma, they'll be wrong in production. This checklist is those 28.
References: WCAG 2.2 (W3C Recommendation, Oct 2023) · WAI-ARIA 1.2
Want to audit color contrast against this checklist on real screens — instantly, from your phone?
Use AccessAudit AI — runs offline, captures photo evidence per item, exports a sharable PDF.
Perceivable — Color & Contrast
Body text contrast ≥4.5:1 against background
WCAG 1.4.3
Large text (≥18pt regular or 14pt bold) contrast ≥3:1
WCAG 1.4.3
UI controls and icons contrast ≥3:1 against adjacent colors
WCAG 1.4.11
Focus indicator contrast ≥3:1 against unfocused state
WCAG 2.4.7, 2.4.11
Information not conveyed by color alone (icons, labels, patterns supplement)
WCAG 1.4.1
Link text distinguishable from surrounding text by more than color (underline, weight)
WCAG 1.4.1
Perceivable — Imagery & Media
Decorative images marked decorative (alt="") in design hand-off
WCAG 1.1.1
Informative images have meaningful alt text (not "image of", not file name)
WCAG 1.1.1
Functional images (icon buttons) have alt describing the action
WCAG 1.1.1
Videos have captions specified, autoplay disabled
WCAG 1.2.2, 1.4.2
Operable — Focus & Targets
Touch targets ≥24×24px (WCAG 2.2 new SC)
WCAG 2.5.8
Focus indicators visible on all interactive elements
WCAG 2.4.7
Focus order matches visual order (no jumping)
WCAG 2.4.3
Skip-to-main-content link in design (engineering will wire)
WCAG 2.4.1
Hover states have keyboard equivalents designed
WCAG 2.1.1
Operable — Motion & Time
Animations respect prefers-reduced-motion (alternative state designed)
WCAG 2.3.3
No content flashes >3× per second (seizure risk)
WCAG 2.3.1
Timeouts have user warning + extension control
WCAG 2.2.1
Understandable — Forms
Every input has a visible persistent label (not just placeholder)
WCAG 3.3.2
Required fields indicated visually + textually
WCAG 3.3.2
Error messages near the field, descriptive ("Email must contain @")
WCAG 3.3.1, 3.3.3
Field purpose tagged for autocomplete (email, name, address)
WCAG 1.3.5
Login forms support password manager autofill
WCAG 2.2 SC 3.3.7-9
Robust — Naming
Page title unique, descriptive, designed
WCAG 2.4.2
Headings used hierarchically (H1 → H2 → H3, no skipping)
WCAG 1.3.1, 2.4.6
Region landmarks identifiable (header, nav, main, aside, footer)
WCAG 1.3.1
Status messages designed (toast, snackbar, banner) with icon + text
WCAG 4.1.3
Form errors don't rely on color alone (icon + text + position)
WCAG 1.4.1, 3.3.1
Run this on your phone
Point your iPhone camera at any color pair to see WCAG contrast ratio + pass/fail in real time. 100% on-device.