How to Install and Use the Use Contrast Figma Plugin

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.