Increasing Text Color Contrast Improves Readability

Recently, I helped a friend with her website. I had just spent the whole day staring at a computer screen, and my eyes were tired. So the first thing I noticed was the contrast between the body text and the background…or rather, the lack thereof.

The page looked something like this:

This text isn’t very easy to read, especially if you have a vision impairment.

I have made many similar color decisions myself in the past. When I first started making websites, choosing the colors was my favorite part. The only criterion I used to decide colors for text and background was, “does it look pretty?”

What I didn’t realize at that point was that color choice can make a website difficult to read, and even exclude users from being able to view a website at all.

Web Content Accessibility Guidelines (WCAG)

The Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C) has published a set of standards for web content, called the the Web Content Accessibility Guidelines (WCAG for short). Within this document are standards for just about every aspect of web content, including colors, images, video, text, and documents.

The purpose is to make web sites usable for the maximum number of people. Going back to the text color situation, there are guidelines for how much contrast there should be between the background of a page and its text. The relevant standard in WCAG 2.0 reads as follows:

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

WCAG 2.0, Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.

The part to focus on here is the ratio of 4.5:1 for normal text.

So how do I ensure that my colors meet the standard?

It would be a lot to expect anyone to know the contrast ratio of 2 colors just by looking at them. Thankfully, there are tools available to help. For anyone familiar with Chrome Developer Tools, here’s a link to help with finding color contrast ratios in the Elements tab.

Contrast Ratio, by Lea Verou is a free and easy-to-use tool that displays the two chosen colors along with their contrast ratio. There’s also a button to swap the two colors. Using it to analyze the two colors in the low-contrast example above gives the following:

White and light blue only have a color contrast ratio of 1.64, well below the recommended 4.5.

So there is some room for improvement here. But just because a color needs to be changed, that doesn’t mean that the whole color scheme of the site needs to be thrown out. There are tools for selecting a related darker (or lighter) shade from a given color, including The W3Schools HTML Color Picker.

Entering the light blue shade in the W3Schools Color Picker gives an array of related shades to choose from.

Here is the color contrast ratio for a darker version of the same hue:

Using a darker blue for the text gives a color contrast of 4.89, which passes.

And here’s how it looks:

A darker shade of blue stands out against the background, and is easier to read.

In the end, I convinced my friend to choose a darker color. Her site still looked great, but her content could be read more easily by a greater number of people. (Even me, after a long day.)

Originally published at http://www.jessicadavey.com on August 2, 2020.