Today, we’re super excited to introduce Smart Color Suggestions in Stark. Since we rolled out the first version of Stark’s plugins we’ve been receiving an incredible amount of feedback and suggestions (no pun intended!) from our community on what would make your life designing accessible products easier. Two of the most asked questions in regards to color were “What do I do when the colors we’re using in our design fail the checks?” and “How do I find colors that pass the checks but aren’t drastically different from our current color palette?”

As we spent time trying to understand the various factors behind this question, we realized you wanted a few things:

1. Determine accessible colors that aren’t drastically different from the ones you’re using in your design, because we understand it’s easier to tweak a value than to completely overhaul a design system or style guide.
2. The ability to quickly adjust the document you’re working on, and ideally updating every component using the same colors automatically.

Smart Suggestions is here to simplify the process and allow you to update your design—be it in the individual file you’re working in or in your design library, and hand the new color value off to your team of engineers in less than 30 seconds. With Suggestions, Stark provides alternative foreground and background swatches that are guaranteed to meet AA or AAA criteria, and don’t deviate too far from your original. What’s more, they adjust automatically in real time as you select various combinations.

Here’s how it works

• Select the layer[s] or component you want to run a contrast check on. We recommend doing so on a parent component in order for Smart Suggestions to update your design system and in turn all instances automatically.
• Use your hotkey or go up to plugins > Stark > Contrast check to run it
• Contrast check didn’t pass? No problem! Select from the two alternative lighter or darker swatches for your foreground and/or background, and watch as Stark runs another check in real time. Feel free to only select one or the other. Whichever you decide to change is totally up to you. Color alternative[s] pass?! Hooray!

Go ahead, update your design, and watch how Stark adjusts your parent component (and all the connected instances) to make the change in your design system.

Become a Stark Pro & get Smart Color Suggestions

Smart Color Suggestions is available today for all of our Stark Pro users, and free to test for everyone on the free plan. And yep, it’s available in Figma, Adobe XD and Sketch! As you’re diving into color suggestions please let us know what you think and what you’d like for us to add next. We’re all ears!

Our goal with Suggestions is to give you the boost and tips to speed up the process to make your colors (and design system) as accessible as possible. It is just the beginning on our journey to make the world’s products more accessible for everyone.

Happy color swapping :)

---

To stay up to date with the latest features and news, sign up for our newsletter.

Want to join a community of other designers, developers, and product managers to share, learn, and talk shop around all things accessibility? Join our Slack community, and follow us on Twitter and Instagram.