Easy Color Contrast Testing

by Jenn Lukas

6 Reader Comments

Back to the Post
  1. 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.

    Copy & paste the code below to embed this comment.
  2. 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!

    Copy & paste the code below to embed this comment.
  3. 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.

    Copy & paste the code below to embed this comment.
  4. Vision Australia has an excellent colour contrast analyser for Windows at http://www.visionaustralia.org/digital-access-cca

    Copy & paste the code below to embed this comment.
  5. 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/

    Copy & paste the code below to embed this comment.
  6. I have also install Accessibility Developer Tools its amazing Jenn Lukas your article “Easy Color Contrast Testing” is really informative for the designers.

    Copy & paste the code below to embed this comment.