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:
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 DevTools can help out.
A11y From the Beginning
This tutorial is part of Web Accessibility: the Complete Learning Guide, where we’ve collected a range of tutorials, articles, courses, and ebooks, to help you understand web accessibility from the beginning.
How Chrome DevTools Can Help
You’ll notice in the above screenshots we see the Chrome DevTools 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 DevTools 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.
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.
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.
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.
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:
Anything above the line, however, will get flagged with red warning symbols to tell you the color combination poses a problem for accessibility:
You can also shift the alpha slider, located below the hue slider, and the “safe” line will shift to account for the increased transparency:
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:
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!