Contrast Description
Document color contrast directly in the Figma UI through style and variable descriptions
Plugin Preview
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!
Limitations
This 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 Reporting
Plugin Details
| Version | 3 |
|---|---|
| Created | August 20, 2021 |
| Last Updated | July 25, 2025 |
| Category | Accessibility tools |
| Creator | Andrew Spencer |
| Stats | 1254 installs, 51 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the Accessibility tools category.
Stark - Contrast & Accessibility Checker
Fix Color Contrast and Typography issues and add WCAG annotations for a smooth design to dev handoff
Contrast
Quickly check and scan for contrast issues on gradients, images, blends, and fills.
Color Palettes ( Colorsinspo ) : Color & Accessibility Tools
A free suite of integrated Color & Accessibility tools - 10+ tools free access 🔥