Designers
Good design is accessible design.
Accessibility isn’t just a developer’s job. As designers, we shape how people experience products.
By considering accessibility early — before handoff — we prevent barriers before a single line of code is written.
Many WCAG failures originate in design decisions — not development.
Quick Wins
Apply these checks to every mockup before handoff
Check Contrast
Ensure text has a contrast ratio of at least 4.5:1 against the background (3:1 for large text). Don't forget icons and UI borders!
Don't Use Color Alone
Never rely solely on color to convey meaning. Use text labels, icons, or patterns (e.g., for error states or charts).
Define Focus States
Design visible focus indicators for all interactive elements. Never remove the default browser outline without replacing it.
Touch Targets
Buttons and interactive elements should be at least 44x44 pixels (or 24x24px with sufficient spacing) to support users with motor impairments.
Logical Structure
Annotate your headings (H1, H2, H3). They are not just for style: they create the navigation map for screen reader users.
Animations
Avoid auto-playing or looping animations unless users can pause or disable them.
Tools for Designers
Use these tools during design, not just during review
Stark (Figma Plugin)
Simulate color blindness and check contrast directly in your canvas
Color Oracle
Color blindness simulator for Windows/Mac that filters your entire screen
Inclusive Design & Personas
Designing for these users helps everyone, including people in temporary or situational limitations
Visual (Trevor)
- Profile: Low vision & color blindness
- Needs: High contrast, scalable text (up to 200%), compatibility with screen magnifiers
- Design Tip: Avoid thin fonts and gray-on-gray text
Auditory (Ama)
- Profile: Profoundly Deaf
- Needs: Captions for all video content, visual alternatives for audio cues (notifications)
- Design Tip: Ensure error messages aren’t just a “beep” sound
Cognitive (Sam)
- Profile: ADHD & Anxiety
- Needs: Clean layouts, predictable navigation, no auto-playing media, plain language
- Design Tip: Break complex forms into small, manageable steps
Motor (Maria)
- Profile: Parkinson’s (Hand tremors)
- Needs: Large click targets, full keyboard navigability (cannot use a mouse reliably).
- Design Tip: Ensure menus don’t close too quickly on hover.
Quick design checks
Keyboard check
Can a user move through this without a mouse?
Zoom check (200%)
Does content reflow or break?
Contrast check
Run it on key screens, not just one component
Motion check
Is motion essential? If not, could it be distracting?
Patterns to reuse
Designing for these users helps everyone, including people in temporary or situational limitations
Navigation
Forms and validation
Modals and dialogs
Alerts and notifications
Tables and data views
🚨 Custom patterns = higher accessibility risk
Figma Best Practices
Annotations + Comments
- Free, already available
- Best place to document focus order and intent
Sections + Page Naming
Use sections to describe flows and states
Helps devs understand context, not just screens
Design Tokens / Styles
Encode intent (focus, error, disabled) into styles
Reduces ambiguity during handoff
Simple Handoff Checklist
Focus order
Keyboard behavior
Error states
Empty states
