WCAG 2.1 AA Fundamentals for Designers

WCAG 2.1 organizes all accessibility requirements under four principles that form the acronym POUR. Perceivable means users must be able to perceive all information — images need alt text, videos need captions, and color must not be the only way to convey meaning. Operable means all functionality must be operable via keyboard and other assistive technologies — no time limits that cannot be extended, no content that causes seizures (no flashing more than 3 times per second). Understandable means content and UI operation must be understandable — form errors must be described in text, not just in red color, and language must be identified. Robust means content must work with current and future assistive technologies — use semantic HTML, valid ARIA, and standard interaction patterns that screen readers understand. Every WCAG success criterion maps to one of these principles. When a design decision seems unclear, ask: which principle does it violate?

WCAG success criteria are organized into three conformance levels. Level A is the minimum — without A-level compliance, some users cannot access the content at all. Level AA is the standard target required by most legal frameworks (ADA in the US, EN 301 549 in Europe, AODA in Canada). It includes all A criteria plus additional requirements like sufficient color contrast, captions for live audio, and text resize to 200% without horizontal scrolling. Level AAA is the highest — not all content can achieve AAA, so it is not a general legal requirement but may be appropriate for specific contexts (government services, healthcare).

For designers, target AA. That means every design decision — color choice, font size, focus indicator visibility, error message format — passes all A and AA success criteria. Do not wait for developers to flag accessibility issues in code review; catch them at the design stage when changes are 10x cheaper to fix.

1Level A: 30 success criteria (minimum, required)
2Level AA: +20 more criteria (legal standard, required)
3Level AAA: +28 more criteria (enhanced, context-specific)
4Total WCAG 2.1 AA: 50 success criteria your designs must satisfy

The 10 WCAG success criteria most directly relevant to visual design decisions:

1.1.1 Non-text Content (A): Every image needs an alt attribute. Decorative images use alt="".

1.3.3 Sensory Characteristics (A): Do not say 'click the green button' — say 'click the Submit button'.

1.4.1 Use of Color (A): Color must not be the only way to convey information — use icons + color for status.

1.4.3 Contrast Minimum (AA): Normal text requires 4.5:1 contrast ratio against its background.

1.4.4 Resize Text (AA): Text must reflow usably at 200% zoom without horizontal scrolling.

1.4.10 Reflow (AA): Content must be usable in a single column at 320px viewport width (mobile).

1.4.11 Non-text Contrast (AA): UI components and focus indicators need 3:1 contrast against neighbors.

1.4.13 Content on Hover/Focus (AA): Tooltips triggered by hover must be persistent, dismissable, and hoverable.

2.4.7 Focus Visible (AA): Keyboard focus must be visible — default browser outlines are often insufficient.

3.3.1 Error Identification (A): Errors must be described in text, not only indicated by red color.

WCAG 2.1 added several criteria specifically addressing mobile and responsive design challenges:

1.3.4 Orientation (AA): Content must not lock to portrait or landscape — users with devices mounted to wheelchairs often cannot rotate. Do not use CSS to force orientation unless the content is genuinely mode-specific (a piano keyboard app that requires landscape is a valid exception).

1.4.10 Reflow (AA): At 320px CSS pixels wide (representing 400% zoom on a 1280px screen), content must be accessible without horizontal scrolling. Design mobile layouts at 320px minimum viewport width.

2.5.3 Label in Name (A): For interactive elements with visible text labels, the accessible name must contain that visible text. A button labeled 'Submit' visually must not have aria-label='Confirm' (different from the visible text), which confuses voice control users who say 'click Submit'.

2.5.5 Target Size (AAA — but aim for it): Touch targets should be at least 44×44 CSS pixels. This is AAA but practically required for usable mobile interfaces. WCAG 2.2 made a 24×24px version of this AA (2.5.8).

1/* Minimum touch target — aim for 44x44px */
2.button {
3  min-height: 44px;
4  min-width: 44px;
5  /* Or use padding to achieve the target size */
6  padding: 12px 24px;
7}

The WCAG Quick Reference at w3.org/WAI/WCAG21/quickref is your primary tool for design accessibility review. Filter it to AA only to see exactly which criteria apply. During a design review, work through these questions systematically:

For every image: What is the alt text? Is it empty for decorative images, descriptive for informative ones?

For every color used to convey meaning: Is there a non-color indicator (icon, text, pattern)?

For every text element: Does it pass 4.5:1 contrast on its background? (Use Figma's built-in contrast checker or Contrast plugin)

For every interactive element: Is there a visible focus state with 3:1 contrast against its surroundings?

For every error state: Is the error described in text, not just indicated by red color?

For every form field: Is there a persistent visible label (not just placeholder text)?

Run this checklist in Figma during design reviews, not just in code during QA. Catching an insufficient focus indicator at the design stage takes 5 minutes; catching it in production and deploying a fix takes hours.