Use the "Contrast" plugin to find out the contrast ratio of text,
background color, etc.To find out, use the "Contrast" plugin.

Hanai Akihiro


How to use Figma’s plug-ins “Contrast” and “A11y – Color Contrast Checker”.

Post:2024.03.19 / Rewrite : 2024.03.19



Contrast ratios are 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.


Movie|How to use Figma plug-ins “Contrast” and “A11y – Color Contrast Checker”.


How to use Figma’s plugin “Contrast”.


1. Search and launch Contrast from Resources.

2. In “Select” mode, you can measure the contrast ratio of each element.

In this state, when you select text or an object for which you want to measure the contrast ratio, a score such as “FAIL” or “AA” will appear in the pop-up window.

3. 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 adjust the entire page from a bird’s eye view.

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

figma-plugin-A11y – Color Contrast Checker

1. Select the frame you wish to check and click Check.

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


Contact me

I want to convey this kind of thing!
I want to express something like this!
I'm thinking about this kind of time frame and budget... 🤔
First of all, please let me know your frank requests.
I will respond with sincerity.

tel tel