Clarissa Peterson: One issue that sometimes causes difficulty for website users is a lack of contrast between colors. In this tutorial, you’ll learn why contrast between foreground and background colors is important and how to make sure you have enough contrast on a web page.

(Big Idea) For people who have low vision, such as difficulty focusing or vision impairments from aging, not having enough contrast may make it impossible to read text on a page. As we get older, changes to our pupils mean that we require more ambient light to be able to read clearly. For example, this light gray text on a white background may be easily read by most people in their 20s but very difficult to read for people in their 60s or other people with low vision.

But luckily, this has a easy solution. Just increase the contrast between colors on your site. You don’t even need to guess at how much contrast you need between your foreground and background colors because this has been studied extensively. And there’s a standard for the level of contrast that is needed for text on a website.

There are a ton of contrast checkers on the web like this one from WebAIM. And you can just enter the hex value of your text and background colors to see if there’s enough contrast between them. If you prefer using RGB values, there are some other tools in the Resources section that will let you do it that way instead. I’ll show you how this tool works in just a moment. But first, I’ll explain the standards.

If you’re using WCAG level AA as your standard, you need a contrast ratio of 4.5 to 1 for normal text. That means that one color needs to be 4.5 times as dark as the other color. For large text, which is anything over 18 points in size, the ratio only needs to be 3 to 1. (Big Idea) Large text doesn’t need as much contrast because it’s easier to see those larger characters.

If you’re using WCAG level AAA, which is a higher standard, you need a contrast ratio of 7 to 1 for normal text and 4.5 to 1 for large text. (Best Practice) Keep in mind that this is only a minimum. More contrast is always better.

So going back to this tool, here we have a blue foreground color, the color of the text, and a white background. You can see the actual colors being used on the screen. The contrast ratio between these colors is 8.59 to 1, which is great. And then looking down below that, you can see it meets both WCAG levels for any size text.

If I use the slider to make the text a little bit lighter, you can see now that the ratio is only 5.81 to 1. And normal-sized text won’t pass if you’re using the AAA standard. A bit lighter and now it fails for both normal text at both levels and for large text at the AAA level. If we keep going, eventually nobody can see it. You also will have problems not just with light text on a light background, but also dark text on a dark background.

(Big Idea) Having adequate contrast doesn’t only help people with vision difficulties. I’ve certainly seen websites with text contrasts so bad that everybody would have trouble reading it. And have you ever tried looking at your phone outside in bright sunlight? The light washes everything out and makes it difficult to see the screen. More contrast would help in this scenario too.

For more tips, check out our Resources section for links to articles and other tutorials that can help you expand on the concepts we’ve covered here. Thanks so much for watching. Don’t forget to check out the other Take 5 videos, as well as the entire course catalog here at Gymnasium.