You picked a color pair in Figma. It passed WCAG AA — the plugin said 4.8:1. You shipped it. Then someone runs an audit on the live site and the same text fails at 4.2:1. What happened?
This isn't rare. The design-to-code pipeline introduces subtle shifts in how colors render, and each shift can push a borderline-contrast pair over the edge. Here's where the gaps are and how to close them.
Why Colors Look Different in Figma vs the Browser
Font rendering. Figma uses its own text rendering engine, optimized for design canvas fidelity. Browsers use platform-specific font rendering (DirectWrite on Windows, Core Text on macOS). The same font at the same weight looks different — slightly thinner or thicker — which changes the perceived contrast.
Color management. Figma works in the sRGB color space. Browsers do too, mostly — but monitor calibration, operating system color profiles, and GPU settings can shift how a hex code actually appears on screen. A #767676 gray on a calibrated design monitor might look like #888888 on a consumer laptop.
CSS inheritance. In Figma, a text layer's color is explicit. In CSS, color can inherit through multiple levels of the DOM, and currentColor, opacity, and mix-blend-mode can alter what actually renders. The computed color might not match what's in the stylesheet.
Check contrast at both ends of the pipeline: Figma plugin for design, Chrome extension for production. Both free.
Get the Chrome ExtensionBackground resolution. Figma text sits on a clearly defined background fill. In the browser, the background might come from a grandparent element, a gradient, an image, or a semi-transparent overlay — and a browser extension that walks the DOM to find the actual visual background might compute a different value than what the design file shows.
The Two-Checkpoint Workflow
The fix isn't to make Figma and browsers render identically — they won't. The fix is to verify contrast at both ends of the pipeline:
Checkpoint 1: Design (Figma). Before handing off any screen, run a frame scan. Fix every violation while it's still cheap — changing a hex code in Figma takes seconds. This catches the obvious failures: light gray text, low-contrast buttons, invisible placeholders.
Checkpoint 2: Production (Browser). After the page is built — in staging, before it goes to production — run a page-level contrast scan in the browser. This catches the failures that the Figma scan couldn't: CSS inheritance surprises, dynamic content, and browser-specific rendering quirks.
If both checkpoints pass, ship. If the production scan finds issues the Figma scan didn't, investigate the specific elements — they're telling you something about your CSS architecture that needs attention.
Design Tokens Are Your Safety Net
The most reliable way to maintain contrast across the pipeline is to encode your accessible color pairs as design tokens. Instead of a designer typing #999999 because it "looks right," the design system provides --text-muted: #616161 — a value that someone has already verified passes WCAG AA at the intended font size.
In Figma, use shared color styles that map to these tokens. In code, reference the same tokens as CSS custom properties. When both sides consume the same source of truth, the contrast stays consistent because the values don't drift.
And when you need to add a new color? Check it in both places before it enters the token system. Figma plugin for the design side, browser extension for the code side. Two checkpoints, one result: contrast that survives the handoff.