Communicating Information without Color

Those of us who have always been able to distinguish the full spectrum of colors might not realize just how often color is used as the sole method for conveying information. Take a moment and consider it now. How common are UI elements like switches that use color to communicate their state, form input boxes that use a colored outline as validation feedback, or charts with color-only keys? Unfortunately, these inaccessible patterns are all too common.

Changing the color mode of a design to greyscale can do more than just highlight contrast and readability issues. It’ll also show which content relies exclusively on color to convey information. This is an incredibly easy way to review your websites and applications for color-based accessibility issues. If you can’t make sense of a design when it’s in black-and-white, that’s a red flag. Designs should never be entirely reliant on color to be functional.

For our visually impaired users, reliance on color to communicate information makes navigating our websites and applications difficult or even impossible. Thankfully, WCAG criterion 1.4.1 offers guidelines around how we can best use color in a way that will add to our designs without excluding these users.

Add, don’t subtract

Dealing with color and accessibility can be challenging because colors are a kind of language. The colors that we choose can add a significant amount of depth and meaning to our designs by evoking emotions, phrases, or cultural associations. Colors are an incredibly powerful tool in a designer’s toolbox, so we don’t want to abandon them entirely. Unfortunately, this is a common trap that designers fall into. They aren’t sure how to use ...