1. 5
    Use a High Contrast Browser Extension to Find Color Contrast Accessibility Issues
    1m 24s

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

Erin Doyle
InstructorErin Doyle
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

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.


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.

~ 3 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today