Use a High Contrast Browser Extension to Find Color Contrast Accessibility Issues

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.