How to Use the Contrast Checker in Chrome DevTools

One of the most important aspects of creating accessible websites is ensuring you have readable text. And in turn, creating readable text means ensuring you have adequate color contrast between your text colors and your background colors.

For example, take a look at the purple text on white background from the homepage of Tuts+. This contrast level is all good:

But if we make the text lighter, we can quickly reach a point where the contrast is too low and it becomes too difficult to read:

The same text adjusted now has a bad contrast ratio

This might be a relatively straight forward concept, but ensuring sufficient contrast in practice can actually be a little tricky. Sometimes color contrast might look fine to the eye, but in reality may not be up to par. So how can we be certain our color contrast levels are accessibility friendly? That’s where Chrome Dev Tools can help out.

How Chrome Dev Tools Can Help

You’ll notice in the above screenshots we see the Chrome Dev Tools color picker. If you look closely you can also see there is some additional information in that color picker, such as the display of a contrast ratio score, that helps give feedback on color choices. This is part of the recently added accessibility tools in Chrome–let’s take a look and see how it all works.

Note: You might see some instructions around the web saying you need to enable “Developer Experiments” to use these color contrast checking features but this is no longer the case. The functionality is now built right into both Chrome and Chromium.

Access the Contrast Checker Tools

Begin by opening Chrome/Chromium Dev tools and selecting any text element in your HTML. Then, in the Styles tab, locate the color property, and to the right of it it click the small color swatch in order to open up the picker tool.

Select a text element and click the colored square to start

In the area I’ve highlighted with a red square below you’ll see the contrast ratio score of 5.00 this text element has been given. This score comes by detecting the color of the background element and comparing it with the color of the text.

You’ll also notice there are two green ticks next to the score, signifying this contrast ratio is within the accepted parameters for accessibility.

Getting the tick of approval on contrast ratio

This basic ratio score is helpful, but to get access to all the color contrast tools click the downwards pointing arrow to the right of the contrast score. It will display a tooltip labeled Show more when you hover over it.

Expanding the tools to get more information on color contrast

With this section expanded we get some additional information. Here you’ll see the ideal contrast scores you should try to achieve, with higher numbers representing stronger contrast. A score of between 3.0 and 4.5 is represented as “AA” and is considered the minimum, while 4.5 or higher is represented as “AAA” and is ideal.

Now we see the contrast scores to aim for, and a “safe” line on the color picker

Don’t Cross the Line

You’ll also notice that once the full color contrast tools are expanded a line appears along the top of the color picker. This is the dividing line between text colors that are at least “AA” rated, and those that don’t meet standards.

Note: you can get quite close to the line and shift from a “AAA” rating to “AA”, staying above a score of 3.0 but going below 4.5:

Getting close to the line is still okay though not ideal — Getting close to the line is still okay, though not ideal

Anything above the line, however, will get flagged with red warning symbols to tell you the color combination poses a problem for accessibility:

Cross the line and lose your AA AAA contrast rating — Cross the line and lose your AA / AAA contrast rating

Alpha Shifting

You can also shift the alpha slider, located below the hue slider, and the “safe” line will shift to account for the increased transparency:

Moving the alpha slider also moves the safe line — Moving the alpha slider also moves the “safe” line

Which Side of the Line?

Another thing to be aware of is that the side of the line you want your text color to fall on can invert depending on the color of your background. If your text is on a dark background you’ll want the color of your text to appear above the line. If your text is on a light background its color should fall below the line.

Below we see an example of this inversion, with a dark background in the left image and a light background in the right image. Notice there is also a preview of the text and background colors together–look for the Aa inside a circle, below the Show more switch:

On the left light colored text on a dark background should have its color above the line On the right dark colored text on a light background should have its color below the line — On the left, light colored text on a dark background should have its color above the line. On the right, dark colored text on a light background should have its color below the line.

Wrapping Up

These color contrast checking tools in Chrome and Chromium will make it significantly easier to ensure readability during the design process. All we need to do is a quick check on each of our text colors, use the color picker to tweak where necessary, then integrate the new colors back into our code.

That’s one step closer to making the web a great place for everybody!

How to Use the Contrast Checker in Chrome DevTools