usecontrast.com

Use Contrast ships as two separate tools: a Figma plugin for checking WCAG color contrast ratios while you work inside a Figma file, and a macOS app for checking contrast outside of Figma. The plugin is the one to reach for if your colors live in a design file; the macOS app is the one to reach for if you need to test colors from a browser, a live site, a screenshot, or any other source on your Mac. The site describes the plugin as being "for quick access to WCAG color contrast ratios," and lists the macOS app as a distinct product alongside it.

The two products at a glance

Both are presented on the same site under the Use Contrast name, so they share the same underlying purpose — evaluating color contrast against WCAG ratios — but they differ in where that evaluation happens.

When to use the Figma plugin

Choose the plugin when the colors you need to check are already in a Figma document. That covers the common design-phase tasks:

• Verifying that text and background color pairs in a component or frame meet a target WCAG ratio.
• Checking a palette or style before it gets handed off to development.
• Catching low-contrast combinations while the design is still easy to change.

The plugin's value is proximity: you stay in the file, so the check happens as part of designing rather than as a separate step afterward.

When to use the macOS app

Choose the macOS app when the colors you need to check are not in a Figma file. Typical situations:

• A color pair you saw on a live website or in a browser.
• Colors pulled from a screenshot, an image, or a document.
• A quick check when you are not working in Figma at all.

Because it runs as a Mac application rather than inside a design tool, it is not tied to a Figma file being open or to the colors existing as Figma objects.

How to decide

Ask one question: where do the colors live right now?

• In a Figma file → use the Figma plugin.
• Anywhere else on your Mac → use the macOS app.

If you do both kinds of work, the two tools are complementary rather than alternatives — the plugin covers the design-file case, and the app covers everything outside it. Nothing on the site suggests one replaces the other.

What both tools have in common

Both are built around WCAG color contrast ratios, which is the standard that defines minimum contrast between text and its background. If you are unfamiliar with how those ratios are calculated or which thresholds apply to which text sizes, that background is worth understanding first, since it determines what counts as a passing result in either tool.

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.

Use Contrast is a Figma plugin and macOS app for checking WCAG color contrast ratios. It is aimed at designers and developers who need to verify that text and interface colors meet accessibility standards without leaving their design or development workflow. The plugin is described as providing "quick access to WCAG color contrast ratios," with an install link on the site.

What problem it solves

Color contrast is a common accessibility failure point. WCAG (Web Content Accessibility Guidelines) sets minimum contrast ratios between text and background colors, and checking those ratios manually — converting hex values, calculating relative luminance, comparing against thresholds — is slow and error-prone. Use Contrast moves that check into the tools designers and developers already use, so contrast can be evaluated as part of the design process rather than as a separate audit step.

Two ways to use it

The site presents these as separate offerings, with the Figma plugin framed around quick access to WCAG ratios and the macOS app as a standalone option.

Who it is for

• Designers working in Figma who want contrast feedback during design rather than after.
• Developers who need to confirm that implemented colors match accessible ratios.
• Teams with accessibility requirements — for example, projects that must meet WCAG conformance levels — who need a lightweight way to check colors as part of normal work.

What to keep in mind

The site describes the tool's purpose (quick access to WCAG color contrast ratios) but the provided page evidence does not include pricing, platform requirements, or detailed feature lists. If cost or system compatibility matters for your decision, check those details on the site directly rather than assuming the tool is free or runs on every platform.

For the core question — what Use Contrast is — the answer is straightforward: it is a contrast-checking utility delivered as a Figma plugin and a macOS app, built around WCAG ratios, intended to make accessibility checks part of the design and development flow instead of a separate task.

Use Contrast is a Figma plugin that gives you quick access to WCAG color contrast ratios while you work. Install it from the Figma Community listing linked on usecontrast.com, then run it from Figma's plugin menu to check the contrast of colors in your design. The plugin is aimed at designers who need to verify text and background combinations against WCAG thresholds without leaving their file. The site also lists a macOS app and a contrast guide, but the plugin is the part that lives inside Figma.

What you need before installing

• A Figma account and access to a file where you can run plugins (viewers can't run plugins; you need edit access).
• The plugin listing page, reached from the "Install" link on usecontrast.com.
• A rough idea of which WCAG level you're targeting, since contrast requirements differ by level and text size.

Installing the plugin

1. Open usecontrast.com and follow the Install link to the plugin's Figma Community page.
2. On the Community page, select Run to try it in a file, or Save / Install to add it to your account for reuse.
3. If you only ran it once, it stays available under Resources → Plugins in that file; if you saved it, it appears in your saved plugins list across files.

Expected result: the plugin is available from Figma's plugin menu, either in the current file or in your saved list.

Running a contrast check

1. Open the Figma file you want to test.
2. Go to Menu → Plugins (or right-click the canvas) and choose Use Contrast.
3. With the plugin open, select the layer or color you want to evaluate, or enter the foreground and background colors directly if the plugin offers input fields.
4. Read the reported contrast ratio and compare it against the WCAG threshold you're targeting.

Expected result: you see a numeric contrast ratio for the color pair, which you can judge against WCAG minimums.

Reading the ratio

WCAG contrast is expressed as a ratio from 1:1 (no contrast) up to 21:1 (black on white). The commonly cited minimums are:

Treat these as the reference points when the plugin reports a ratio. If your pair falls below the level you need, adjust the foreground or background until the ratio clears the threshold.

Applying checks across a design

• Check the pairs that carry meaning first: body text on its background, button labels on button fills, and icons that convey state.
• Re-check after theme changes. A palette swap can silently drop a pair below threshold.
• Keep the plugin open while you iterate so you can confirm each adjustment rather than guessing.

Common snags

• Plugin won't run: you likely have view-only access to the file. Duplicate it or ask for edit rights.
• Ratio looks fine but text is hard to read: contrast ratio doesn't account for font weight, size, or rendering. A passing ratio on thin small text can still read poorly.
• Colors look different than expected: check for opacity or blend modes on the layer, since these change the effective color the plugin evaluates.

When to use it

Reach for Use Contrast when you're making color decisions inside Figma and want an immediate ratio rather than switching to a separate checker. It fits iterative work where you adjust and re-verify in the same file. For a broader explanation of what the ratios mean and why they matter, the site's contrast guide and the related question on WCAG ratios cover the background.