How to use grayscale: a quick way to check accessibility and visual design

Using grayscale is a way to keep both accessibility and visual design in mind

Photo by João Cabral: https://www.pexels.com/photo/person-walking-on-street-3325720/

“Why can’t we just use the same symbol, but red?” I heard from a stakeholder, and only then did I realize we had an accessibility issue.

The suggestion was well-meaning. In our field, the standard was to use green for devices that were up and red for devices that were down.

However, red-green color blindness, which affects 8% of men and 0.5% of women, didn’t immediately come to his mind. It might not have come to mind for you or me, either.

As designers nowadays, we sometimes forget about accessibility when juggling several tasks. That’s often how bad accessibility decisions happen: it’s not a conscious effort to exclude people; we just forget in the moment.

That’s one of the many reasons I’m a big fan of designing in grayscale. Small actions often can help create better designs, and using grayscale isn’t just a way to check accessibility.

Using it can make for better designs overall.

Grayscale and data visualization: the power of emphasis

Data Visualization taught me the importance of using grayscale through the power of bad Visualization.

One of the quickest ways to improve your Data Visualization skills is to review bad Visualizations, identify their flaws, and re-make them. Once you look at 2 to 3 bad Visualizations, you quickly realize that color is where most people make mistakes.

After all, it may seem incredibly easy to select some data in Excel and click “Generate Chart.” However, this lazy approach often generates poorly colored Data Visualizations.

From a computer’s perspective, generating a chart with 15 different colors might be perfectly fine since it matches the 15 categories in your data.

A chart like this can often be worse than useless

However, that sort of chart isn’t easily readable (or understandable) by humans. The…