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.

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’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.