Why Contrast Matters

Contrast makes it easy to distinguish one thing from another. In web design, contrast usually refers to the difference between the foreground and background of text. In other words, how different are the words on the screen from the background they sit on.

High Contrast

Low Contrast

High-Contrast Text vs. Low-Contrast Text

 

Text contrast is an important accessibility criterion with official standards and means of measurement. Yet somehow, it’s often ignored by website designers who either don’t know about its importance, don’t fully appreciate its importance, or don’t know how to measure it.

For example, just recently, I noticed that the newly-proposed homepage design for NTEN.org1 used lower-than-recommended contrast for one of the most important pieces of text on the page. Luckily, I left some feedback and they’re going to reevaluate (see last paragraph).

Why Contrast Matters

There are so many reasons contrast matters!

People using websites don’t read, they scan. When most people scan or read quickly, they rely on word and character shapes rather than more explicitly conscious strategies like analyzing each letter and the order in which it appears. You’re probably doing that right now. By using high-contrast text that makes those shapes easy to immediately recognize, there’s less visual information and cognitive “strain” required to read and engage with a web page. Remember, the whole purpose of having a web page is to let people engage with it and, by proxy, you and your organization.

There are lots of cases when contrast can make the difference between a page being usable at all.

  • If you’re looking at certain types of monitors from particularly wide angles, low-contrast text may completely disappear.
  • Low-quality displays, displays with low backlight, and low-contrast display settings can all reduce the default amount of contrast, making already-low-contrast designs even lower.
  • Many types of visual impairments make it hard or impossible to read low-contrast text.

In all of these situations, a website design that doesn’t consider contrast ratios can become harder to use or completely inaccessible to a significant number of site visitors.

How Much Contrast You Need and How To Measure It

Besides the basic definition, we can measure contrast as a ratio between two colors. Based on research from accessibility experts, we have official recommendations for minimum contrast ratios required for a design to be considered accessible. To make things a little more complicated, there are actually two levels of recommendations for contrast, AA and AAA. I’ll focus on AA which is the less-strict of the two.

To meet the Web Content Accessibility Group’s (WCAG) standards for contrast all small text (the body text like in this blog post) must have a ratio of at least 4.5:1 and all large text (like headlines, titles, etc.) must have a ratio of at least 3:1. That is to say that larger text can be lower-contrast while remaining legible.

To be honest, I don’t know exactly how the math works,2 but luckily we have tools to help us.

First, here are the contrasts from that first diagram:

21:1

2.79:1

Text contrast ratios shown in that contrast level. They are 21:1 and 2.79:1, respectively.

 

Those numbers come from the WCAG’s Color Contrast Checker which is free to use and easy so long as you can find the hex color values from your design.3  To reproduce the results above, enter #000000 / #ffffff for the first example and #777777 / #cccccc for the second example. If you test the background of my blog at the moment with the font color (#000000 / #eee9b0), you’ll see that it meets both levels AA and AAA for contrast with a ratio of 16.92:1.

You can also use the WAVE Toolbar plugin for Firefox and Chrome to analyze contrast as well as other accessibility issues including alt text and heading structure.

Testing Non-Solid Color Backgrounds

Sometimes, though, you don’t have a solid color background like these two examples:

Bunny Rabbit

Low Contrast

Text over transparency over image and Text on a gradient

 

Notice that there isn’t a single background color we can enter into our contrast checker. Therefore, I’ll use the Chrome Color Contrast Analyzer plugin. Once applying it to that figure above, the plugin highlights the pixels in white that have sufficient contrast:

Analysis Using the Color Contrast Analyzer Chrome Plugin

Using the AA guidelines for “medium bold and large non-bold text” (that text is 30px bold), we can see that the text-over-image example has sufficient contrast but the text-over-gradient example does not!

Going Further

While a bit beyond this article, the NoCoffee Chrome plugin detailed at length in Smashing Magazine’s article, “Design Accessibly, See Differently: Color Contrast Tips And Tools,” allows you to simulate how web pages look to people with a wide variety of vision impairments such as color blindness (more like color blindnesses) and cataracts. It’s a fun tool to play with, learn from, and improve your website’s design with.

A person with Deuteranopia (a reduced sensitivity to green light) would see the diagram and color contrast test above something like this.
A person with Deuteranopia (a reduced sensitivity to green light) would see the diagram and color contrast test above something like this, produced by the NoCoffee Chrome plugin.

It’s Not Actually That Confusing

This article went into detail in order to cover some important background and provide useful tools to actually test the color contrast on your website. But it all boils down to this:

  • There are a lot of reasons why sufficient color contrast helps people use your website.
  • Color contrast is measured using a ratio.
  • There are official standards for how much contrast you need to make your site accessible.
  • There are lots of tools to help you measure contrast to ensure that your site is accessible.

Footnotes

  1. The Nonprofit Technology Network is a great organization supporting nonprofit technology staff and consultants. [Back to spot ↩]
  2. If you want to know, I’d direct you to the paper that developed the standard! “American National Standard for Human Factors Engineering of Visual Display Terminal Workstations,” Section 6, pp. 17-20. [Back to spot ↩]
  3. The Colorzilla plugin for Firefox and Chrome is a great tool to find those values. [Back to spot ↩]

4 thoughts on “Why Contrast Matters”

  1. Once again, you’ve started a great discussion Mark!

    Creating sites that are 508 Compliant requires that we go beyond the usual “best practices” for designing, developing and creating our websites.

    In my current position, I am creating websites for educational organizations that is “dedicated to improving the lives of children with developmental disabilities and other special needs as well as their families and those who work on their behalf.” Obviously our website SHOULD be as accessible as possible.

    Fortunately the need to create accessible websites is becoming more recognized and supported. I’m still learning how to create sites that meet 508 Compliance. It’s a journey that is interesting, challenging and definitely worthwhile. Creating sites that ANYONE can access also tends to create sites that are more user friendly as well.

    Keep the conversation going! This week I’ve been focusing on adding more contrast to our websites and also looking into our apps too. Your post is a great resource.

    Thanks,
    Carol

    1. Thanks for such an in-depth response, Carol! I think what you highlight here is the slow shift from thinking of accessibility as something a person adds on because it’s required (which it sometimes is an in the case of 508 compliance) to something that a person just does as part of normal work because it makes the web better.

      I posted a bit about how to motivate this shift a little while ago. I love WebAIMs pyramid graphic that shows the increasingly effective motivations for accessibility. I’m working on shifting my communication on the subject to be more inspiring because of it.

      Good luck with your sites and getting that contrast bumped up where needed!

  2. Important article and thanks for posting.

    Another colour contrast tool worth looking at is the one by the Paciello Group (http://www.paciellogroup.com/resources/contrastanalyser/). It has useful colour picking tools which means you don’t have to key in the hex values for the colours. Because the tool is not browser based it can be used to test colour contrast of new design jpegs or psds for before you even start coding up a stylesheet.

    The Paciello Group tool is tied into the WCAG2.0 algorithms so it gives you a pass/fail immediately on any colour combination.

Join the Discussion

This site uses Akismet to reduce spam. Learn how your comment data is processed.