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.
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.
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 with lessened fill opacity
- Single layer with lessened layer opacity
- 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
- 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.
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.
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).
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 + 9or
ctrl + shift + 9for 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).
- Keyboard shortcut: A quick hit of
- Once it’s opened, you can easily navigate between your layers or components on the artboard to speed through your checks.
Have any questions about using the contrast checker? Don’t hesitate to reach out to us at email@example.com or via the support chat in the lower right corner of this page.