Skip to main content

WCAG Design Examples

Visual do/don't examples for WCAG 2.2 AA criteria — use these when explaining issues to clients or reviewing designs.

21 examples

Color & Contrast

1.4.1

Use of Color

Level A
Color cannot be the only way to convey information. Always pair color with text, icons, or patterns.
Accessible
✓Complete✕Failed▲Pending

Color + icon + text label for each status

Inaccessible

Color-only status indicators — colorblind users can't differentiate

1.4.3

Contrast (Minimum)

Level AA
Text must have at least 4.5:1 contrast ratio against its background. Large text (18pt+ or 14pt bold) needs 3:1.
Accessible

This text is readable

#374151 on #FFFFFF = 10.9:1 ✓

Dark gray text on white exceeds 4.5:1 ratio

Inaccessible

This text is hard to read

#9CA3AF on #FFFFFF = 2.7:1 ✕

Light gray text fails minimum contrast requirement

1.4.11

Non-text Contrast

Level AA
UI components (buttons, inputs, icons) need 3:1 contrast against adjacent colors.
Accessible

Input border has 5:1 contrast against white background

Inaccessible

Faint border only has 1.3:1 contrast — barely visible

Images & Text

1.1.1

Non-text Content

Level A
All meaningful images need descriptive alt text. Decorative images should be marked as decorative (empty alt).
Accessible

alt="Bar chart showing 40% revenue growth in Q3"

Alt text describes the content and meaning of the chart

Inaccessible

alt="chart.png"

Filename as alt text provides no meaningful information

1.4.5

Images of Text

Level AA
Use real text instead of images of text. Exceptions: logos and essential presentations where text styling is critical.
Accessible

Welcome to Our Service

<h2> with CSS styling

Real text with web font — scalable, translatable, screen reader compatible

Inaccessible
Welcome to Our ServicePNG

hero-banner.png

Text baked into image — can't resize, translate, or read with screen reader

Layout & Structure

1.3.1

Info and Relationships

Level A
Visual structure must be reflected in semantic structure. Annotate heading levels (H1→H2→H3) in your designs.
Accessible

[H2]

Account Settings

[H3]

Profile Information

Heading levels annotated for developers to implement correctly

Inaccessible

Account Settings

Profile Information

Styled as bold text — no semantic heading

Subheading styled as bold text — screen readers won't recognize it as a heading

1.3.4

Orientation

Level AA
Content must work in both portrait and landscape orientations. Don't lock users to a single orientation.
Accessible
Portrait
↔
Landscape

Design adapts to both orientations — user chooses their preference

Inaccessible
✓
✗

Locked to portrait only — users with mounted devices can't rotate

1.4.4

Resize Text

Level AA
Text must be resizable up to 200% without loss of content or functionality. Use flexible containers.
Accessible
Normal
200%

Container grows with text — nothing gets cut off or overlaps

Inaccessible
Normal
200%

Fixed-height container clips enlarged text — content is lost

1.4.10

Reflow

Level AA
Content must reflow at 320px width without horizontal scrolling (simulating 400% zoom).
Accessible
Card content stacks vertically at narrow widths

Layout adapts and stacks vertically at narrow widths

Inaccessible

This content gets c...

Fixed-width content gets cut off or requires horizontal scroll

Focus & Keyboard

2.4.7

Focus Visible

Level AA
All interactive elements must have a clearly visible focus indicator when navigated via keyboard.
Accessible

Clear focus ring with 3:1 contrast, 2px offset from element

Inaccessible

No visible focus indicator — keyboard users can't see where they are

2.4.11

Focus Not Obscured

Level AA
Focused elements must not be completely hidden by sticky headers, footers, or overlays.
Accessible
📌 Sticky Header

✓ Input is fully visible below header

Page scrolls so focused element appears below sticky header

Inaccessible
📌 Sticky Header

✕ Top of input hidden under header

Focused input is partially covered by sticky header — user can't see full element

2.4.3

Focus Order

Level A
Tab order should follow logical reading order (usually left-to-right, top-to-bottom).
Accessible
1
2
3
4

Tab order: 1 → 2 → 3 → 4

Tab order matches visual order: 1 → 2 → 3 → 4

Inaccessible
3
1
4
2

Tab order: 1 → 4 → 2 → 3

Tab order jumps randomly: 1 → 4 → 2 → 3 — confusing for keyboard users

Navigation

2.4.1

Bypass Blocks

Level A
Provide a "Skip to main content" link so keyboard users can bypass repeated navigation.
Accessible

Skip link appears on focus, positioned at top of page

Inaccessible
HomeProductsServicesAboutContact

No skip link — keyboard users must tab through all nav links every time

2.4.4

Link Purpose

Level A
Link text must describe the destination. Avoid generic text like "click here" or "read more".
Accessible
View pricing details →

Link text clearly describes where it goes

Inaccessible
For pricing information, click here

"Click here" provides no context when read out of context

2.4.6

Headings and Labels

Level AA
Headings and form labels must clearly describe their topic or purpose. Be specific, not vague.
Accessible

Shipping Address

Heading and label clearly describe what information is needed

Inaccessible

Section 2

Generic labels provide no context about what to enter

Target Size

2.5.8

Target Size (Minimum)

Level AA
Interactive targets must be at least 24×24 CSS pixels. Recommended: 44×44px for touch interfaces.
Accessible
+
44×44px
−
44×44px

Touch-friendly target size, easy to tap accurately

Inaccessible
+
20×20px
−
20×20px

Tiny targets are hard to tap, especially for users with motor impairments

Forms & Errors

3.3.2

Labels or Instructions

Level A
Form inputs must have persistent visible labels. Placeholder text alone is not sufficient.
Accessible

Persistent label above input — visible before, during, and after typing

Inaccessible

Placeholder-only label disappears when user starts typing

3.3.1

Error Identification

Level A
Errors must be identified with text, not just color. Include icon + text description.
Accessible

!Please enter a valid email address

Red border + error icon + descriptive text message

Inaccessible

Only red border — colorblind users may not notice the error

3.3.3

Error Suggestion

Level AA
When an error is detected, provide suggestions for how to fix it.
Accessible

!Password must be at least 8 characters with 1 number

Error message explains exactly what's needed to fix the issue

Inaccessible

!Invalid password

Generic error gives no guidance on how to fix the problem

Consistency

3.2.3/4

Consistent Navigation & Identification

Level AA
Navigation and UI components must appear in the same order and use the same labels across all pages.
Accessible

Page 1

HomeSearchCartAccount

Page 2

HomeSearchCartAccount

Same nav order and labels on both pages

Inaccessible

Page 1

SearchCartAccount

Page 2

AccountFindBasket

Order changed, labels renamed (Search→Find, Cart→Basket) — confusing

3.2.6

Consistent Help

Level A
Help mechanisms (chat, contact info, FAQ links) must appear in the same relative location across pages.
Accessible

Page 1

?

Page 2

?

Help button stays in bottom-right corner on all pages

Inaccessible

Page 1

?

Page 2

?

Help button moves from bottom-right to top-left — users can't find it