Instructor: 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.
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.
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.
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.
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.
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.
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.
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.