Back to Plugins
ColorAble - Color Blind and Vision Simulator for Figma

ColorAble - Color Blind and Vision Simulator for Figma

Design for everyone. Simulate vision impairments and generate accessibility audits instantly.

Plugin Preview

ColorAble - Color Blind and Vision Simulator for Figma 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.

Plugin Details

Version2
CreatedJanuary 7, 2026
Last UpdatedJanuary 8, 2026
CategoryAccessibility tools
CreatorMehedi Hasan
Stats8 installs, 5 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none