Lesson 1: Text Color Contrast

Quick note: In many lessons, we'll be using a tool from WebAIM called WAVE. I personally prefer using the browser extension. You can also go to the WAVE home page and enter your web page address there to run the same tool (unless the webpage you provide blocks automated scripts from running on the website).

Background

Today we're starting with text color contrast. If this isn't your first day learning about web accessibility, you might be wondering, "Why are we starting with something so basic?" And that's a great question!

This is our first topic because it's the most common automatically detected WCAG error according to The 2024 WebAIM Million report. It's been the most common since the project's first report in 2019.

This year, it's reported that 81% of home pages had low contrast text below the WCAG 2 Level AA thresholds. While it can be disappointing to see so many issues under a basic accessibility topic, it also means that fixing text color contrast issues has the potential for enormous impact on web accessibility.

And if the site you're looking to improve with this course isn't in the top 1,000,000 sites tested for this report? Well, you've just found an easy way to stand out from 810,000 of them!

5-minute action steps

To find text contrast errors for a page:

1. Go to the webpage you want to test
2. Activate the WAVE extension
3. Click the "Details" tab or the "View details" button
4. Uncheck all of the top-level checkboxes except for "Contrast Errors"
5. Open the "Contrast" tab

For each text contrast error identified:

1. Click its icon at the bottom of the "Contrast" tab so the webpage will scroll to the associated element
2. Make note of where the element is in the page (e.g. top right, bottom left, halfway down)
3. Make note of details shown for it in the "Contrast" tab (color codes, contrast ratio, text size, etc.)

Analyzing the results

If the Foreground and Background colors shown in the "Contrast" tab don't match an element's actual colors on the webpage:

• It's possible the WAVE extension is detecting a background image and applying a fallback background color.
• You can manually set the Foreground and Background colors in the "Contrast" tab if you know the color codes.
• You can also click the colored rectangles under Foreground Color and Background Color to manually pick colors from the page using eye droppers.

Share your results

The end goal of this exercise is to resolve the issues you've found. Tracking them in your project management system is a huge step toward that goal. Sometimes we can't fix accessibility issues immediately, but we can always chip away at them over time.

Share the results you've noted today with the person or team responsible for fixing these kinds of issues. You might start the conversation with, "I'm learning to test text color contrast with WebAIM's WAVE tool, and these are some of my results."