After a month of hunkering down to build, more than 300 direct requests for it, and a long time keeping it a secret, we’re SO PUMPED to finally announce the Stark plugin for Figma!

For many of you coming over to Figma from other design tools and have already used Stark, we’re so happy to have you back <3 And for others that are being introduced to Stark for the first time, hello! We can’t wait to see your accessible designs that so many people will benefit from. With that said, we’d love to give you a little break down of what Stark does and how to use it in Figma.

Stark is a plugin to help you design products that are accessible, ethical, and inclusive. It’s a contrast checker, colorblind simulator, and more.

Installing Stark in Figma

1. Click on the puzzle piece glyph next to Plugins in the upper left menu to showcase the plugins screen
2. Click Browse Plugins
3. Scroll down to Stark and click Install

Alternatively: You can find us in the Popular or Featured section on the main plugin screen ;)

About the Contrast Checker

After installing, Stark will be available in the top menu bar by clicking: Plugins > Stark. From there, you can select the contrast checker which is used to verify if the contrast ratio of your UI colors are high enough to be seen by a variety of individuals.

All based on WCAG math and standards. For more info on what contrast checking is and how it works, check out our Accessible contrast ratios and A-levels explained article.

How it works

We think about our contrast checker like a stack of pancakes – which contain a foreground (top layer), background (bottom layer) and artboard.

1. Select a shape or text layer
2. Select your additional layer (there has to be two otherwise there’s no comparison).
3. Run the check from the plugin menu by going to Plugins > Stark > Contrast Checker.

Want to check contrast on an opaque layer? No problem! Turn the fill, text or layer opacity of your foreground element to < 100%, and voila. Opaque and bake! But don’t try to run the checker on any gradients or image — it won’t work as we don’t allow it. Why? Well, you get into finicky territory because you can’t guarantee with certainty the RGB/HEX/etc. value so your ratio may actually be a false positive.

And that’s it for today’s news! Note: There are no hotkeys / shortcuts for any Figma plugins yet, but fingers crossed that they come soon! Thank you SO much for your requests and feedback to help bring this to life.

For those of you who are pumped about the Colorblind Simulator, keep up the excitement because it’s coming shortly. We wanted to ensure we delivered a quality experience on a completely new platform, and truly pay attention to how we can capitalize on the Figma experience for all of you.

---

Any questions or info to share? Don’t hesitate to reach out via email or Twitter. Want to talk shop with folks discussing all things accessible, ethical and inclusive design? Join our Slack community. For the latest on accessibility, inclusivity, and some Stark news in your inbox every week: Subscribe to our newsletter.