Text Contrast for Web Pages

Stephen Burgess | |
Design
| Accessibility Typography
Reading Time: 15 minutes | Reading Level: Grade 9

How easy a page is to read — its legibility — is a concern that page and type designers have grappled with for centuries. The practice of laying out text is a technical and artistic tradition that stretches back to Gutenberg and far beyond. The web presents all-new challenges for legibility, and understanding contrast can help you ensure you're not excluding visitors with vision impairments. This post addresses ways to test and improve the contrast of the text on your web page.

The new challenges of legibility for web-based content arise partly from freedom of choice. We can choose from almost 17 million colors in the hexadecimal (web colors) scale. Before the web, printing with non-black ink or on non-white paper could be prohibitively expensive. Online, it's possible, even easy, to create any number of color combinations. But with that freedom comes the responsibility to make design choices that don't exclude millions of people with vision impairment. This responsibility is shared among everyone creating and designing web pages.

Typographical Contrast for Accessibility

Defining "contrast"

This post uses the word "contrast" quite a bit. When I say contrast, I mean it in terms of text contrast. It's the difference between the darkness of your text and the lightness of your background. With dark themes, you may also have white text against a dark background. In that case, even more contrast is needed to maintain the same degree of legibility. In general, the more text stands out against its background, the easier it is to read. Color contrast and type form contrast can also play a role in legibility.

I'll be focusing on text contrast in this post, but there are a number of other factors that determine legibility. Different typefaces may be more or less legible. Carefully choosing fonts and font-weights can provide better legibility. Bold or heavy fonts will be more legible at lower contrast levels. Light fonts will be less so. Check out the Resources section for more information about other ways to improve legibility on your website.

WCAG Guidelines for Contrast

The Web Content Accessibility Guidelines or WCAG outline a series of authoritative recommendations for text contrast on the web. The guidelines define ratios of difference of darkness to light for describing contrast. These start at 1:1 for white text on a white background. At other end of the spectrum, the ratio 21:1 describes black text on a white background. The ratio 4.5:1 represents the minimum legibility (AA standard) on the web. 7:1 is the contrast ratio which is considered to offer full accessibility (AAA standard). Some schools of design use a text contrast ratio around 5.5:1 — I'll be critical of that approach in this post, because it ignores the needs of thousands, even millions, of people. The higher contrast of 7:1 should be the starting point for contrast on the web. As I demonstrate below, many companies and websites disregard the WCAG AAA recommendations.

Contrast ratios are always presented in the X:1 format (with the second number always being "1"). This is a convention that the WCAG follows, and which I have also adopted.

Contrast ratio definitions

  • ( #FFFFFF) to (#FFFFFF) - 1:1 - Invisible
  • ( #797676) to (#FFFFFF) - 4.5:1 - Meets WCAG AA standard at 16px
  • ( #6C6868) to (#FFFFFF) - 5.5:1 - Somewhat Legible
  • ( #595959) to (#FFFFFF) - 7:1 - Meets WCAG AAA standard - Legible
  • ( #000000) to (#FFFFFF) - 21:1 - Maximum contrast

The WCAG ratios give designers a starting point to talk about legibility. They provide a specific rationale for why these values were chosen. For the ratio of 7:1, the rationale is as follows.

The contrast ratio of 7:1 was chosen for level AAA because it compensated for the loss in contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/80 vision. People with more than this degree of vision loss usually use assistive technologies to access their content (and the assistive technologies usually have contrast enhancing, as well as magnification capability built into them). The 7:1 level therefore generally provides compensation for the loss in contrast sensitivity experienced by users with low vision who do not use assistive technology and provides contrast enhancement for color deficiency as well. (W3C)

Here's that same quote in a 16px font at a 4.5:1 contrast ratio. Now, if you're on a laptop, try turning the screen brightness as low as it can go without being completely dark. This can somewhat approximate vision impairment.

The contrast ratio of 7:1 was chosen for level AAA because it compensated for the loss in contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/80 vision. People with more than this degree of vision loss usually use assistive technologies to access their content (and the assistive technologies usually have contrast enhancing, as well as magnification capability built into them). The 7:1 level therefore generally provides compensation for the loss in contrast sensitivity experienced by users with low vision who do not use assistive technology and provides contrast enhancement for color deficiency as well.

Now we have a framework to discuss contrast. If the goal is to not exclude anybody, 7:1 should be considered the minimum contrast ratio. Unfortunately, this approach is not implemented on a great number of websites.

Contrast charts

Normal font size (16px)

#000000
#363647
#595959
#969595
#D5D2D1
#FFFFFF

#FFFFFF		 21:1 12:1 7:1 3:1 1.5:1 1:1

#F5F7F7		 20:1 11:1 6.5:1 2.8:1 1.4:1 1.1:1

#EBEBEB		 18:1 10:1 6:1 2.5:1 1.3:1 1.2:1

#B9B7B7		 11:1 6:1 3.5:1 1.5:1 1.3:1 2:1

#969595		 7:1 4:1 2.3:1 1:1 2:1 3:1

#797676		 4.7:1 2.6:1 1.6:1 1.2:1 3:1 4.5:1

#5A5D5E		 3.2:1 1.8:1 1:1 2.2:1 4.4:1 6.6:1

#272822		 1.4:1 1.3:1 2.1:1 3:1 9.9:1 15:1

#000000		 1:1 1.8:1 3:1 7:1 14:1 21:1
Large font size (24px)

#000000
#363647
#595959
#FFFFFF

#FFFFFF		 21:1 12:1 7:1 1:1

#F5F7F7		 20:1 11:1 6.5:1 1.1:1

#EBEBEB		 18:1 10:1 6:1 1.2:1

#B9B7B7		 11:1 6:1 3.5:1 2:1

#969595		 7:1 4:1 2.3:1 3:1

#797676		 4.7:1 2.6:1 1.6:1 4.5:1

#5A5D5E		 3.2:1 1.8:1 1.1:1 6.6:1

#272822		 1.4:1 1.3:1 2.1:1 15:1

#000000		 1:1 1.8:1 3:1 21:1

Why care about contrast?

As the Wave Accessibility Evaluation (WAVE) tool succinctly puts it, "Adequate contrast is necessary for all users, especially users with low vision." There are a lot of benefits that come from designing a webpage with good contrast. The Nielson Normal Group covers this in their article Low-Contrast Text Is Not the Answer. In short:

  • It makes your content easier to read
  • Your webpage will be accessible to millions of visually impaired people who could otherwise not use it
  • It makes web pages easier to use for everyone, in all conditions

Using contrast-checking tools

I'll be using the WAVE tool to check popular web pages for contrast. After entering a URL into the tool, I can see alerts for low contrast in any public web page. To see contrast issues in the WAVE tool, switch to the "Contrast" tab at the top of the left-hand column.

The WebAIM Color Contrast Checker checks the contrast of foreground and background colors. It's what I used to create the contrast tables above. You can actually adjust colors through the UI to see how the contrast ratio passes or fails for 16px and 24px font sizes.

Contrast in the wild

Let's dig a little further to see how the biggest names in tech perform on text contrast.

Apple

Checking Apple's landing page with the WAVE tool, there were seven contrast errors on the front page alone. Not only are there several problems in the footer, but the blue call-to-action link in the header has a ratio of only 4.5:1. The font size in this case is 17px.

Smashing Magazine

Smashing Mag's Contrast Recommendations

Smashing Magazine is one of the leading voices in web development. Their work on making websites accessible has made a major positive impact in web development. Just a couple weeks before I started this piece, they published Designing for Accessibility and Inclusion, an overview on web accessibility best practices. It's a great read, and I recommend it. A quote from that piece:

Poor contrast between foreground and background colors make it harder to see for users with low vision, using a low-end monitor, or who are just in direct sunlight. All text, icons, and any focus indicators used for users using a keyboard should meet a minimum contrast ratio of 4.5:1 to the background color.

Here's where we differ. While 4.5:1 represents a minimum contrast ratio, it still excludes millions of people in the U.S. alone. That's millions of potential users who will struggle to read your content. This is especially salient for widely read sites like SM. The ratio of 4.5:1 is mentioned as a minimum — I think its minimum status should be emphasized. The recommended ratio of 7:1 was not even mentioned in this case.

Does Smashing Mag meet the WCAG AAA standard?

Looking at the Smashing Magazine website itself, we find a number of places where the text contrast ratio is below 7:1. While the site does meet the AAA standard in many places, it doesn't do this consistently. In the case of links to tags for posts, it doesn't even meet the AA standard for large text.

There are two shades of blue used for links across the site, #006fc6 and #2da2c5. Their background color is white ( #FFFFFF ). The first link blue, the one that's more widely used, has a contrast ratio of 5.14:1. This meets the WCAG AA specification, but not the AAA spec. The second blue, which seems to be used for secondary links such as content tags, has a ratio of 2.96:1. This fails both the AA and AAA WCAG contrast guidelines, as well as their own recommendations.

You could say that contrast is but a small part of the accessibility puzzle. You could also say that, overall, Smashing Magazine has done a lot to advance the cause of accessibility. You'd be right. My intention is point out how easy it can be to overlook issues of contrast as they relate to accessibility. It just so happens that a great number of websites don't pass this test. So many, in fact, that even Smashing Magazine is among them! I was surprised to find how commonly issues of contrast are overlooked.

American Foundation for the Blind

It's hard to understate how common it is for websites to fail to meet the WCAG AAA standard for accessibility. Checking the Prevent Blindness American website, we find that their navigation comes up short, with a contrast ratio of 6.38:1 at a font size of 14px. At font sizes less than 16px, and for light text on a dark background, an even higher contrast ratio should be used to ensure the site is usable for everyone. Again, I am not intending to criticize a company that does excellent, important work in this field. However, for people with vision impairment severe enough to need assistance, this site would be difficult to navigate.

Bug reporting on contrast issues

For people who are visually impaired, having a bad experience on a website may be extremely common. So common, in fact, that they won't even bother to tell you if they couldn't use your site. Just because no one has reported a problem doesn't mean there isn't a problem.

Raygun, an error and reporting software company, tracks bugs. [Disclaimer: This Raygun is not the influential music and design magazine Ray Gun from the 90s. Different Raygun. 🔫 (pew pew)] They claim they have found that only 1% of users actually report to us the errors that we know they experienced. This gives a general idea of bug reporting rates.

In my personal experience, I've worked with people who felt that if a bug wasn't reported, it wasn't worth the bother to go and look for them. Without incentives to address this issue, most companies and web developers are not sufficiently motivated to address this issue. You can see this for yourself by using the WAVE tool to discover just how common low contrast is across popular websites.

Despite the fact that it prevents people from using the site, poor contrast is not treated like the bug it is. It is falls into the category of design decisions. That choice likely will be made either by a designer, a product manager, or a web engineer. Including support from senior leadership, those roles hold the responsibility to make websites that are accessible. It's up to designers to make sure that the design isn't favoring style over people.

Conclusion

Many sites online feature text-on-background contrast ratios that are understood to exclude people with vision impairments. While the WCAG has done an admirable job communicating this, accessibility on the web is often treated as an afterthought. If you'll bear with me, I think there may be three reasons for the lack of adoption of contrast best practices.

Some people are unaware that having poor contrast means excluding thousands or millions of people. OK, that's simple enough. Let's ramp up our awareness-raising efforts.

In other cases, people may have heard of the concept, but may still not be equipped to understand the real-world consequences of their design decisions. They may not realize that they are preventing people from using their site.

Finally, there are some designers who decide to simply accept that they are being exclusive. This comes from thinking about accessibility in terms of "most people can use it." If you think that 93.5% of people can use your site, that sounds pretty good. If instead you phrase it that you are excluding the around 20 million people in the U.S. with vision loss (AFB), the effect is different. Excluding 6% of people in the U.S. just doesn't have the same ring as including 94%.

The web is a global cultural commons, and is therefore just as subject to the tragedy of the commons as any other. People profit from the common resources — the ability to make websites, in this case — while being inefficient and resulting in harm for users. Equifax is a perfect example of this. Equifax leaked a great deal of personal info about a great many people. These great secret databases were farmed from the great common resource of information on the Internet. And yet, Equifax didn't feel responsible to properly protect that information — information their users never assented to let them store.

Just as it was Equifax's job to protect that data — which they didn't — it is all websites' and companies' job to make the web accessible for everyone. Especially when the reason that accessibility is being traded away is because of a design choice, not an engineering problem.

One of the defining principles of the web is that it should provide all people, regardless of physical or technological readiness, with access to information.

Patrick Lynch and Sarah Horton, .

Globally, there are some 216.6 million people in the world with moderate to severe vision impairment, or 3% of the world's population. (Bourne). That number does not include those considered to be legally blind. In the US, Prevent Blindness America estimates that 2.9 million people over 40 years old in the U.S. are vision impaired. That is a prevalence rate of 2%. There are another 85 million people over 40 who report having AMD, cataracts, diabetic retinopathy, glaucoma, hyperopia, and myopia. These conditions may also make reading difficult. Including those last cases, that's almost 89 million people above 40 in the US alone who may be affected by poor contrast. And for the rest of us, good contrast is just easier to read.

Many popular and heavily used websites have a number of accessibility issues in 2018. Designers and developers alone are not responsible for making the web accessible. We are responsible for bringing the issue to our companies and making them aware of it. We may get a response that accessibility isn't a priority. A common reason for this is that the company needs to release new web features quickly. But if we don't recognize our collective responsibility, the commons is diminished as a result. If we don't ask to do this and communicate its importance, it may never happen at all.

Glossary

  • Contrast The difference between the foreground and background colors on a page.
  • Contrast (color) Two colors from different segments of the color wheel are contrasting colors (also known as complementary or clashing colors). For example, red is from the warm half of the color wheel and blue is from the cool half. They are contrasting colors. (Bear)
  • Contrast (typographic) - In the analysis of letterforms, this usually refers to the degree of contrast between the thick strokes and thin strokes of a given letter. In Romantic faces such as Bulmer and Bodoni, the contrast is high. In unmodulated faces such as Gill Sans and Futura, contrast is low or nonexistent. (Bringhurst)
  • Legibility - Whether people are able to see, distinguish, and recognize the characters and words in your text. (Nielson Norman Group)
  • Legibility (alternate) - Speed of reading seems to be the most satisfactory measure of the legibility of type faces. A legible type is one that can be read rapidly and easily. (Tinker)
  • Legibility (typographic) How a typeface is designed and how well one individual character can be distinguished from another. (Loyd)
  • Readability The way in which words and blocks of type are arranged on a page. (Loyd)
  • Visual impairment - A condition that limits the visual capability of an individual to such a degree that additional support is needed. (A11y Project)
  • WCAG (Web Content Accessibility Guidelines) - Guidelines created by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C). The guidelines define how to make Web content more accessible to people with disabilities.

Sources

Resources

Disqus Comments