KB002 Testing Color Contrast with Microsoft Edge and Google Chrome

Introduction

Out-of-the-box, many browsers let you easily test for text color contrast. This is useful when testing content on other users’ computers.

Like Google Chrome, Microsoft Edge is available on multiple platforms. Microsoft also did a great job making the experience seamless across different operating systems, which means that the same steps can be used on MacOS and Windows. In this Knowledgebase article, we’re using MacOS, but it may as well be on Windows.

In the screenshot below, you can see a portion of a web page that we were evaluating today.

Screenshot including dark brown heading text on a black background
The dark brown text for the word “proofreading” barely stands out against the black background. But does this violate 1.4.3 Contrast (Minimum)? If you’re using Microsoft Edge, here’s an easy way to quickly see if this text meets WCAG.

How to Test Contrast

First, open the Developer Tools (Tools | Developer | Developer Tools).

Screenshot of Developer Tools at "Tools | Developer | Developer Tools"
Alternatively, on MacOS, you can also just highlight the text and hit “option-command-I”. Either way you choose, this will pull up the MS Edge Developer Tools panel with the item you highlighted on the page highlighted in the code panel. Don’t worry if you’re allergic to code– we won’t need to get into any of that!Instead, look at the top-left of the developer panel for the square with the arrow in it. This is shown below and is called the “selector”

Image of the MS Edge developer panel and arrow pointed to the selector.
Now, go move your pointing device over the text that you were concerned about and a window pops up when you hover your mouse over the item. The “accessibility” section reveals some important information, including the color contrast.

Accessibility panel for items with mouse hover-- see accompanying text for explanation.
In this case, the text BARELY passes with a contrast ratio of 4.53:1 (WCAG 1.4.3 requires at least 4.5:1).Note: this technique works with text but not images of text.
Click to access the login or register cheese