Color Contrast for Interface Design

MDS
bymds
Published in
6 min readApr 5, 2018

--

Globally, there are an estimated 2.2 billion people in the world who are visually impaired. This number includes anyone from legally blind, to those with less than 20/20 vision.

This short guide, written during the creation of the Contrast MacOS app, will help you achieve the accessibility standards outlined in the WCAG 2.0, specifically with foreground and background color when it comes to text on digital screens.

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.

Decorative elements or text that is part of a logo or brand name have no minimum contrast requirements.

There are other factors to consider in order to be fully compliant with AA and AAA standards, but this will get you off to a great start.

Score and Ratio

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

  1. The Score
  2. The Ratio

The equation outputs a number between 1 and 21, with 21 being the highest amount of contrast — think black text and a white background — and 1 being no contrast — white on white.

The output of contrast between any two colors will fall somewhere on the spectrum between 1–21. That’s where the scores are derived from.

There are technically 5 scores.

  1. AAA
  2. AAA Large
  3. AA
  4. AA Large
  5. 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.

Note that in order to achieve a true AAA rating, section 1.4.8.1 of the WCAG also states that “Foreground and background colors can be selected by the user.”

So unless you’re planning on creating that functionality in your website or app as well, there’s really no reason to shoot for higher than AA, in my humble opinion. Of course there are caveats. Your body copy may look the nicest and be the most readable if you’re hitting a AAA score, so take this advice with a grain of salt.

This score is derived for people with low 20/80 vision. This visual acuity score is often not able to be corrected with glasses, etc.

Side note, 20/200 is legally blind.

ISO 9241–3 Ergonomic requirements for office work with visual display terminals (VDTs) — Part 3: Visual display requirements. Amendment 1.

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.

The WCAG describes 14pt bold and 18pt as "large" sizes. This roughly translates to 18.5px bold and 24px @1x. This is an approximation since letterform sizes can vary greatly between typefaces.

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.

There is empirical evidence that visual acuity of 20/40 is associated with a contrast sensitivity loss of roughly 1.5, which is where the 4.5 score is derived.

Gittings, NS and Fozard, JL (1986). Age related changes in visual acuity. Experimental Gerontology, 21(4–5), 423–433.

ANSI-HFES-100–1988. American National Standard for Human Factors Engineering of Visual Display Terminal Workstations, Section 6, pp. 17–20.

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.

This is the minimum level recommended by ISO-9241–3 and ANSI-HFES-100–1988 for standard text and normal vision, which is where WCAG derived this score.

We made the decision to abbreviate Large to + in the app so that each score would be similar in character length and not impact the fixed width of the interface.

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.

Quite often, failing scores can seem to work nicely within the context of a static design review. But in the context of real world usage, these failing scores can cause serious issues for the usability of your interface.

What about mobile apps and their big sharp retina screens?

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

Mobile devices are more likely than desktop/laptop devices to be used in varied environments including outdoors, where glare from the sun or other strong lighting sources is more likely. This scenario heightens the importance of use of good contrast for all users and may compound the challenges that users with low vision have accessing content with poor contrast on mobile devices.”

So while it is probably easier to see lighter text on a high resolution screens in a controlled environment, the use case for mobile is incredibly unpredictable to risk going super light with text. Direct sunlight, dark rooms, and more all significantly affect the display on mobile screens.

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:

1.4.8 Visual Presentation: For the visual presentation of blocks of text, a mechanism is available to achieve the following: (Level AAA)Foreground and background colors can be selected by the user.Width is no more than 80 characters or glyphs (40 if CJK). Text is not justified (aligned to both the left and the right margins). Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing. Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.

You can see that in order to hit a AAA rating, your app or site needs to allow selection of foreground and background colors by the user. So even if your color contrast is AAA, that doesn’t mean your entire product is.

If you’d like to see just how deep the the WCAG rabbit hole goes, take the red pill.

And if you’d like a super duper, easy way to check your color contrast, right from your Mac menu bar, download Contrast and start designing better interfaces. You might even have fun using it. 🤓

Also, this is the best web-based contrast checker that I’ve found if you’re more of a web person.

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

This guide was originally published on usecontrast.com/guide. Contrast was design by Matt D. Smith (👋) and developed by Sam Soffes.

--

--