We have plenty of considerations to design for when crafting websites. Web accessibility is not a new design consideration, but is still very important, no matter the size or speed of device we’re testing on. The Web Content Accessibility Guidelines (WCAG) tells us our content should be distinguishable and requires we “[m]ake it easier for users to see and hear content including separating foreground from background.”
We know that our color contrast ratio should be 3:1 for non-decorative text, sized larger than 18 point or larger than 14 point if bold. Text smaller than that should meet a contrast ratio of at least 4.5:1.
Maybe you have amazing eyeballs that can help you recognize contrast levels. If, like me, you do not have magical corneal calculators, then you probably have utilized one of the tools out there to check contrast, such as: WebAIM’s color contrast checker, Snook’s contrast slider, Check my colors URL input check, or a WCAG checker add-on for Firefox.
I recently switched to using Chrome’s Accessibility Developer Tools built in contrast checker and I love it. Take a look at the audits being run by the tools and let’s look at how to begin using it once installed.
Load up the website you’d like to check and bring up the Developer Tools. I’ll pick on myself and use my own site for this example. Once open, click over to the “Audits” tab and make sure “Accessibility” is checked. Click “Run.”
Expand the “Text elements should have a reasonable contrast ratio” section. This will show you the HTML of the elements that don’t have sufficient contrast. Identify one to examine further.
Select the chosen offender in the browser and inspect it. If you can’t see the contrast values, use the menu to pull up the “Accessibility Properties.” You’ll see the current contrast ratio of your element. You’ll also see a suggested color value pair to match the WCAG AA or AAA recommendation. Select the swatch to the right of those values to see the preview of that change. In this case, we’ll see what grey we’d have to adjust our background to in order to keep the white text.
As you can see in this second example, I could make the date text darker to meet the guidelines, which is very helpful in making a fast change.
When it’s this quick and simple to check contrast, there’s no reason not to add this accessibility test into our workflow.
One small caveat: this only looks at CSS colors. If you have text over an actual image, you’ll need a further tool to analyze the contrast of text against image.
Good article, unfortunately it is only applicable once we have built our page. Design decisions like this need to be made before the page is built. It’s a nice way to produce a consolidated report though!
Another caveat would be working with responsive design changes. For example on my site, the “Hi” appears on different background colors, depending on the size of the screen. Still, a pretty cool and easy tool to use.
@Jeffrey, that is true! But in this world where more people are moving toward designing/tweaking/iterating in the browser, it can be a really helpful too for those going that route. Plus I like that they provide suggestions to match the criteria, so you can always go back and update your code and QA to see if it meets design qualifications if you missed one or two before the page was built.
Vision Australia has an excellent colour contrast analyser for Windows at http://www.visionaustralia.org/digital-access-cca
Using the Webaim colour checker I get a fail on #2e8aca against a white background for normal size text. However if I use that colour on :visited link text, the Chrome Developer Tool passes it. Am I right in thinking this is a minor bug on the dev tool. I couldn’t see any exclusion for link states.
This article gives a good overview on how tricky it is to get the colours right for links.
http://webaim.org/blog/wcag-2-0-and-link-colors/
I have also install Accessibility Developer Tools its amazing Jenn Lukas your article “Easy Color Contrast Testing” is really informative for the designers.
I’m was in the same boat. Using multiple sites and plugins in FireFox. Great article, now I can quickly check colors (and other accessibility hints/errors) all within Chrome. Thanks for the great article Jenn
This is actually incredibly useful. I submit that user experience is the most important element to any website, and that includes color and design. I didn’t know developer tools could help with this. Very nice article.