Design for Accessibility Best Practices

Overview

Designing for accessibility means creating experiences that work for the widest possible range of users, including people with disabilities. Accessible design is not a constraint—it's an opportunity to create better products for everyone.

This comprehensive guide covers best practices for designing accessible digital experiences, from color and typography to interactive elements and navigation. By following these principles, designers can create inclusive products that comply with WCAG standards and provide excellent user experiences for all.

Inclusive Design Principles

Inclusive design is a methodology that considers the full range of human diversity regarding ability, language, culture, gender, age, and other forms of human difference.

Design Philosophy

Design for One, Extend to Many

Designing for users with specific accessibility needs often leads to improvements that benefit everyone. For example:

• Captions: Originally for deaf users, now used by people in noisy environments, non-native speakers, and everyone
• Curb cuts: Designed for wheelchair users, also help parents with strollers, delivery workers, travelers with luggage
• Voice control: Essential for users with motor impairments, practical for hands-free situations
• High contrast: Critical for users with vision impairments, helpful in bright sunlight

Shift-Left Accessibility

Integrate accessibility from the beginning of the design process:

• Research phase: Include users with disabilities in user research
• Ideation phase: Consider accessibility constraints and opportunities
• Wireframing: Plan accessible structure and navigation
• Visual design: Ensure color contrast and readability
• Prototyping: Test early with assistive technologies

Nothing About Us Without Us

Include people with disabilities throughout the design process:

• Conduct user research with diverse participants
• Include accessibility experts in design reviews
• Test prototypes with users of assistive technologies
• Gather feedback from the disability community
• Hire designers with disabilities

Understanding User Diversity

Consider the broad spectrum of abilities and situations:

Visual Disabilities

• Blindness: Rely on screen readers, need alternative text and semantic structure
• Low vision: May use screen magnification, high contrast, or larger text
• Color blindness: Cannot distinguish certain colors (red/green most common)
• Light sensitivity: Benefit from dark modes and reduced motion

Motor Disabilities

• Limited mobility: May only use keyboard, switch access, or eye tracking
• Tremor: Benefit from large touch targets and error tolerance
• Temporary injury: May have limitations with one-handed use

Hearing Disabilities

• Deafness: Need captions for video content
• Hard of hearing: May use volume controls and visual indicators

Cognitive Disabilities

• Learning disabilities: Benefit from clear language and consistent patterns
• Memory issues: Need clear navigation and progress indicators
• Attention disorders: Benefit from reduced distractions and clear focus
• Autism: May prefer reduced animations and predictable interactions

Situational Limitations

• Bright sunlight: Issues with screen visibility
• Noisy environment: Audio cannot be heard
• Quiet environment: Voice input cannot be used
• One hand occupied: Holding baby, carrying bags, etc.

Color and Contrast

Color is a powerful design tool, but must be used carefully to ensure accessibility.

Contrast Ratios

WCAG defines minimum contrast ratios to ensure text and interactive elements are perceivable:

Text Contrast Requirements

• Normal text (under 18pt): 4.5:1 minimum (WCAG AA)
• Large text (18pt+ or 14pt+ bold): 3:1 minimum (WCAG AA)
• Enhanced (AAA): 7:1 for normal text, 4.5:1 for large text

Non-Text Contrast Requirements

• UI components: 3:1 contrast against adjacent colors (buttons, form fields, etc.)
• Focus indicators: 3:1 contrast against background
• Graphic objects: 3:1 contrast for meaningful graphics

Contrast Testing Tools

• WebAIM Contrast Checker: webaim.org/resources/contrastchecker
• Stark (Figma/Sketch Plugin): Integrated contrast checking
• Colour Contrast Analyser: Desktop application
• Adobe Color: Includes accessibility checker

Color as Communication

Never rely on color alone to convey information. Always provide additional visual cues.

Common Issues

• Form validation: Don't use only red/green to indicate errors/success
• Charts: Don't rely exclusively on color to differentiate data
• Status indicators: Combine color with icons or text
• Links: Don't rely on color alone to identify links

Best Practices

• Error states: Use red color + error icon + error text
• Success states: Use green color + checkmark icon + success text
• Charts: Use patterns, labels, and color together
• Links: Use underline or other visual distinction beyond color
• Required fields: Use asterisk or "required" text, not just color

Accessible Color Palettes

Create color systems that work for everyone:

Creating Accessible Palettes

1. Start with a base color
2. Create light and dark variations
3. Test each combination for contrast
4. Test with colorblindness simulators
5. Document approved combinations

Palette Creation Tools

• Adobe Color: Colorblindness simulation and accessibility tools
• Coolors: Generate accessible color schemes
• Leonardo: Adobe's adaptive color palette tool
• Accessible Color Generator: learnui.design/tools/accessible-color-generator.html

Colorblindness Considerations

• Deuteranopia (Red-Green): Most common, affects ~5% of males
• Protanopia (Red-Green): Second most common
• Tritanopia (Blue-Yellow): Rare
• Test with simulators: Ensure palettes work for all types

Typography

Typography is fundamental to readability and accessibility. Thoughtful typographic choices make content accessible to users with dyslexia, low vision, and cognitive disabilities.

Font Selection

Recommended Font Characteristics

• Sans-serif: Generally more readable on screen (Arial, Helvetica, Open Sans, Roboto)
• Clear letterforms: Distinct characters (avoid ambiguous 'l', 'I', '1')
• Adequate x-height: Larger x-height improves readability at small sizes
• Avoid decorative fonts: For body text (use sparingly for headings)
• OpenDyslexic: Consider offering as an option for users with dyslexia

Fonts to Avoid

• Script or handwriting fonts for body text
• Fonts with very thin strokes
• All-caps fonts (harder to read)
• Overly condensed or extended fonts

Text Size and Scaling

Minimum Sizes

• Body text: 16px minimum (1rem)
• Small text: 14px minimum (0.875rem)
• Large text: 18px+ (1.125rem+)
• Headings: Progressive scale (H1 largest, H6 smallest)

Relative Units

• Use rem or em instead of pixels
• Allows users to scale text with browser settings
• Ensures text scales properly at 200% zoom

h1 { font-size: 2.5rem; }    /* 40px */
h2 { font-size: 2rem; }      /* 32px */
h3 { font-size: 1.75rem; }   /* 28px */
h4 { font-size: 1.5rem; }    /* 24px */
h5 { font-size: 1.25rem; }   /* 20px */
h6 { font-size: 1rem; }      /* 16px */
body { font-size: 1rem; }    /* 16px */
small { font-size: 0.875rem; } /* 14px */

Line Height and Spacing

Line Height (Leading)

• Body text: 1.5 minimum (WCAG requirement)
• Headings: 1.2-1.3 (tighter is acceptable)
• Longer lines: Increase line height to 1.6-1.8

Paragraph Spacing

• Between paragraphs: 1.5-2x the line height
• After headings: 0.5-1x heading line height

Letter Spacing

• Body text: 0.12em minimum between letters
• Word spacing: 0.16em minimum between words
• Avoid tight tracking: Especially for all-caps

Line Length

• Optimal: 50-75 characters per line
• Maximum: 80 characters per line
• Too short: Under 40 characters (choppy reading)
• Too long: Over 100 characters (eye fatigue)

Text Alignment

• Left-aligned: Best for left-to-right languages
• Avoid justified: Creates uneven spacing (difficult for dyslexic users)
• Centered: Use sparingly (headings, short blocks)
• Right-aligned: Only for right-to-left languages or design accent

Layout and Spacing

Well-designed layouts with appropriate spacing improve comprehension and reduce cognitive load.

Visual Hierarchy

Clear visual hierarchy helps all users understand content structure:

Establishing Hierarchy

• Size: Larger elements appear more important
• Weight: Bold text attracts attention
• Color: High contrast elements stand out
• Spacing: More space around important elements
• Position: Top left receives most attention (in LTR languages)

Heading Hierarchy

• Use progressive sizes (H1 > H2 > H3 etc.)
• Don't skip heading levels
• Ensure visual hierarchy matches semantic hierarchy
• Use consistent heading styles throughout

White Space

White space (negative space) is essential for readability and comprehension:

Benefits of White Space

• Reduces visual clutter
• Improves focus and attention
• Separates content groups
• Provides visual breathing room
• Increases aesthetic appeal

Spacing System

Use a consistent spacing scale:

4px  (0.25rem) - Tiny
8px  (0.5rem)  - Small
16px (1rem)    - Medium (Base)
24px (1.5rem)  - Large
32px (2rem)    - XLarge
48px (3rem)    - XXLarge
64px (4rem)    - Huge

Responsive Design

Accessible design must work across all screen sizes:

Mobile-First Approach

• Design for the smallest screen first
• Progressively enhance for larger screens
• Ensure touch targets are adequate (44x44px minimum)
• Test at various viewport sizes

Breakpoints

• Mobile: 320px - 767px
• Tablet: 768px - 1023px
• Desktop: 1024px+
• Large Desktop: 1440px+

Responsive Typography

• Scale font sizes appropriately for each breakpoint
• Adjust line length for readability
• Maintain contrast at all sizes
• Test zoom functionality up to 200%

Interactive Elements

Buttons, links, and other interactive elements must be clearly identifiable and easy to use.

Buttons

Button Design Best Practices

• Clear affordance: Should look clickable/tappable
• Adequate size: Minimum 44x44px (mobile), 32x32px (desktop)
• Sufficient contrast: 3:1 against background
• Clear labeling: Descriptive text (not just icons)
• Consistent style: Primary, secondary, tertiary hierarchy

Button States

Design clear visual states for all interactions:

• Default: Normal state
• Hover: Mouse over (desktop only)
• Focus: Keyboard focus (critical for accessibility)
• Active: Being pressed/clicked
• Disabled: Not interactive (still ensure perceivable)

Button Variants

• Primary: Main call-to-action (one per screen/section)
• Secondary: Alternative actions
• Tertiary/Ghost: Less prominent actions
• Destructive: Delete, remove actions (use red carefully)

Links

Link Design

• Visually distinct: Underlined or clearly distinguishable from body text
• Color + underline: Don't rely on color alone
• Adequate size: Large enough to click/tap easily
• Descriptive text: Avoid "click here" or "read more"
• Visited state: Consider showing visited links differently

Link States

• Default: Normal link appearance
• Hover: Change on mouse over
• Focus: Visible focus indicator
• Active: Being clicked
• Visited: Previously visited (optional but helpful)

Focus Indicators

Focus indicators are critical for keyboard users. They must be clearly visible.

Focus Indicator Requirements

• Visible: Must be easy to see
• High contrast: 3:1 contrast against background
• Sufficient thickness: 2px minimum outline
• Consistent: Same style across all focusable elements
• Never remove: Don't use outline: none without replacement

Focus Indicator Patterns

• Outline: Simple border around element
• Glow/Shadow: Soft shadow effect
• Inset: Inner border or inset shadow
• Underline: For text links
• Background change: Combined with outline

/* Simple outline */
button:focus {
  outline: 2px solid #0052CC;
  outline-offset: 2px;
}

/* Glow effect */
button:focus {
  box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.5);
  outline: none; /* Only if replaced with visible alternative */
}

/* Combined approach */
a:focus {
  outline: 2px solid #0052CC;
  outline-offset: 2px;
  background-color: rgba(0, 82, 204, 0.1);
}

Touch Targets

Touch targets must be large enough for accurate interaction:

Size Requirements

• Mobile (iOS): 44x44pt minimum
• Mobile (Android): 48x48dp minimum
• Desktop: 24x24px minimum (32x32px recommended)

Spacing Between Targets

• <strong>Mobile:</strong> 8px minimum spacing between targets
• <strong>Desktop:</strong> 4px minimum spacing
• More spacing reduces tap errors

Form Design

Forms are critical interaction points. Accessible form design ensures all users can successfully enter information.

Labels and Instructions

Label Best Practices

• Always visible: Never use placeholder text as labels
• Position: Above or to the left of input fields
• Clear text: Concise, descriptive labels
• Required fields: Clearly mark with asterisk AND text
• Optional fields: Consider marking as "(optional)"

Instructions

• Provide instructions before the form
• Use help text for complex fields
• Show format examples (e.g., "MM/DD/YYYY")
• Place help text near the relevant field

Error Handling and Validation

Error Message Design

• Clear language: Explain what went wrong and how to fix it
• Specific: Don't just say "error" - be descriptive
• Visible: Place near the field with the error
• Icon + color + text: Don't rely on color alone
• Persistent: Don't auto-dismiss critical errors

Error Summary

• List all errors at the top of the form
• Link to fields with errors
• Announce to screen readers
• Move focus to error summary

Inline Validation

• Provide real-time feedback (after field is filled)
• Show success states for valid inputs
• Don't show errors before user finishes typing
• Use checkmarks or other visual indicators

Input Field Design

Input Field Characteristics

• Adequate size: Minimum 44x44px touch target
• Clear borders: 3:1 contrast against background
• Padding: Sufficient internal padding for text
• Placeholder text: Use sparingly, never as label replacement

Input States

• Default: Empty, ready for input
• Focus: Clear focus indicator
• Filled: Contains user input
• Error: Contains invalid input
• Success: Contains valid input
• Disabled: Not editable (still perceivable)

Grouping Related Fields

• Use fieldsets to group related inputs
• Provide legend for each fieldset
• Visual grouping should match semantic grouping

Navigation Design

Navigation is essential for users to find content and complete tasks.

Menu Design

Primary Navigation

• Clear labels: Descriptive, concise menu items
• Logical order: Most important items first
• Limited items: 5-7 top-level items maximum
• Current page: Clearly indicate current location
• Consistent: Same on every page

Mobile Navigation

• Hamburger menu: Recognize limitations, consider alternatives
• Touch targets: 44x44px minimum
• Clear open/close: Obvious menu state
• Focus management: Move focus to menu when opened

Dropdown Menus

• Keyboard accessible: Arrow keys for navigation
• Hover intent: Don't trigger on accidental hover
• Close mechanism: Escape key closes
• Focus visible: Show focus on menu items

Breadcrumbs

• Show current position in site hierarchy
• Separate items with clear dividers (not just color)
• Make links easy to click
• Mark current page (not clickable)

Skip Navigation

• Provide "Skip to main content" link
• Make visible on focus
• Place as first focusable element
• Jump to main content landmark

Motion and Animation

Motion can enhance user experience, but must be used carefully to avoid triggering vestibular disorders or seizures.

Animation Guidelines

• No flashing: Nothing flashes more than 3 times per second
• Respect preferences: Honor prefers-reduced-motion setting
• Purposeful: Animation should serve a functional purpose
• Subtle: Keep animations gentle and brief
• Optional: Allow users to disable animations

Prefers-Reduced-Motion

/* Standard animation */
.element {
  transition: transform 0.3s ease;
}

/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
  .element {
    transition: none;
    animation: none;
  }
}

Safe Animation Practices

• Fade instead of slide when possible
• Limit parallax effects
• Avoid continuous spinning or rotation
• Provide pause controls for auto-playing content
• Test with users who have vestibular disorders

Icons and Imagery

Icon Design

• Always include text: Don't use icons alone
• Universal symbols: Use widely recognized icons
• Consistent style: Maintain visual consistency
• Adequate size: Minimum 16x16px (24x24px recommended)
• Sufficient contrast: 3:1 against background

Decorative vs. Informative Images

• Decorative: Design should work without them (have empty alt text)
• Informative: Convey information (need descriptive alt text)
• Functional: Part of an interactive element (describe function in alt text)

Image Guidelines

• Ensure images don't contain critical text (or provide text alternative)
• Use captions when additional context is needed
• Provide long descriptions for complex images/diagrams
• Ensure images are responsive and scale appropriately

Content Design

Writing for Accessibility

• Plain language: Use simple, clear language
• Short sentences: 20 words or less when possible
• Active voice: Prefer active over passive
• Clear headings: Descriptive section headings
• Scannable: Use lists, headings, and short paragraphs

Readability

• Aim for 8th grade reading level or lower
• Avoid jargon and technical terms when possible
• Define acronyms on first use
• Use familiar words instead of complex ones

Microcopy

• Button labels: Action-oriented ("Save changes" not "OK")
• Error messages: Helpful and specific
• Empty states: Explain what to do next
• Loading states: Inform users what's happening

Design Systems

Design systems ensure consistency and accessibility across products.

Building Accessible Design Systems

• Accessibility first: Bake accessibility into every component
• Documentation: Document accessibility features and requirements
• Tested components: Test all components for accessibility upfront
• Usage guidelines: Provide clear implementation guidance
• Code examples: Include accessible code snippets

Component Library Checklist

• ☐ All components are keyboard accessible
• ☐ Focus indicators are visible and consistent
• ☐ Color contrast meets WCAG AA standards
• ☐ Touch targets meet minimum size requirements
• ☐ ARIA patterns documented where needed
• ☐ Responsive behavior defined
• ☐ Dark mode support (if applicable)
• ☐ RTL language support (if applicable)

Design Tokens

• Define accessible color palettes
• Standardize spacing scale
• Define typography scale
• Establish focus indicator styles
• Document minimum sizes

Design Tools and Plugins

Figma Plugins

• Stark: Contrast checking, colorblindness simulation, focus order
• A11y - Color Contrast Checker: WCAG compliance checking
• Able: Friction-free accessibility annotations
• Contrast: Quick contrast checking

Sketch Plugins

• Stark: Accessibility toolkit
• Color Contrast Analyser: WCAG compliance

Adobe XD Plugins

• Stark: Comprehensive accessibility tools
• Usecontrast: Contrast checking

Browser Extensions for Designers

• axe DevTools: Accessibility testing
• WAVE: Visual accessibility evaluation
• NoCoffee: Vision impairment simulator
• Colorblindly: Colorblindness simulation

Accessibility Annotations

Annotations communicate accessibility requirements to developers.

What to Annotate

• Heading levels: Mark H1, H2, H3, etc.
• Focus order: Number the tab sequence
• Alt text: Provide suggested alt text for images
• ARIA roles: Specify when needed (button, navigation, etc.)
• States: Document all interactive states
• Keyboard interactions: Specify keyboard behavior
• Screen reader text: Visually hidden but read aloud
• Landmarks: Main, navigation, footer regions

Annotation Methods

• Use design tool comment features
• Create separate annotation layer
• Add to design spec document
• Use accessibility annotation plugins

Collaboration with Development

Designer-Developer Handoff

• Specifications: Provide detailed accessibility specs
• All states: Design all interactive states
• Edge cases: Design error states, empty states, loading states
• Responsive behavior: Define all breakpoints
• Annotations: Include accessibility annotations

Review Process

• Review implementation with developers
• Test prototypes together
• Use screen readers to verify
• Check keyboard navigation
• Verify color contrast in implementation

Documentation

• Create accessibility guidelines document
• Maintain design system documentation
• Document component behavior
• Provide code examples when possible

Design Checklist