Figma will show you the hex code of any fill. It won't tell you whether that fill is readable against its background. This gap — between picking a color and knowing it's accessible — is where most contrast failures are born.
If you're designing in Figma and care about WCAG compliance (or just want your text to be readable), here are the ways to check contrast without leaving your canvas — ranked from slowest to fastest.
Method 1: The Manual Eyedropper + External Checker
The old-school workflow: use Figma's eyedropper to copy a hex code, switch to a browser tab, paste it into a contrast checker, copy the result, switch back. Repeat for every text layer on the page.
Time per check: ~15 seconds. For a page with 40 text elements: 10 minutes of tab-switching. And you'll miss some.
This works if you're checking one button. It doesn't scale to a full design file, and it's easy to skip "boring" elements like placeholder text, labels, and captions that often have the worst contrast.
Method 2: Figma's Color Picker (Partial Help)
Figma's native color picker shows the hex value and lets you adjust lightness. It does not display a contrast ratio or WCAG pass/fail status. You can manually push a color darker and hope it passes, but you're guessing.
Some designers keep a cheat sheet taped to their monitor: "#767676 or darker on white passes AA." That's better than nothing, but it only covers one scenario (gray text on white) and doesn't account for colored backgrounds, colored text, or different font sizes.
Check contrast on any layer — and scan entire frames — without leaving Figma. Free plugin, one-click install.
Install Figma PluginMethod 3: Community Plugins
The Figma Community has several contrast-checking plugins. Here's what to look for when choosing one:
WCAG 2.1 support. The plugin should show AA Normal, AA Large, AAA Normal, and AAA Large results — not just a single pass/fail. Different text sizes have different thresholds, and a good plugin surfaces all of them.
APCA support (WCAG 3 ready). The Accessible Perceptual Contrast Algorithm is the proposed contrast standard for WCAG 3.0. It handles dark mode, font weight, and spatial frequency more accurately than the current formula. If you're building a design system that will last 3+ years, APCA support matters.
Frame scanning. Selecting individual text layers is manageable for a landing page. For a multi-screen app, you need a plugin that scans an entire frame and reports every violation at once. This turns a 20-minute manual check into a 5-second scan.
Color blindness simulation. ~8% of males have some form of color vision deficiency. A plugin that simulates deuteranopia, protanopia, and tritanopia directly in Figma helps you catch palette problems that contrast ratios alone won't reveal.
One-click fixes. After finding a violation, the plugin should suggest accessible alternatives and let you apply them without manually adjusting HSL sliders. The best plugins preserve your original hue while adjusting lightness to hit the target ratio.
Several free plugins on the Figma Community cover most or all of these features. Install one, select a text layer, and the contrast ratio appears immediately. Many also include an APCA calculator and a full-frame scanner.
Method 4: Scan Entire Frames
For production work, point-and-click on individual layers doesn't scale. A frame scanner walks every text node in a selected frame (or the entire page), computes contrast against each node's actual visual background, and returns a sorted list of violations — worst first.
This catches the failures you'd never think to check: the 12px footer text, the placeholder in the search input, the label on the disabled button. These are exactly the elements that get flagged in accessibility lawsuits.
After scanning, you can click any violation to jump directly to that layer in Figma. Fix it, re-scan, and confirm the page is clean — all within a minute.
The Design-Stage Advantage
Catching contrast failures in Figma is dramatically cheaper than catching them in production. A color change during design costs seconds. The same change after launch requires a developer, a PR, a deploy, and possibly a hotfix — and in the meantime, real users are struggling to read your content.
Build contrast checking into your design review process. Before handing off any screen for development, scan the frame. If there are violations, fix them. This one habit eliminates the most common accessibility issue before a single line of code is written.