Color Contrast for Interface Design

MDS
MDS
Apr 5, 2018 · 6 min read

TL;DR

  • Fail — Your text doesn’t have enough contrast with the background. You probably want to make it darker. This is a score of less than 3.0.
  • AA Large — The smallest acceptable amount of contrast for type sizes of 18px and larger. This is a score of at least 3.0.
  • AA — This is the sweet spot for text sizes below ~18pt. This is a score of at least 4.5.
  • AAA — This is enhanced contrast with a score of at least 7.0. Think longer form articles that will be read for a significant period of time.

Score and Ratio

There is an equation provided by the WCAG (Web Content Accessibility Guidelines) that determines these two values.

  1. The Ratio
  1. AAA Large
  2. AA
  3. AA Large
  4. Fail

AAA

AAA means that your text has a contrast ratio of at least 7.0. For example, 595959 text on a ffffff background and vice versa.

AAA Large

AAA Large means that your large text has a contrast ratio of 4.5 or higher, which is the same score as AA, which is why you won’t see AAA Large as a visible score in the app.

If you’ve never checked your contrast scores before, you’re going to be shocked at how dark you need to go to hit AA for small sizes. I urge you to press through—your users will probably not thank you, but they will enjoy readable text in your designs. It’s just the right thing to do.

AA

AA means that your text has a contrast ratio of at least 4.5 or higher. For example, 757777 text on a ffffff background and vice versa.

AA Large (AA+)

AA Large means that your text has a contrast ratio of at least 3.0. For example, 949595 text on a ffffff background.

FAIL

Fail means that your text has a contrast ratio of 2.9 or lower. This does not apply to logos, text in logos, and other decorative elements.

What about mobile apps and their big sharp retina screens?

There’s a working draft of the WCAG Mobile guidelines that says…

More than just contrast

There’s a lot more to accessibility than just color contrast. Here are a few snippets from the WCAG for example:

Contrast used in Sketch
Contrast used in Adobe XD
Contrast used in Illustrator
Contrast used with Figma

bymds

by MDS

MDS

Written by

MDS

Shape Shifter. http://mds.is/matt

bymds

bymds

by MDS