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

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 *every*one 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 contrast of your layers.

How to run the contrast checker

  1. Simply select two layers.
  2. Run the contrast checker via the plugin menu or by using the hot keys.

    Mac - shift + cmd + P
    Windows - shift + ctrl + Q

Stark can even account for opacity when running a contrast check by putting together some mixing magic. Want to give it a spin?

  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.

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

Note...

  • 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!

Did this answer your question?