Using the Contrast Checker
Check your designs to ensure your colors meet accessibility standards
When checking contrast for colors or text virtually anywhere, you’ll find the
AAA pop up frequently. These are the different conformant
levels for contrast checking based on the
WCAG 2.0 standards
Different companies have different conformant levels they must meet based on situation and purpose of the product or service. But really, all companies should meet them to ensure they’re providing a great experience for everyone and not excluding an extremely large number of people — like individuals with a different types of colorblindness, cognitive or neurological disorders, and more. To be completely honest though, it makes the experience a whole lot better for everyone using your product, not just those with disabilities.
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
There are several ways to check the contrast of layers in Stark. And the quickest way to kickstart it is by using the hot keys (not yet available in Figma) or via the plugin menu. 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.
- The 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 img .
- Stark does not accept gradients when checking contrast because there’s no safe way to validate the color the text is on top of.
Any questions? Don’t hesitate to ask!