Figma Plugin — WCAG Accessibility Tool
A practical Figma plugin for design system teams to analyze color contrast against light and dark surfaces. Automatically retrieves HEX, RGB, CMYK values and evaluates contrast ratios per WCAG 2.1 AA and AAA standards.
Built to eliminate the constant context-switching between Figma and external contrast checkers, Color Analyzer surfaces accessibility data directly within the design environment — exactly when and where designers need it.
The plugin supports any selected fill color, evaluates it against both a dark surface (#07070F) and a light surface (#F4F4FB), and instantly surfaces pass/fail status for all four WCAG criteria: AA Normal, AA Large, AAA Normal, and AAA Large text.
Designers constantly need to check if their color choices meet WCAG accessibility standards, but switching between Figma and external contrast checkers is slow and breaks creative flow. Design system teams especially suffer from this friction when managing large color palettes.
Every accessibility check required opening a browser tab, copying the HEX value, pasting it into an external tool, checking the result, switching back — and repeating this for every color, every variation, every surface. For a design system with dozens of brand colors, this became a significant drain on time and attention.
Beyond speed, the fragmentation created consistency risks: different team members used different tools, leading to divergent accessibility decisions and documentation gaps. The solution had to be native, frictionless, and authoritative.
Interviewed 8 designers across 3 teams. Mapped workflow friction points and identified the accessibility check loop as the highest-impact target for automation.
Defined the data model and Figma API integration strategy. Chose a lightweight approach: read selected node fill, compute luminance, run WCAG contrast formula.
Designed a compact, scannable plugin panel. Color values, contrast ratios, and pass/fail status are all visible above the fold — no scrolling required for common tasks.
Ran usability sessions with the same 8 designers. Refined copy states, added one-click copy for all three formats, and tuned the surface colors to match real-world design systems.
Evaluates all four WCAG 2.1 contrast criteria simultaneously: AA Normal, AA Large, AAA Normal, and AAA Large — with clear pass/fail indicators.
Automatically extracts and displays the selected color's value in all three industry-standard formats — ready to copy with a single click.
Tests every color against both dark (#07070F) and light (#F4F4FB) backgrounds in a single analysis pass — covering both theme contexts at once.
Results update instantly as you select different layers in Figma. No manual re-triggering — just select and see.
Handles any fill type supported by Figma's local styles. Works seamlessly with published design system libraries and component-level colors.
Copy HEX, RGB, or CMYK values to clipboard instantly. Reduces documentation time and eliminates manual transcription errors.