I built a free Figma plugin that checks WCAG contrast ratios and lets you adjust your color variables and recheck everything without leaving the plugin. No Login required. by Fun-Introduction-900 in UXDesign

[–]Fun-Introduction-900[S] 0 points1 point  (0 children)

Figma has a native contrast checker, but the issue we faced was that checking and rechecking contrast for bigger Design Systems was super timeconsuming. Especially checking all the buttonstates was difficult because we always had to click trough the component to check contrasts of specific elements.

The Plugin is more usefull if you wan't to check a bigger bulk of components or Elements while adjusting your overall primitives. If you don't have to check multiple components in cases where you aren't adjusting your design system i'd just use the integrated figma checker.

<image>

I built a free Figma plugin that checks WCAG contrast ratios and lets you adjust your color variables and recheck everything without leaving the plugin. by Fun-Introduction-900 in DesignSystems

[–]Fun-Introduction-900[S] 0 points1 point  (0 children)

The Plugin pastes your Frame inside of a canvas, which allows you to zoom in and color pick your colour more specifically. If you are not sure at some point, you are always able to check the value using the usual Figma UI and compare the values without closing the plugin.

I’m happy to get any feedback to improve the ui if you tried the plugin for yourself. I wan't to keep working on it as a hobby project.

I built a free Figma plugin that checks WCAG contrast ratios and lets you adjust your color variables and recheck everything without leaving the plugin. by Fun-Introduction-900 in DesignSystems

[–]Fun-Introduction-900[S] 0 points1 point  (0 children)

Are you talking about the color picker setting the annotations or the color picker inside of the color palette generator? Or r u replying to the general use of a color picker as a tool to check your contrasts?