ColorAble - Color Blind and Vision Simulator for Figma
by Mehedi Hasan
Design for everyone. Simulate vision impairments and generate accessibility audits instantly.
Installs
32
Likes
9
Users
270
Views
204
Preview
About this plugin
ColorAble: Accessibility Simulator for FigmaColorAble empowers designers to build inclusive digital products by simulating various vision impairments directly within Figma. It bridges the empathy gap, allowing you to see your designs through the eyes of users with colour vision deficiencies.
Core Features1. Real-Time Vision SimulationInstantly preview your selected Figma layers under different vision conditions without leaving your canvas.
Protanopia (Red-blind)Deuteranopia (Green-blind)Tritanopia (Blue-blind)Achromatopsia (Total colour blindness)Blurred Vision (Low visual acuity)Low Contrast (Sensitivity loss)2. Interactive Comparison SliderA split-screen interface allows you to compare the original design against the simulated view side-by-side.
Drag-to-Compare: Use the handle to reveal differences dynamically.
Sticky Controls: The comparison tool stays accessible even as you scroll through large previews.
3. Professional Accessibility ReportGenerate a comprehensive audit of your design with a single click.
One-Click Generation: Creates a new Figma Frame containing simulations for all 12+ vision types.
Smart Layout: Automatically organizes views into a clean, 2-column grid.
Educational Context: Includes descriptions of each impairment to help stakeholders understand the "why."Documentation Ready: Bakes in a timestamp and "Generated by ColorAble" footer, perfect for design handoffs.
4. High-Fidelity ExportNeed a single simulation for a slide deck?
Export to Canvas: Places a high-resolution, polished card of the current simulation right onto your canvas.
How It HelpsFor DesignersDesign with Confidence: Validate colour contrast choices early in the process.
Seamless Workflow: No need to export screenshots to external tools; everything happens inside Figma.
For Teams & StakeholdersVisual Proof: The generated reports serve as tangible artifacts to discuss accessibility during design reviews.
Empathy Building: Helping non-designers visualize accessibility issues makes it easier to prioritize fixes.
More accessibility tools plugins
View allStark - Contrast & Accessibility AI Checker
by Stark
Fix Color Contrast and Typography issues and add WCAG annotations for a smooth design to dev handoff
Contrast
by Alex Carr
Quickly check and scan for contrast issues on gradients, images, blends, and fills.
Color Palettes ( Colorsinspo ) : Color & Accessibility Tools
by Manthankumar Satani
A free suite of integrated Color & Accessibility tools - 10+ tools free access 🔥
A11y - Color Contrast Checker
by Kelly Gorr
Text color accessibility