Figma Plugin

Accessibility Checker: Making inclusive design effortless and integrated

UX Research, UX Design, Interviews, Product Design, Prototyping

The Figma Accessibility Checker Plugin bridges the gap between design and accessibility by bringing WCAG compliance testing directly into designers' workflows. By combining automated scanning for technical issues (like contrast and font size) with an interactive, educational checklist for manual verification, the plugin transforms accessibility from an afterthought into an integrated part of the design process. This helps teams create more inclusive digital experiences while reducing development costs and revision cycles by catching issues earlier in the product lifecycle.

Role Solo Designer & Developer

Duration 3 weeks (March'25)

Challenge

Designers often want to create accessible designs but lack practical tools that seamlessly integrate with their workflow. Existing accessibility checks either require specialist knowledge or come too late in the development process, leading to costly reworks.

Ideation and Process

The concept emerged from observing designers struggle to manually check their work against WCAG guidelines. My hypothesis: by combining automated scanning with interactive checklists, I could create a tool that both identifies issues and educates designers about accessibility best practices.

Key Insights from Research:

Designers were enthusiastic about accessibility but often overwhelmed by guidelines
Technical checks (contrast, font size) could be automated
Context-specific guidance was highly valued
Learning while doing was preferable to separate training

Design Exploration:

I sketched multiple approaches for presenting accessibility issues to users, focusing on:

Issue Prioritization - Ordering by severity and impact
Educational Components - Linking directly to relevant guidelines
Progressive Disclosure - Showing technical details only when needed
Interactive Checklist - Supporting manual verification alongside automated checks

Solution:

The final plugin combines:

Automated scanning for common issues (contrast, font size, overlapping elements)
Interactive, persistent checklist for manual verification
Educational resources linked directly to issues
Data persistence to track progress across sessions

Impact & Results

→

93%

of testers

reported learning something new about accessibility

87%

of testers

said they would incorporate the tool into their regular workflow

(avg) accessibility issues

discovered that would have otherwise been missed

100%

of testers

said designs tested with the plugin would need fewer revisions when handed off to development

Key Learnings & Future Improvements

Through developing and testing this plugin, I gained valuable insights that would shape future iterations:

What I Learned:

Behavioral Patterns: Designers were more likely to act on accessibility issues when provided with specific, actionable solutions rather than general guidelines
Technical Challenges: Creating accurate color contrast detection across nested layers revealed limitations in Figma's API that required creative problem-solving
Educational Impact: The most effective learning happened at the moment of issue detection, not through separate resources
Workflow Integration: Tools that fit into existing design processes see dramatically higher adoption than those requiring additional steps

What I'd Improve:

Batch Processing: Implement the ability to scan entire files or pages, not just selected elements
Exportable Reports: Create shareable accessibility reports for team communication and documentation
Pattern Recognition: Develop machine learning capabilities to identify common accessibility patterns across a design system
Customizable Standards: Allow teams to define their own accessibility requirements beyond WCAG guidelines
Real-time Feedback: Explore ways to provide accessibility guidance during the design process rather than only during review

This project reinforced my belief that accessibility should be a foundational element of the design process, not an afterthought. By creating tools that make accessibility both educational and actionable, we can help designers create more inclusive products for everyone.