What Are WCAG Color Contrast Ratios and Why Do They Matter?

WCAG color contrast ratios measure the luminance difference between foreground text (or UI elements) and their background. They matter because they set a measurable, testable threshold for readability: text that meets the ratio is legible for people with low vision, color vision deficiency, or anyone reading on a glare-heavy screen. Use Contrast is a Figma plugin and macOS app built to surface those ratios quickly during design work, so you can check contrast without leaving your file or switching to a separate calculator.

How the ratio is calculated

The ratio is a single number written as X:1, derived from the relative luminance of two colors. Luminance is a weighted measure of how bright a color appears, with green contributing most and blue least. The formula compares the lighter color against the darker one:

• 1:1 means the two colors are identical — no contrast at all.
• 21:1 is the maximum, black text on white.
• The scale is not linear in perception, so small numeric gaps near the low end matter more than they look.

Because it is a ratio, it is symmetric: swapping text and background color gives the same number. What changes is which element the requirement applies to.

The thresholds that actually apply

WCAG defines contrast requirements under two conformance levels, and the threshold depends on the size of the text.

Two practical notes:

• Large text gets a lower bar because thicker strokes and bigger glyphs are easier to resolve. If a heading passes at 3:1 but the paragraph under it does not reach 4.5:1, the paragraph is the problem.
• Non-text elements count too. Icons, input borders, focus rings, and chart lines that carry meaning fall under the 3:1 requirement, not the text rules.

Why this matters beyond compliance

Meeting the ratio is a legal and accessibility baseline in many contexts, but the day-to-day reason is simpler: contrast is one of the few accessibility properties you can verify objectively before anything ships. A design that fails contrast fails for a predictable, fixable reason — you adjust one of the two colors.

Common failure patterns:

• Light gray placeholder or helper text on white, often sitting around 2:1 to 3:1.
• Brand colors used as-is for text. A saturated accent color may look strong but have low luminance contrast against white.
• Disabled states that drop opacity, which lowers contrast further than intended.
• Text over images or gradients, where the effective background varies across the element.

Where Use Contrast fits

Use Contrast is described as a Figma plugin for quick access to WCAG color contrast ratios, with a companion macOS app. The point of a tool like this is placement: contrast checking is most useful at the moment you pick colors, not in a separate audit later. Checking inside Figma means you can test a foreground/background pair, see the ratio, and adjust while the design is still fluid.

A reasonable workflow:

1. Select or sample the text color and the background color you intend to use.
2. Read the resulting ratio from the plugin.
3. Compare it against the threshold for that text size and target level (AA or AAA).
4. If it fails, adjust the darker or lighter color until it clears the bar, then re-check.

The macOS app covers the same need outside a Figma file — useful when you are checking colors from a spec, a screenshot, or a non-Figma source.

Choosing your target level

• Aim for AA (4.5:1 body, 3:1 large and UI) as the default. It is the widely referenced baseline and the level most accessibility guidance and procurement requirements point to.
• Use AAA (7:1 body) when the content is long-form reading, when the audience skews older or low-vision, or when you want margin against future color tweaks.
• Do not treat 3:1 as a universal pass. It only applies to large text and non-text elements; body copy at 3:1 still fails AA.

The ratio is a floor, not a target to hover just above. Colors that land at 4.6:1 leave almost no room for a later opacity change, hover state, or dark-mode variant without dropping below the line.