Contrast Description

by Andrew Spencer

Document color contrast directly in the Figma UI through style and variable descriptions

FreeFigma

Performance report Open in Figma

Installs

1,275

Likes

Users

3,281

Views

4,610

About this plugin

Quickly add WCAG contrast info to your color styles and variables for easy reference! No need to break your design flow to check accessibility!

This helps everyone working in the file or design library know which color pairs are safe to use by providing contextual information directly in the Figma UI.

Easy to setup Just run once! Setup is as easy as running the plugin and selecting which colors you are using for text. The plugin will determine the contrast ratio for each color you select against every other color style in the file.

Easy to use No need to open the plugin again, contrast info is now visible in the Figma UI! Hover over the swatches of your color styles to see the contrast ratio for that color.

Flexible You can calculate the contrast ratio for as many colors as you want!

LimitationsThis only works with solid fill colors. No gradients or images. For variables, this works with color variables in one collection and one color mode.

Support & Bug ReportingContribute to this plugin on GitHub