Figma Contrast Checker
Figma Plugins · 21 users · Live
Grey text on a white card looks fine on a good monitor and disappears on a phone outdoors. Select a text layer and this tells you straight away whether it passes, and offers the nearest colour that does.
What it does
Select a text layer and it tells you, straight away, whether the text is readable on what is behind it.
- It finds the background for you, looking through parent frames and overlapping shapes.
- You get a plain pass or fail against WCAG 2.1, split into AA and AAA, normal and large text.
- If it fails, it suggests the nearest colour that passes. One click applies it.
- Select a whole frame instead and it checks every text layer inside, in one list. Click any failing row to jump to that layer.
Why it is worth it
Contrast is easy to fix while you are choosing the colour and expensive to fix after forty components use it.