How would you automatically audit WCAG AA contrast in Figma?
This tests Figma plugin vs REST API color extraction limits. Good answers contrast live traversal with export-based analysis, cite WCAG AA ratios of 4.5:1 and 3:1, and note opacity. A red flag is assuming the REST API can sample pixels without image export.
What's really being asked
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.
The full answer
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.
The mistakes people make
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.
What usually comes next
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.
A 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.
Interview question
When building an automated WCAG AA contrast auditor for Figma, why is a hybrid plugin-plus-REST architecture necessary instead of using the REST API alone for batch analysis?
- a.The REST API returns document structure and style metadata but cannot sample final rendered pixel colors, requiring exported images for accurate contrast computation.Correct
- b.The REST API cannot read text content or fill properties from nodes, so a plugin must extract raw style data first.
- c.WCAG AA thresholds differ between the plugin and REST environments, so both must be used to verify 4.5:1 and 3:1 ratios respectively.
- d.The plugin API is required to calculate relative luminance because the REST API lacks access to the sRGB color space conversion formula.
Why? this is the answer
The REST API exposes node geometry and style metadata but not final rendered pixel colors, so batch audits must export PNGs to sample backgrounds behind text. Distractor A is wrong because the REST API can read fills and text content; its limitation is resolved visual output, not raw property access.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #figma
- #wcag
- #accessibility
- #api-design
- #color-contrast
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on figma — each one lists the topics its interview covers.
See open roles