Easy Guide to Accessible Colors

When you use sufficiently-contrasting colors, content's visibility is stark enough to distinguish by most people.

Meeting the minimum contrast ratios defined in the Web Content Accessibility Guidelines (WCAG) is therefore critically important. While most users appreciate text that they don't have to strain to read, for many viewers with low vision, low contrast vision, or color vision deficiency, the colors you choose can be the difference between legible and inaccessible material.

Digital colors are usually created and updated using unique color codes.

From a technical perspective, updating colors to meet minimum contrast ratios is usually as easy as changing the codes generating the colors. This makes color updates relatively quick and easy to fix with a big impact on users.

This one-page guide will help you easily understand the rules around accessible color usage, getting you one step closer to improving this important aspect of accessibility.

Some colors have broadly-understood meaning, such as red indicating an error. Sometimes, we attach meaning to colors, like when we create a legend assigning colors to different elements in a chart of graph.

Using color, therefore, can be an important part of conveying information quickly — an important part of the story. But it can’t be used to tell the whole story.

Why? Not everyone detects color or perceives it in the same way. While there is nothing wrong with using color, an important design element, it cannot be the only visual cue used to convey meaning.