WCAG for Designers — Creating Compliant Visual Designs

In this tutorial, you will learn about WCAG for Designers. We cover key concepts, practical examples, and best practices to help you master this topic.

Designers can achieve WCAG Compliance through accessible color palettes meeting 4.5:1 contrast, visible focus states, zoom-friendly layouts, proper typography with adequate spacing, and ARIA-annotated Figma components.

What You'll Learn

You will learn the specific WCAG requirements that affect visual design and how to incorporate them into your design Process.

Why It Matters

Many Accessibility issues originate in design. An accessible design prevents accessibility bugs before they reach development.

Real-World Use

DodaTech's design system includes WCAG-validated color tokens, pre-designed focus states, and Figma annotation layers with ARIA information for every component.

flowchart TD
  A[WCAG for Designers] --> B[Color and Contrast]
  A --> C[Focus States]
  A --> D[Layout and Zoom]
  A --> E[Typography]
  A --> F[Component Design]
  B --> G[4.5:1 text, 3:1 UI]
  B --> H[Not color alone]
  C --> I[2px minimum, 3:1 contrast]
  D --> J[Works at 400% zoom]
  D --> K[Content reflows]
  E --> L[Font size 16px minimum]
  E --> M[Line height 1.5]
  F --> N[Touch targets 44px]
  F --> O[ARIA annotations in Figma]

Color and Contrast

WCAG Requirements

1.4.3 Contrast Minimum: 4.5:1 for normal text, 3:1 for large text (18px bold or 24px regular). 1.4.11 Non-text Contrast: 3:1 for UI components and graphical objects. 1.4.1 Use of Color: color is not the only means of conveying information.

Design Tokens

Create accessible color tokens that specify contrast ratios.

/* Accessible color tokens for designers */
:root {
  --color-primary: #005fcc;      /* 4.6:1 on white, passes AA */
  --color-text-primary: #1a1a1a; /* 14.5:1 on white, passes AAA */
  --color-text-secondary: #5a5a5a; /* 5.2:1 on white, passes AA */
  --color-error: #d32f2f;        /* 4.6:1 on white, passes AA */
  --color-disabled: #999999;     /* 2.8:1 on white, FAILS AA — only for disabled */
}

Focus States

WCAG 2.2 Requirements

2.4.11 Focus Appearance: The focus indicator must be at least 2px thick perimeter with 3:1 contrast against the unfocused state. 2.4.12 Focus Not Obscured: The focus indicator must not be hidden by other content.

Design the focus state in your component files. Do not leave it to developers to guess.

/* Focus state designed by design team */
.button:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.2);
}

.input:focus-visible {
  border-color: #005fcc;
  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.3);
}

Layout and Zoom

WCAG Requirements

1.4.4 Resize Text: Text can be resized up to 200 percent without loss of content or functionality. 1.4.10 Reflow: Content can be presented without loss of information at 400 percent zoom.

Design for fluid layouts that work across viewport sizes. Test designs at 400 percent zoom.

Typography

WCAG Requirements

1.4.12 Text Spacing: Users can override text spacing without losing content. Minimum 16px font size for body text. Line height 1.5. Letter spacing 0.12em. Word spacing 0.16em.

/* Typography system that supports WCAG spacing overrides */
body {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

Component Design

Touch Targets

2.5.8 Pointer Target Spacing (AA): Targets must be at least 24 by 24 CSS pixels. Design all interactive elements with minimum 44 by 44 pixel touch targets.

ARIA Annotations in Figma

Add ARIA annotations to your Figma components. Specify role, accessible name, states, and keyboard interactions.

## Toggle Button Component

### ARIA
- role: switch
- state: aria-checked (true/false)
- name: via aria-label or visible label

### Keyboard
- Enter/Space: toggle state
- Tab: move to toggle
- Focus: visible 2px blue outline

Common Mistakes

1. Designing Without Contrast Checking

Designing with colors that look good but fail contrast. Check every color combination with a contrast tool.

2. Forgetting to Design Focus States

Leaving focus states undefined means developers guess. This leads to inconsistent or non-compliant focus indicators.

3. Creating Fixed-Width Layouts

Fixed-width layouts break at high zoom levels. Design with relative units and responsive breakpoints.

4. Using Only Color for Status

Color blind users cannot distinguish red from green. Add icons, patterns, or text labels.

5. Specifying Font Sizes Below 16px

Small text is hard to read and violates the spirit of 1.4.4. Use 16px minimum for body text.

6. Ignoring Touch Target Size

Links and buttons need adequate spacing. 44 by 44 pixels minimum for touch targets.

7. Not Annotating ARIA in Design Files

Developers need ARIA information to implement correctly. Include it in your design specifications.

Practice Questions

1. What is the minimum contrast ratio for normal text?

4.5:1 for normal text, 3:1 for large text.

2. What does 2.4.11 Focus Appearance require?

The focus indicator must be at least 2px thick with 3:1 contrast against the unfocused state.

3. How should designs handle zoom to 400 percent?

Fluid layouts with relative units should reflow content without horizontal scrolling at 400 percent zoom.

4. What is the minimum touch target size for WCAG 2.2?

24 by 24 CSS pixels minimum, with adequate spacing from adjacent targets.

5. Challenge: Audit a Figma component you designed. Check if it has a designed focus state, meets contrast requirements, and would reflow at 400 percent zoom.

FAQ

Mini Project

Create a Figma component for a button with: accessible color tokens, designed focus state, 44px minimum height, ARIA annotation (role, keyboard interaction), and disabled state with contrast note.

What's Next

Learn about WCAG for Developers with implementation techniques for accessible code. Then explore WCAG for Content for writers and editors.