Check Contrast Inside Figma
Select any layer — text, shape, or frame — and get WCAG AA/AAA results, APCA scores, and color blindness previews instantly. Apply accessible alternatives in one click without leaving your design file.
Select layer → instant results → click to fix
How to Install
Coming soon to Figma Community — for now, one-time setup
Download
Get the zip above and unzip it.
Figma Desktop
Open the Figma Desktop app (not browser).
Import Plugin
Plugins → Development → Import plugin from manifest…
Select manifest
Pick manifest.json from the unzipped folder.
Run It
Plugins → Development → ColorContrast.
What the Plugin Does
Everything you need to make your designs accessible — all inside Figma.
Instant WCAG & APCA
Select any layer in Figma and see WCAG AA/AAA and APCA results in real time — no manual color input needed. Font size and weight auto-detected from your text layers.
One-Click Alternatives
Get hue-preserving accessible color suggestions. See the exact contrast ratio for each. Click any alternative to apply it directly to the selected layer — no hex copy-paste.
Color Blindness Preview
Instantly simulate deuteranopia, protanopia, tritanopia, and achromatopsia. See how your colors look across all four CVD types without leaving Figma.
Ready to Check Contrast in Figma?
Free. No sign-up. Works entirely inside Figma. All calculations run locally.
Download Plugin — FreeAlso available: Chrome Extension — scan entire websites for contrast violations.