Current plugin version: v1.0

weableColor for Figma — Documentation

Product: weableColor for Figma
Last updated: 2026-05-20

Learn Mission Control, Live Inspector, contrast fixes, CSV export, Vision Simulator, and developer handoff for the weableColor Figma plugin.

Overview

weableColor for Figma helps design teams check and improve color contrast inside real Figma files — without exporting to another tool. You get a live accessibility score, layer-level WCAG and APCA (Lc) readouts, in-file fixes, CSV reports for QA and handoff, and optional color-vision simulation.

Who it's for: product designers, design systems leads, and accessibility champions who work in Figma daily.

What it's not: A legal WCAG audit certificate or a replacement for semantic/HTML accessibility testing. It focuses on color contrast in your Figma document.

Get the plugin: Figma Community (link at publish) · Support: support@weable.pro

Quick start

Open the plugin from Plugins → weableColor.
Wait for the Live Accessibility Score in Mission Control; the score is also echoed in the sticky header (page scope).
Select a layer to score selection + descendants, or deselect for full-page scope.
Scan Canvas anytime to refresh the current page.
Expand Live Inspector rows to inspect pairs; use Analyze for fixes.
Export Report after a scan to copy a CSV for Slack, email, or Sheets.

First win in 60 seconds: Select a button with low contrast → open its Inspector row → Apply a suggested fix → watch the score move.

Mission Control

Mission Control is your home base in the plugin.

UI element	Purpose
Score ring	0–100 live score for current scope (page or selection)
Issues	Count + dropdown with quick actions and “View all in Inspector”
Scan Canvas	Re-scans the current page (tooltip: “Scan current page”)
Export	CSV accessibility report (requires prior scan)
Share	Team snapshot, developer snippet, email, Community link
⋯ More	Export, Share, documentation, quick help, Vision Simulator, About

The sticky header stays visible while you scroll the panel so score and actions are always one tap away.

Scoring & scope

Page scope — No selection: score and Inspector reflect the current page.

Selection scope — With layers selected: score reflects the selection subtree (node + descendants).

Score meaning — Composite accessibility signal from analyzed text/background pairs in scope (not a legal compliance score). Re-scan after fixes to verify improvement.

WCAG contrast — Standard contrast ratios with AA / AAA pass indicators where applicable.

APCA — Perceptual contrast (Lc) when enabled in results — useful for modern contrast thinking beyond ratio-only checks.

Live Inspector

Live Inspector lists color elements in scope with contrast readouts and status.

Typical workflow:

Sort/filter by severity (critical → minor) when available.
Expand a row to see foreground/background, ratio, WCAG/APCA status.
Use Get Fixes / suggested colors where offered.
Open Analyze for the full modal: live preview, replacement swatches, apply to canvas.

Analyze modal (deep dive on one pair):

Live preview against background
Suggested replacements (shown when below target thresholds)
Apply updates fills and strokes in Figma
Follows canvas selection while open (select another layer to sync)
Undo with Figma’s native undo after apply (Cmd+Z / Ctrl+Z)

Generate & palettes

Generate (Mission Control) builds palette explorations from selected elements — harmonies and swatches before you commit.

Save Palette — Save named palettes from Generate previews when available.

Export palette JSON — Export palette data for design-system handoff (Mission Control palette tools).

Pair with the VS Code extension for code-side verification (see Developer handoff).

Fixes & remediation

Apply fix paths:

Sticky Issues dropdown → per-item suggested color
Inspector → Get Fixes drawer
Analyze modal → replacement swatches → Apply

Use Cmd+Z / Ctrl+Z in Figma to undo the last apply.

Fixes modify Figma paint on the canvas. Always verify visually and re-scan.

Pro tip: After a batch of fixes, run Scan Canvas and Export Report for a before/after paper trail.

Export & share

Export Report (CSV)

After a scan, Export Report copies a CSV with columns such as:

Layer/Screen Name, Type, Foreground, Background, Contrast Ratio, WCAG Pass/Fail, Status

Use for QA tickets, client deliverables, or design-dev handoff.

Share modal

Option	Deliverable
Copy scan summary	Score, issues line, scope, element count — paste into Slack/email
Copy developer snippet	Short comment block + CSV preview rows
Email team	Opens mail with pre-filled summary
Copy plugin link	Figma Community listing (when live)

Share with Developer

Opens a modal with a longer developer snippet (palette + contrast notes) for VS Code workflows.

Vision Simulator

Simulate color vision deficiency (protanopia, deuteranopia, tritanopia, achromatopsia) on your current selection.

Select frame or elements on canvas.
⋯ → Vision Simulator.
Choose type; preview updates live.
Generate in new artboard to duplicate with simulation applied (non-destructive to original until you choose).

Developer handoff

In Figma: Export CSV or Share → developer snippet.

In VS Code: Install @weable/a11y-color-utils for the same contrast logic in code (CI, themes, components).

npm package: @weable-tools/a11y-color-utils — see developer API docs.

License & plans

Free / trial includes Mission Control, Live Inspector, Generate, Fix, Vision Simulator, and Export (per in-plugin License modal).

Pro unlocks cross-tool workflow integration, team collaboration features, and advanced export/integration paths (see pricing).

Manage license: weable.pro/account.

Troubleshooting

Score not updating → run Scan Canvas or check selection vs page scope
Empty export → scan first, then export again
Vision Sim disabled → select layers on the canvas first
Esc closes modals; Cmd+Z / Ctrl+Z undoes last canvas apply
Plugin feels narrow → intentional; use this doc hub for long guides

Still stuck? support@weable.pro — include file name, scope (page vs selection), and steps to reproduce.

Privacy & data

The plugin analyzes document colors via the Figma plugin API. Refer to Privacy Policy and Terms on weable.pro. Do not paste confidential client data into support email beyond what’s needed to debug.

Changelog

Version	Date	Notes
1.0	2026-05	Modal UX: no layout shift, Esc dismiss, rounded share sheet
1.0	2026-05	Analyze follows canvas selection; undo toast