Contrast Description

About this plugin

Quickly add WCAG contrast ratio information to your color styles for easy reference right in the color panel! No need to break your design flow to check accessibility!

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

1. 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.
2. 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.
3. Flexible You can calculate the contrast ratio for as many colors as you want!

Limitations

This only works with solid fill colors. No gradients or images. Currently only works for local color styles, not variables. To update shared color styles from a library, make the update in the library file and publish an update.

Support & Bug Reporting

Contribute to this plugin on GitHub