WCAG Accessibility: The Designer's Complete Checklist

Over 1 billion people worldwide live with some form of disability. Designing for accessibility isn't charity - it's professional competence. Products that exclude users through poor accessibility are poorly designed products, full stop.

This checklist covers the essential WCAG 2.1 requirements every designer should know, organized by design decision rather than technical spec.

Color & Contrast

• Text must have a contrast ratio of at least 4.5:1 against its background (AA standard)
• Large text (18px+ bold or 24px+ regular) requires at least 3:1 contrast
• UI components and graphical objects require at least 3:1 contrast
• Color must not be the only way to convey information (e.g., error states need icons/text, not just red)
• Test your palette with color blindness simulators - 8% of men have some form of color vision deficiency

Typography & Readability

• Body text should be at least 16px (1rem) on web
• Line height should be at least 1.5x the font size for body text
• Paragraph spacing should be at least 2x the font size
• Avoid justified text - ragged right is easier to read for users with dyslexia
• Ensure text can be resized up to 200% without breaking the layout

Interactive Elements

• Touch targets should be at least 44x44px (WCAG 2.1 AA)
• Focus states must be visible - never use outline: none without providing an alternative
• All interactive elements must be reachable via keyboard navigation (Tab, Enter, Escape)
• Link text must be descriptive - "Click here" tells a screen reader nothing. Use "View our pricing" instead
• Form inputs need visible labels - placeholder text alone is insufficient

Navigation & Structure

• Use semantic HTML: <nav>, <main>, <header>, <footer>, <section>
• Implement a logical heading hierarchy: one h1 per page, don't skip levels
• Provide skip navigation links for keyboard users
• Breadcrumbs improve navigation for all users, especially screen reader users
• Ensure a consistent navigation structure across all pages

Images & Media

• All informative images need descriptive alt text
• Decorative images should have empty alt attributes (alt="")
• Videos need captions and ideally transcripts
• Don't autoplay video or audio with sound - provide controls
• Animated content should respect prefers-reduced-motion

Forms

• Every input needs an associated <label>
• Error messages should be specific: "Email is required" not "Invalid input"
• Error messages should appear near the relevant field, not just at the top of the form
• Don't rely on color alone for validation feedback - add icons and text
• Required fields should be clearly marked

Testing Your Design

• Navigate your entire interface using only a keyboard
• Use a screen reader (VoiceOver on Mac, NVDA on Windows) to experience your design
• Test with browser zoom at 200%
• Use automated tools like axe DevTools or Lighthouse for baseline checks
• Include users with disabilities in your usability testing when possible

Conclusion

Accessibility is not a feature - it's a quality standard. The good news is that accessible design is almost always better design for everyone. Clearer contrast, better typography, logical navigation, and descriptive content improve the experience for all users, not just those with disabilities. Build it in from the start, and you won't have to retrofit it later.