Once you see it, you can’t unsee it

Look at the image above.

The left side is difficult, maybe even impossible to read. Why? In each box, the color of the text doesn’t stand out enough from the color of its background. Content like this can prevent users with low vision and color-blindness from accessing the content you create. 

Now look at the right side of the image: this text stands out from the background colors enough to make it fairly easy to read.

Once you start looking for color contrast fails, you’ll see them everywhere—just scroll through Instagram or look at the dates on all my posts (I promise one day I will figure out how to fix that because it bothers the heck out of me, but WordPress has defeated me so far).

Here’s my BLUF (bottom line up front):

• The color of text in content you create should stand out enough (contrast) from its background color so that it’s readable (accessible) by everyone. (This applies to both digital and printed content: social media posts, eBook covers, promotional items like bookmarks, printed books, etc.)
• Use a color contrast checker to ensure your content meets the standard for color contrast.
  • There are standards associated with making content accessible. If you want to take a deeper dive, click here for a direct link to the WCAG standards for color contrast. WCAG (Web Content Accessibility Guidelines) is the standard for web accessibility, and as I understand it, since there isn’t a standard for printed materials, most people apply WCAG to print too.

Color Contrast Analyzer (Windows and Mac)

The Color Contract Analyzer (CCA) from TPGi is the best color contrast checker I’ve come across. It’s free to download for both Windows and Mac, and it’s pretty easy to use. Once you download and open it, you use eyedroppers to grab both the text color and the background color. If your contrast meets AA standards (there’s a place that shows you this on the CCA window), that’s considered typically accessible. (AAA standard is for optimal accessibility.)

Web-Based Contrast Checker

The best option I can find for Chromebook and creator tools like Canva is to use WebAIM’s Contrast Checker, into which you can enter the hex color codes of your text and your background. (If your colors are in RBG, try an RBG to Hex converter like Google’s Color Picker.) I’ll update this post if I find any more!

Happy writing, and happy color contrast checking!