How to create a Figma plugin to check contrast

Digital accessibility is a fundamental requirement for modern interface design, not an afterthought. Designing a custom Figma contrast checker plugin is a great way to streamline accessibility auditing directly inside the designer's canvas.

Understanding the Figma Plugin Architecture: Figma plugins run in two isolated execution environments: the sandbox backend (`code.ts`) which has direct access to the Figma document node tree, and the iframe frontend (`ui.html`) which renders standard HTML/CSS/JS for the plugin's user interface. They communicate asynchronously via `figma.ui.postMessage` and `window.onmessage`.

Extracting color values from selected canvas layers: When a user selects a text layer or shape, the plugin traverses `figma.currentPage.selection`. It inspects text fill colors and searches parent frames or background rectangles to determine the effective background color under the glyphs.

Calculating WCAG relative luminance and contrast ratios: We convert RGB values to relative luminance using the standard W3C formula: `L = 0.2126 * R + 0.7152 * G + 0.0722 * B` (after linearizing sRGB values). From there, the contrast ratio is computed as `(L1 + 0.05) / (L2 + 0.05)`. We compare the result against WCAG AA (4.5:1 for normal text, 3:1 for large text) and AAA thresholds.

Delivering real-time UI feedback: Sending the calculation results back to the plugin UI renders immediate Pass/Fail badges, exact numerical ratios, and suggested color adjustments, empowering designers to fix contrast issues before engineering handoff.