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.

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.org ((The Nonprofit Technology Network is a great organization supporting nonprofit technology staff and consultants.)) 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, ((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.)) but luckily we have tools to help us.

First, here are the contrasts from that first diagram:

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. ((The Colorzilla plugin for Firefox and Chrome is a great tool to find those values.))  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:

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:

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.

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.