Branding, accessibility, aesthetics, programming — color touches so many aspects of design that we often take its power for granted. It's said that not all colors are created equal — actually some are equal in a surprising way. Colors with different hues can have the same value, and that's bad news for design.

Ostensibly different colors with different hues are different colors. But when leading visitors around a page, contrast is king. This is especially true for people with color blindness.

Here's how to test your design not just for accessibility, but also for sighted users.

1. Define the problem

A frequent design goal is to lead visitors from a visual entry point to an action — specifically, a call to action such as a contact form, a "next" button, or other interactive element.

Contrast is the first tool to leading visitors around a page. Value is more important to contrast than hue. Take, for example, this gaudy example:

 

1. Yeah, yeah, it's an eye-tearing color palette. But these diverse colors illustrate the point. At a glance, can you spot the hero element and call to action? Not likely. Convert it to grayscale (bottom #1 example) to see just how bad the problem is.

2. Instead of hues, the second example — same layout, same content — uses different values. These shades are an immediate improvement, as its grayscale counterpart shows.

3. This technique can work with different hues, as long as we remember to check their values. The third example brings compliment shades of cyan with spots of orange. But its values could be better.

4. This example turns up certain elements' values and reduces their saturation. This helps the header, footer and sidebar blend into each other and the white background. See the hero and call to action now? So will visitors.

2. Open your design in Photoshop

If you're currently working in Photoshop, then just open that file. If you want to check a live website, just open a screenshot in PS. Then — and here's the kicker — create a Hue/Saturation adjustment layer at the top of your layers palette.

Photoshop's adjustment layers are non-destructive. That is, you can turn them on and off without permanently changing your project.

 

Actually, Photoshop has several viable adjustment layers: Hue & Saturation, and Black & White, to name a few. We use Hue & Saturation because it generates the most telling results. The Black & White layer automatically adjusts brightness to compensate for changes in saturation. That is, it compensates for the very problem we're trying to solve. Hue & Saturation, FTW.

3. Test periodically

Turn the layer on and off as you work to see how well your design's values and contrast look. It's so simple that, once you get into the habit of checking, you'll find contrast a powerful tool in guiding people around your design.

 

If Photoshop's available right now, you can even try it with this email. Go ahead, take a screenshot and pop that pic into Photoshop. It'll just take a minute. Download this set of Photoshop actions with keyboard shortcuts to test even faster.

This grayscale technique is quick. It's effective. It will help you make more effective and more accessible products for everyone.

---