Use a High Contrast Browser Extension to Find Color Contrast Accessibility Issues
It's very important to experience our web applications using the tools and techniques that our users are using. Many of our users out there may have vision impairments and may use tools to help them see better. Learn how to use a High Contrast browser extension to see your web application the way many of your users may be seeing it. You may discover that a lack of contrast between foreground and background colors will cause things to be hard to see or even invisible in certain High Contrast tool settings.
Resources
Instructor: [00:00] To begin, you'll need to find the high-contrast extension in the Chrome Web Store and add it to Chrome. Now that that's installed, let's use it. Here's a sample web application that has some purposeful color contrast issues. We can now see my extension over here in the browser. Clicking on that, we can then click enable.
[00:31] There are a number of different modes we can choose from. Normal is, of course, normal. No special high-contrast mode settings are turned on. We've got increase contrast, grayscale, inverted color, inverted grayscale, and yellow on black. You can go ahead and set a default or, clearly, forget set customizations. We've even got some keyboard shortcuts.
[01:04] It's really helpful to make sure you go through each of these modes for each page of your web application to just ensure that everything is displayed clearly, regardless of the selected mode. Make sure nothing suddenly disappears or becomes difficult to read or see, because any of these modes might be in use by our users.