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 reason for this is simple: color emphasizes specific data, and too much color highlights too many things.

In many regards, a data visualization like that isn’t much different from a bad website that emphasizes too many things on a page.

Where are you supposed to focus on a page like this?

Thinking in grayscale helps users focus on what’s important. If color is a way of showing emphasis to your audience, checking it in grayscale and seeing if you can still see emphasis helps you understand what is being shown.

In grayscale, I can tell that the black region seems to be most emphasized

Working with grayscale is slightly different in data visualization than in design (you de-emphasize everything, then start adding colors), but using it can be a quick way of checking contrast, emphasis, and focus within your design.

Here’s how to use it with your Designs.

Use grayscale to showcase a work-in-progress

One problem nowadays is that it’s hard to show that work is in progress. As we’ve moved towards using design tools like Figma and design systems, the “low-fidelity”/work-in-progress stage has disappeared.

After all, it can be tricky to tell at a glance if a prototype is almost finished or still needs work when everything looks polished.

One of the most effective ways to address this is to set everything in grayscale. Using a Figma plugin like this to convert your designs to grayscale, while working on your Design, can immediately show audiences that it’s not finished yet.

However, that’s not the only benefit of grayscale.

Grayscale helps you quickly estimate contrast values

Imagine that your organization wants primary buttons to be in your brand colors. Your company’s logo is a red-orange gradient, so they want some shade of red-orange buttons for Logging in, Scheduling a demo, Buying a product, and more.

Off the top of your head, does your mind immediately jump to black or white text on a red-orange button? What color values are you using, and what provides enough contrast?

Interesting read on WCAG color contrast

In my early Design years, this was a tedious process: I’d go to the WCAG testing sites, set the background to a specific color that matches our brand, and test various text colors to see if it passed various accessibility tests.

However, working in grayscale offers a lot of help in tackling this. While I wouldn’t be able to calculate the exact color values, being able to eyeball color contrast more easily helped me find appropriate color values more easily.

Grayscale can quickly help check several different factors in your Design:

• Contrast (especially WCAG and accessibility stuff)

• Readability (If you ask readers to read a fair amount of text, do gradients/backgrounds/etc. mess things up?)

• Visual indicators (Using color in components like badges, snackbars, and banners for differentiation)

• Emphasis (Where is your user’s attention drawn to on a page?)

• etc.

Lastly, grayscale offers another essential thing: a way to think about visual emphasis.

Use grayscale to check on visual emphasis

Grayscale is one of those small visual tips that has influenced many fields, from game design and art to data visualization.

You can check contrast and visual emphasis by removing other aspects, like hue and saturation. Even large companies like Twitter (pre-Musk) can often struggle with this.

Grayscale often showcases emphasis errors

Working in grayscale from the start (or at least checking things in grayscale) can be incredibly helpful. In Twitter’s case, for example, they might have needed to use more color contrast or other visual cues (like a circle instead of the asterisk-like shape) to showcase the difference.

While it’s not a universal solution to all your issues, it can help keep accessibility and visual contrast/emphasis at the forefront of your Design.

Grayscale is a small-scale effort that can have a large-scale impact

I love finding design tricks that adhere to the Pareto principle: small efforts that can get you 80% of the way there.

Designing in grayscale is one of those tricks. Nowadays, designers have a lot on their plates: between managing stakeholders, creating designs, getting user feedback, and more, accessibility may not jump to your priorities.

However, a quick grayscale check can help you ensure that your designs adhere to accessibility principles. It’s also a way to check color contrast, emphasis, and more with the flick of a button.

So, next time, before you send a design to your stakeholders, check it in grayscale for issues. That simple act may improve accessibility and help create a better design.

The second cohort of my Data-Informed Design course is starting soon! If you want to learn this valuable skill, consider joining the waitlist.

Kai Wong is a Senior Product Designer and Creator of the Data and Design newsletter. His book, Data-Informed UX Design, provides 21 small changes you can make to your design process to leverage the power of data and design.