Accessibility Explained: Color Contrast

I’ve written about color contrast before, but didn’t go into detail about what it actually is. Color contrast, by its dictionary definition, is “the change in the appearance of a color surrounded by another color”. In short, the difference between two colors. What does that have to do with web accessibility? Everything.

Like a book

When you’re reading a page in a book, does it hurt your eyes? Not likely, because for a long time books have been designed to be easy to read. Your brain can process the difference between words on the page and the page itself without much effort. The page you are reading right now was designed with the same thing in mind. This is because of color contrast.

You don’t get much more clear than black text on a white page. In fact, pure black on pure white (or vice-versa) have the highest possible contrast score. But not everything is black and white. That’s again why color contrast matters. You want to get as close to that score as possible with your color selection.

Determining color contrast

Since this isn’t a post on math, we’ll keep things simple. To calculate the contrast ratio between two colors, you should use one of several online tools available. One such tool is WebAIM’s Color Contrast Checker. All you need is the hex code values of both colors. Enter them into the tool, and it provides a ratio for you.

If that ratio is less than 4.5, you’ve got a problem. The Web Content Accessibility Group’s 2.0 standards require “the visual presentation of text and images of text has a contrast ratio of at least 4.5:1”. For font sizes larger than 18pt (24px), that ratio requirement drops to 3.0. For bold text like headings, the size is 14pt (18px).

There’s no simpler way to put it. If you fall below that ratio score, your colors need to change. The color contrast standard is a A-level standard. This means it is required by Section 508, the law that governs accessibility. You must change your colors.

Irlen Syndrome

There is one final aspect of color contrast that bears mentioning. Irlen Syndrome, also known as scotopic sensitivity syndrome, is a brain disorder that affects how the brain processes visual information. In short, people with Irlen Syndrome are incredibly sensitive to light and glare. If color contrast ratios are too high, it can trigger the symptoms of the syndrome, and cause anything from eye strain to headaches to nausea. In his book, Inclusive Design Patterns, Smashing Magazine writer Heydon Pickering recommends using a very light grey (#EEE) instead of pure white (#FFF) with a very dark grey (#222) instead of pure black (#000) for blocks of text. This will reduce the likelihood of triggering Irlen Syndrome in your readers.

Simple, but important

Color contrast is a simple concept, and easy to fix. That doesn’t mean it isn’t also an important concept. Your user’s ability to read your content is essential to their experience with your website. If they can’t read your content, or reading their content is literally painful, they’ll go somewhere else. That’s how you lose potential customers and clients.

For more on color contrast, check out a real life example of how color contrast negatively affected a recent shopping experience.