A color contrast check measures the numerical ratio between a foreground color and its background color, and the result tells you whether that pair is readable for most viewers; per WCAG 2.2, normal text needs a ratio of at least 4.5:1 for AA and 7:1 for AAA. In Figma, that ratio is not shown anywhere inside the canvas, so designers who care about accessibility have to pull the two hex values out of Figma and test them in a separate tool. The fastest way to do that is a Color Contrast Checker, which reads two hex inputs and returns the ratio plus AA and AAA pass or fail badges in real time.
Figma is built for visual iteration, not for accessibility auditing. You can pick any two colors you like, place a text layer on a shape, and the result will render on screen just fine. Whether a low-vision reader, an older user, or someone in bright sunlight can actually read it is a separate question, and that question is answered by a contrast ratio, not by a designer's eye. Treating contrast as a measurable number rather than a feeling is the single biggest shift that makes Figma files accessible.
What a contrast ratio actually means
The contrast ratio is a single number between 1:1 and 21:1. It is calculated from the relative luminance of two colors, which is a weighted version of the red, green, and blue channels that accounts for how human vision actually perceives brightness. A pair of identical colors produces 1:1, because nothing could be less distinguishable, and pure black on pure white produces 21:1, the maximum the formula can return. Everything in Figma sits somewhere between those two extremes.
WCAG 2.2 groups these ratios into pass or fail levels. For normal-size body text, AA requires a ratio of at least 4.5:1 and AAA requires at least 7:1. For large text, which WCAG defines as 18 point (about 24px) or 14 point bold (about 18.66px bold), the bars drop to 3:1 for AA and 4.5:1 for AAA. Non-text UI elements such as icons and form borders also use the 3:1 threshold. If your design is for a public-facing product, AA is the common minimum; AAA is a stretch goal often reserved for body copy in reading-heavy interfaces.
| Content type | WCAG AA | WCAG AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (18pt or 14pt bold) | 3:1 | 4.5:1 |
| UI components and graphical objects | 3:1 | Not defined |
These numbers come straight from the WCAG 2.2 specification at w3.org, which is why they are the standard every accessibility checker compares against.
Why eyeballing Figma layers is not enough
Designers usually assume that a dark color on a light color is readable. Sometimes it is, and sometimes it is not. Slate gray on white, for example, looks punchy on a 27-inch monitor in a dark room but lands at roughly 4.5:1, which only just clears AA and fails AAA outright. Pale blue on white is even worse, often sitting below 3:1. If you only ever design on a calibrated display in your own office, you are testing for one set of eyes in one lighting condition.
A real contrast check removes that guesswork. You stop relying on whether something "looks fine" and start trusting a number that reflects relative luminance, which is roughly how the eye separates bright from dim. The number is the same for everyone, regardless of monitor, so the same pair will fail in the same way on a MacBook in a coffee shop and on a cheap laptop under fluorescent lights.
Another common pitfall is designing in Figma's default light theme and forgetting that many users browse in dark mode. A pair that looks crisp on a white canvas can collapse to unreadable on a black canvas. If your product ships both modes, every meaningful pair has to be checked twice, once per theme, because the background color changes the math entirely.
Pull the right two colors out of Figma
The check only works if you feed it the correct two values. For any text layer, the foreground is the text fill, and the background is the fill of the shape or frame directly underneath. If a text layer sits on a group with its own fill, walk up the layer tree until you find the surface the text is actually rendered against; that is the color the user sees behind the letters.
To copy a foreground hex from Figma, select the text layer, open the Fill swatch in the right panel, and click the hex field. Press Cmd + C on macOS or Ctrl + C on Windows to copy the six-digit value. Repeat the same step on the layer directly behind it to grab the background hex. If your design uses transparency or blend modes, the visible color may not match the raw fill value, so flatten a screenshot or sample the pixel directly if you have any doubt.
It also helps to test interactive states, not just the default. Hover, focus, disabled, and error states often use lighter or more decorative colors that are much harder to read. The same hex-pair workflow applies to each one.
Run the pair through a Color Contrast Checker
- Open the Color Contrast Checker in your browser.
- Set the foreground color using the color picker or by typing a hex value like #111111; paste the value you copied from your text layer.
- Set the background color the same way, for example #ffffff; paste the value you copied from the layer beneath the text.
- Read the contrast ratio and the AA and AAA pass or fail badges that appear next to it; the result updates the moment either hex changes.
- Adjust one color or both in the checker until the ratio meets the level your project needs, then copy the winning hex back into Figma and apply it to the relevant layer.
Because the tool updates live, you can drag the foreground or background through a range of values and watch the ratio cross the AA and AAA thresholds in real time. That feedback loop is much faster than re-entering numbers by hand, and it makes it obvious which side of the pair you should adjust. As a rule, darkening the foreground or lightening the background raises the ratio, while the opposite moves lower it.
A useful trick is to test the brand color against three reference surfaces in one pass: pure white, pure black, and the actual product background. The widest gap between any pair is usually where accessibility problems hide, because brand palettes are tuned for emotion, not luminance. If the brand color only passes on one of the three surfaces, plan to use it there and pick a companion color for the others.
Build a workflow you can repeat every sprint
One-off checks catch one-off problems, but accessibility lives or dies on habit. The simplest habit is a contrast pass at the end of every design review, run on every text and background pair in the file. Designers who skip this step usually discover the issue during development, when changing colors costs hours instead of minutes.
You can also pre-test any new color you introduce. The moment a designer drops a brand color into Figma, paste it into the checker against white, black, and any surface colors your product uses. If it fails on white, it will fail on most light grays too, and you can either choose a darker shade of the brand color or restrict it to large text and decorative elements. This same habit applies to gray text, which is a frequent offender because designers tend to pick a gray that matches the visual hierarchy they want, not the readability they need.
Pair the contrast pass with a short handoff checklist. The checklist should list every text style in the file, the surface it is meant to sit on, and the ratio it clears. When the developer pulls the file, they can match each style to the approved pair instead of guessing. A one-page checklist turns an accessibility chore into a routine that fits inside an existing review meeting.
For deeper background on the rules themselves, the WCAG compliance guide walks through the criteria in more detail, and the Figma-specific contrast workflow covers related edge cases such as overlapping shapes, transparency, and image backgrounds.
Common traps that still fail even with a checker
Most failed checks come from a small set of repeated mistakes. The first is forgetting that semi-transparent layers change the visible color; if you place 60 percent black text on a colored background, the real background for the purposes of contrast is the blended result, not the raw fill underneath. The second is testing only the default state, then shipping a focus ring or disabled label that fails AA. The third is using light gray placeholder text that was never designed to be read.
Image backgrounds deserve their own warning. A photo or illustration is rarely a single color, and a checker cannot evaluate a gradient. The practical rule is to overlay a solid color plate behind any text that sits on top of an image, then test the plate and the text as a normal pair. If you want to keep the image visible, choose text colors with enough contrast against the darkest and lightest parts of the photo and accept that you may need a darker plate in the worst regions.
Another trap is using the same hex for text and a decorative stroke. A two-pixel outline around a button may look like part of the design language, but if it carries meaning such as "selected" or "error," WCAG treats it as a non-text UI element and requires 3:1 against the surrounding surface. The same hex that feels invisible at 14pt can fail as a 2px stroke at the same ratio, because stroke and text are judged by different rules.
If you want to compare two candidate text colors side by side before committing, the Color Difference Calculator gives a CIEDE2000 reading between any two hex values, which is a useful sanity check when two colors look identical but fail at different ratios. And when you want to swap formats mid-project, the RGB to HEX converter keeps the round trip lossless, so a color you tested as RGB comes back into Figma as the exact same hex.
Comparing the two main ways to check contrast in Figma
Designers generally fall into one of two camps: those who install a Figma plugin, and those who copy hex values out and test in a browser tool. Both approaches are valid, and they suit different situations. The table below compares the two on the criteria that tend to matter most in a real product workflow.
| Criterion | Figma contrast plugin | Standalone Color Contrast Checker |
|---|---|---|
| Where it runs | Inside the Figma canvas | In any browser tab, no install |
| Input method | Reads the selected layers directly | Manual hex or RGB paste |
| Speed for one pair | Very fast, click and read | Fast, two pastes and a read |
| Speed for many pairs | Slow, must select each layer | Faster, batch by copying hexes |
| Risk of stale data | Reflects current layer state | Depends on you re-pasting after edits |
| Plugin permissions | Requires access to the file | No file access required |
| Best for | Quick spot checks during design | Systematic review and handoff |
In practice, the strongest workflow uses both. Plugins handle spot checks while you are still moving pixels, and the standalone checker handles the full sweep before review and handoff. Picking one does not lock you out of the other, and many teams adopt the standalone tool as the source of truth because it does not depend on plugin updates or Figma permissions.
Make contrast a number on every screen, not a vibe
The shortest version of the workflow is also the most reliable: copy the text color from Figma, copy the background color from Figma, paste both into a contrast checker, read the ratio, and adjust until it clears the AA or AAA threshold for that content type. Run that loop for every text and surface pair in the file, including states and placeholders, and the design will read clearly for almost everyone who opens it. Numbers beat opinions, and contrast is one of the rare design qualities that a single ratio captures accurately.
Once the loop is part of every review, the time cost drops fast. A practiced designer can clear a typical screen of six to ten text and surface pairs in under five minutes, and the same loop catches the small regressions that usually slip past review, like a new placeholder color or a darker focus ring. Over a quarter, those minutes add up to a product that more people can actually read, which is the only measure of accessibility that matters in the end.
If you're weighing options, How to Find Color Difference Between Two HEX Codes covers this in detail.