123 Design StudioThis WCAG checklist is written for designers, not just auditors: the decisions that make or break accessibility are made in Figma long before a developer touches code. It is grounded in the Web Content Accessibility Guidelines (WCAG) 2.2 from the W3C's Web Accessibility Initiative (WAI). Use it as a design-review gate, not a last-minute fix.
Color and contrast
Contrast is the most common and most fixable failure. WCAG 2.2 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (roughly 24px, or 19px bold). Non-text elements such as icons, input borders and focus indicators need at least 3:1 against their background.
- Check text against its actual background, including over images and gradients.
- Never rely on color alone to convey meaning; pair it with text, icons or patterns.
- Test your palette in both light and dark themes.
Focus visible and keyboard access
Every interactive element must be reachable and operable by keyboard, with a clearly visible focus indicator. WCAG 2.2 strengthened this: the new Focus Not Obscured criterion means a focused element must not be entirely hidden behind sticky headers, cookie banners or chat widgets.
- Design a deliberate focus state — don't let the browser default get suppressed by accident.
- Ensure logical tab order matches visual order.
- Account for sticky/overlapping UI so focused controls stay visible.
Target size and pointer
The new WCAG 2.2 Target Size (Minimum) criterion asks for interactive targets of at least 24×24 CSS pixels, or adequate spacing around smaller ones. This protects users with motor impairments and anyone on a touch screen.
- Give buttons, icons and links enough padding and spacing.
- Avoid tiny close buttons and cramped icon rows.
Forms and errors
Forms are where accessibility most directly affects conversion. Every field needs a persistent, programmatically associated label — placeholder text is not a label. WCAG 2.2 also added Accessible Authentication and Redundant Entry, which discourage forcing users to memorize or re-type information they already provided.
- Use visible labels, not placeholder-only fields.
- Describe errors in text, identify the field, and suggest a fix.
- Don't disable copy-paste in password or code fields.
- Avoid cognitive-test CAPTCHAs as the only authentication path.
Motion and animation
Animation can trigger vestibular disorders. Respect the prefers-reduced-motion media query and avoid parallax, autoplaying carousels and large unexpected movement. Any content that moves, blinks or scrolls automatically for more than five seconds needs a pause control.
Images and alternative text
Every meaningful image needs alt text that conveys its purpose, not its appearance. Decorative images should have an empty alt attribute so screen readers skip them. For complex charts, provide a text summary or data table nearby.
Designer's WCAG 2.2 quick checklist
- Text contrast 4.5:1 (3:1 for large text and UI elements)
- Visible, deliberate focus state on every control
- Focused elements never fully obscured
- Interactive targets at least 24×24px or well spaced
- Visible labels and clear, specific error messages
- No color-only meaning
- Reduced-motion alternative provided
- Meaningful alt text; decorative images marked empty
Why this is now a legal baseline
Accessibility is increasingly a legal requirement, not a nicety. The European Accessibility Act sets binding obligations for many digital products and services across the EU. Meeting WCAG 2.2 at level AA is the practical way to satisfy these expectations and, more importantly, to serve every user. Bake the checklist into design reviews so issues are caught when they are cheap to fix.