Support

How can our team help you?

Sometimes technology gets wonky, and copy isn’t clear. This is your one-stop-shop for all Stark related questions.

Three basketball teammates hanging out

Using the Contrast Checker

Check your designs to ensure your colors meet accessibility standards

In this article:

When checking contrast for colors or text virtually anywhere, you’ll find the labels AA and AAA pop up frequently. These are the different conformant levels for contrast checking based on the WCAG 2.0 standards for accessibility.

📝
Our blog post, Accessible contrast ratios and A-levels explained, is a great starting guide to learn more!

Checking contrast using Stark

Colors are a league of their own when it comes to design and ultimately can make or break your product. With Stark, you can easily check the AA and AAA color contrast of your text or shape layers.

Contrast checker screen in the Stark plugin
How to run the contrast checker

To get started, click the Plugins menu in your design tool > Stark > Contract Checker.

There are several ways to check the contrast of layers. For Stark, layers can be text or shape layers. Once you’re ready to check contrast, you can do so by selecting a…

Single layer
  • Single layer with lessened fill opacity
  • Single layer with lessened layer opacity
Group
  • One layer in a group
  • Two layers in a group
  • One layer in a group with lessened fill opacity
  • One layer in a group with lessened layer opacity
  • Two layers in a group with one layer lessened fill opacity
  • Two layers in a group with one layer lessened layer opacity
Standalone
  • Single layer on artboard
  • Two layers on artboard
  • Two layers with one layer lessened fill opacity
  • Two layers with one layer lessened layer opacity

Bam. Look how Stark successfully did color mixing magic, delivering a (hopefully passing) contrast ratio. See? Pretty damn cool.

🔎

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.

We 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%.

Things to keep in mind
  • You cannot check contrast, with one layer being an image.
  • Stark does not accept gradients when checking contrast because there’s no safe way to validate the color the text is on top of.

Using Color Suggestions

What if the layers didn’t pass? We’ve got you covered! With Color 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.

Two screens showing color suggestions in use. The left screen shows a failing contrast. On the right, a color suggestion has been selected, producing a passing color.
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, so Color Suggestions can automatically update all instances in your design system.
  • Go to Plugins > Stark > Contrast Checker to run it
  • Contrast check didn’t pass? No problem! Select from the alternative lighter or darker swatches for your foreground or background, and watch as Stark runs checks in real-time. Feel free to only select one or the other. Whichever you decide to change is totally up to you. Color alternatives pass?! Hooray!

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

🚀
Stark’s Free plan comes with 3 Color Suggestions. Need more? Upgrade to PRO!

Using the Rapid Contrast Checking panel in Adobe XD

With Rapid Contrast Checking, you get an entirely new experience that’s faster, smarter, and out of your way more than ever before. You can quickly access and launch Stark and interact with the functionality directly within the panel UI — instead of navigating through the top-bar menu or modal window(s).

The Stark Contrast Checker embedded in the left panel of the Adobe XD application.

How to use Stark in the plugins panel:

  • Select a component (that has two layers) or two random layers across your artboard.
  • There are two ways to run contrast checking in the plugin panel. You only need to trigger the panel once (unless you switch to a different plugin).
    • Keyboard shortcut: A quick hit of cmd + shift + 9 or ctrl + shift + 9 for our Windows friends will do it.
    • Manually: Find and click the plugins glyph in the lower-left corner, click on Stark, and select Rapid Contrast Checking (Pro).
  • Once it’s opened, you can easily navigate between your layers or components on the artboard to speed through your checks.
🚀
The plugin panel is only available in Adobe XD for our PRO users.

Have any questions about using the contrast checker? Don’t hesitate to reach out to us at support@getstark.co or via the support chat in the lower right corner of this page.