A lot of things we work on have us excited, but rolling out the ability to check contrast with opacity had us saying “That’s pretty damn cool.” more than a few times. Especially given the fact that after scouring the internet for products that have this, we found that we’re seemingly the first design and accessibility tool ever to do it.

Now that’s big!

Though some of you have had the opportunity to use it and you may have seen us talking about it, we’ve been heads down working to iron out and “perfect” the feature as much as possible.

Alright, how does it work?

The way we think about our contrast checker is in stacks which contain a foreground (top layer), background (bottom layer) and artboard.

1. Turn the fill, text or layer opacity of your foreground element to < 100%.
2. Select your additional layer (two, as always).
3. Run the check from the plugin menu by going to Plugins > Stark > Contrast Checker or use the hotkeys / shortcuts feature. Bam. Look how Stark successfully did color mixing magic, delivering a (hopefully passing) contrast ratio :] See? Pretty damn cool.

Keep in mind

As of right now, you can only make your foreground (top) layer opaque. No worries though, we’ll remind you by showing an error if you try to run a contrast check and the background layer is < 100% opacity. It will also show an error if you have < 100% on BOTH the layer and text/fill opacity. Either the layer or the text/fill needs to be at 100%.

---

ICYMI: Yesterday we pushed out an update allowing you to move the Stark window(s) around (wherever your heart desires) in Sketch again! <3

That’s it for now. We can’t wait for you to see what else we’re cooking up. Want to talk shop with folks discussing all things accessible, ethical and inclusive design? Join our Slack community. Want the latest on accessibility, inclusivity, and some Stark news in your inbox every week? Subscribe to our newsletter, and follow us to talk shop on Twitter.

— The Stark crew 🖤