How to use Figma’s “Contrast” “A11y - Color Contrast Checker” plug-in

Contrast ratio is very important in selecting text colors that are easy to read against background colors for advertising banners and websites, and in creating designs that are easy for anyone to read from an accessibility perspective.


To check the contrast ratio of text and background colors, use the "Contrast" plug-in.

Contrast.

Search and activate Contrast from Resources.

In "Select" mode, you can measure the contrast ratio for each element.

In this state, when you select text or an object for which you want to measure the contrast ratio, a popup will show a score such as "FAIL" or "AA".

In "Scan" mode, you can measure elements of the entire page at once.

This is a very efficient way to measure when you want to make adjustments from a bird's eye view of the entire page.


A11y - Color Contrast Checker.

Select the frame you want to check and click Check.

You can check problematic elements and calculate the contrast ratio without problems from the UI.