ColorAble - Color Blind and Vision Simulator for Figma

About this plugin

ColorAble: Accessibility Simulator for Figma

ColorAble 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 Features

1. Real-Time Vision Simulation

Instantly preview your selected Figma layers under different vision conditions without leaving your canvas.

1. Protanopia (Red-blind)
2. Deuteranopia (Green-blind)
3. Tritanopia (Blue-blind)
4. Achromatopsia (Total colour blindness)
5. Blurred Vision (Low visual acuity)
6. Low Contrast (Sensitivity loss)

2. Interactive Comparison Slider

A 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 Report

Generate a comprehensive audit of your design with a single click.

1. One-Click Generation: Creates a new Figma Frame containing simulations for all 12+ vision types.
2. Smart Layout: Automatically organizes views into a clean, 2-column grid.
3. Educational Context: Includes descriptions of each impairment to help stakeholders understand the "why."
4. Documentation Ready: Bakes in a timestamp and "Generated by ColorAble" footer, perfect for design handoffs.

4. High-Fidelity Export

Need 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 Helps

For Designers

1. Design with Confidence: Validate colour contrast choices early in the process.
2. Seamless Workflow: No need to export screenshots to external tools; everything happens inside Figma.

For Teams & Stakeholders

1. Visual Proof: The generated reports serve as tangible artifacts to discuss accessibility during design reviews.
2. Empathy Building: Helping non-designers visualize accessibility issues makes it easier to prioritize fixes.