How would you automatically audit WCAG AA contrast in Figma?

WHAT THIS TESTS: This question tests whether you understand the capability boundaries between Figma's plugin API and its REST API, specifically for tasks that require rendered color information rather than just document structure. It also tests your knowledge of WCAG AA contrast ratios and your ability to design a practical system that accounts for real-world design file complexity like nested frames, opacity, blend modes, and component instances.

A GOOD ANSWER COVERS: A strong answer first separates the two platforms. The Figma plugin API runs inside the design file and can traverse the document tree using methods like findAll to locate text nodes. It can read fill paints, opacity, and style IDs directly, then compute relative luminance using the standard sRGB formula. To find the background color, the plugin must walk up the ancestor chain, check for solid fills, and handle cases where the background is a gradient, an image, or another overlapping layer. The answer should state the WCAG AA thresholds: a minimum ratio of 4.5 to 1 for normal body text and 3 to 1 for large-scale text or active UI components. For the REST API, a strong candidate notes that the API returns node geometry and style metadata but not final rendered pixel colors, so a batch audit process would need to export frames or nodes as PNG images and run server-side image analysis to sample pixels behind text bounding boxes. The best answers propose a hybrid architecture: a plugin for immediate designer feedback with highlight overlays, plus a REST-driven service that triggers on file version webhooks to catch regressions in a CI pipeline.

COMMON WRONG ANSWERS: A major red flag is claiming the REST API alone can directly inspect pixel colors or computed styles without exporting images. Another is ignoring opacity, blend modes, or gradient fills and assuming every background is a flat solid color. Candidates also stumble by not knowing the exact WCAG AA numbers or by applying the 4.5 to 1 threshold to large text and icons, which actually require only 3 to 1. Finally, suggesting manual spot-checking or external browser tools misses the point of automating inside the Figma ecosystem.

LIKELY FOLLOW-UPS: An interviewer might ask how you would handle text over image fills or noisy backgrounds where a single background color does not exist. They could also ask how you would performance-optimize a plugin on a file with ten thousand layers, or how you would store and track baseline contrast results across file versions. Another follow-up is asking how you would support dev mode handoff by attaching pass or fail metadata to inspected nodes.

ONE CONCRETE EXAMPLE: Imagine a design system library file with fifty button components. A Figma plugin iterates over all component instances, identifies text layers, and for each text node calculates the contrast against the immediate parent frame's fill. If the button uses a linear gradient background, the plugin samples the midpoint color as a pragmatic approximation and flags any ratio below 3 to 1 for large button labels. Simultaneously, a nightly CI job uses the REST API to export every top-level frame as a PNG at 2x resolution, then runs a Python script with Pillow to extract average color behind each text bounding box and posts a Slack report listing any frames that dropped below AA thresholds since the last commit.

Source: developer.mozilla.org