Test for Insufficient Color Contrast Accessibility Issues
Just about every tool in our accessibility auditing toolkit can help us identify any issues with sufficient color contrast ratio on a web page. The react-axe library and axe browser extension both report findings on all elements with insufficient contrast ratios. The tota11y browser extension will annotate any elements with their contrast ratios and color those that are insufficient in red.
Additionally, we need to use our experience tools to see what some of our users out there may we seeing. We need to test with high contrast browser extensions as well as the display settings in Windows and Mac. If our users with visual impairments are using these tools we need to see what our application looks like using them because we may find that under a certain mode some things may suddenly be harder to read or virtually invisible.
Resources
- https://www.scottohara.me/blog/2019/02/12/high-contrast-aria-and-images.html
Instructor: [00:00] Here is a web application that has a number of color contrast issues in it. I'm running React Apps, and we can see we have this finding -- elements must have sufficient color contrast.
[00:12] If I expand that, it lists out each element that does not have a sufficient color contrast ratio. If I use the Apps browser extension, I've got the same finding, and I can highlight each element. If we use Totally, we can annotate the contrast ratios, and all of these in red show an insufficient contrast ratio.
[00:41] Another cool feature about Totally is that it lists the hex values of the foreground and background colors for each element that has an insufficient ratio. It provides a suggestion of the foreground and background color that would create a sufficient ratio. You can actually preview it by checking this box.
[01:08] In addition to using these various auditing tools, it's also really important to use the various experience tools, the tools that our users are using in order to facilitate their accessibility. A lot of users with visual impairments may be using high contrast tools.
[01:24] Here we have a high contrast browser extension installed. I'm going to enable that and check my web page with each of the modes to see how it displays. On this mode, for instance, this button becomes virtually invisible. Here, it's slightly more visible, but almost impossible to read. The same with this one.
[01:53] If we look at another page in our web application, we find here that text becomes almost impossible to read. If I go to the accessibility display preferences here on my Mac, and modify each of these, I can also see how my pages display. This one absolutely makes this button invisible.
[02:51] If we look at this on an IBM running Windows, in Windows high contrast mode, everything looks pretty decent on this page. However, we can see that it is not clear which of these tabs is selected. It's pretty much invisible.
[03:16] By testing with each of these different high contrast tools, we get a full picture of all of the different modes and operating system settings that our users might possibly be using out there. While one might look OK, another one might make something completely hard or impossible to see.