Automated tools like Axe can catch about 83% of text color contrast issues, and with color contrast making up roughly 30% of total errors, it’s a major factor to get right. Using Chrome’s inspector (Command + Shift + C) lets you hover over elements and view contrast info, but success depends on how the site is coded. Some areas show the necessary details – others don’t.
While Axe is generally reliable, WAVE can generate false positives, flagging things like white text on a blue button as a contrast error due to misinterpreting the background color. Because of this, WAVE is best used with caution, especially for client-facing reviews.
Manual testing is still essential. Automated tools often miss issues in specific areas:
- Placeholder text in input fields, which can be hard to detect and usually fails contrast.
- Text over image backgrounds.
- Hover and focus states on buttons or links, especially when styling changes on interaction.
- Text embedded in images, which must be checked visually since automated tools can’t assess image contrast.
For accurate results, supplement automated scans with manual spot-checking and a color picker tool to verify interactive and styled content.
Transcript
How do you test for color contrast for text? In this video, we’re going to cover how much the automated testing tools can do and where they tend to miss things.
In a study by DQ, their product, Ax, was able to catch roughly 83% of errors using automated testing. They also found that color contrast for text accounted for about 30% of total errors on a website, which means this is really important to get right.
Here we’re going to take a look at a couple of different pages and how we’re going to test for color contrast. We’re going to start on IBM’s website.
IBM Example
Here we are going to hit Command, Shift, C on a Chrome-based browser. This is going to bring up the Inspector window, and it’s going to allow me to just hover with my mouse and see what the contrast has. You’ll see there’s this accessibility popup window, and it shows me the color contrast, and you’ll see a green checkmark and the value 5 0. 02.
On some parts of the page, it’s going to be able to accurately get this information. On other parts of the page, I’ll see Accessibility, and there’s no information about color contrast.
That means that different parts of the page are coded differently. Some of the ways to code sections means that the automated tool can catch the color contrast. Other ways of coding mean that the automated tool cannot.
There are even some ways to trick the automated tool, such as using a color background and then putting an image background on top of it. The image may fail contrast, but the color coded in there would pass automated tests. Here I’m going to trigger the ax tool on a full page scan.
The results from the AX tool do not have any issues with regard to color contrast. We would take this to mean that about 83% of this page is probably fine. Next, I’m going to show the Wave tool. I normally do not use the Wave tool because it is very complicated Complicated and noisy for clients, whereas the AX tool is much simpler.
Here are the results from the Wave tool. It shows that we have two contrast errors, and we can see those in the detail section. I pulled up one of the contrast errors. Here it has Save Big on our latest special offers. You’ll notice that it has white text on this light gray background.
Here is how that button actually looks on the website. It’s a blue button with white text. It passes the contrast. That’s another reason why I don’t generally use Wave with any clients is because Wave has been known to have far more false positives than acts.
Maryland Tax Connect Example
Now we’re going to pop over to another website. This is the Maryland Tax Connect. Here we are going to be on another website. This is the Maryland Tax Connect website, and it shows no color contrast errors. Now we’re going to take a look at Wave. Wave also shows no color contrast errors.
What we’re going to take this to mean is that most of this page is probably fine on color contrast, but we do need to do manual checking. Some of the places that automated testing misses are areas like input fields and interactive elements, including different states on links and buttons.
Here we have the user ID and password fields, and both of these are going to fail color contrast. When you’re checking these fields, you’re going to have to use a visible color picker as it’s very It’s difficult to get the actual coded values for placeholder text.
One of the reasons why we don’t recommend using placeholder text. Another thing that’s going to fail is the hover state on this login button. When I hover over it, we have white text on a light blue background. These are all images.
These individuals, additional information, all these headings are actually images, which means that those would have to be manually checked for color contrast. When you are doing your quick audit and testing for the color contrast for text, make sure to use automated scanners to get a quick answer on did they do decently well or not?
Conclusion
If you’re using the AX checker, you rarely have to worry about any false positives. If you are using the wave checker, you need to always check for false positives.
You also need to remember that these automated checkers are particularly bad at different states of interactive elements, any content that appears due to interaction, and of course, on placeholder text.
So always make sure to manually check those and manually spot check the website in general, as many different sections can report one thing on automated tests and another thing when you actually manually check them.
Thanks so much for watching and make sure to check out the full quick audit playlist for how to do other steps in the quick audit process.