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!
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.
4 thoughts on “Why Contrast Matters”
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 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!
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.
Thanks for sharing that resource, Graham! I know the Paciello Group well from their blog but somehow had never seen that tool. I’ll definitely try it out on my next design project.