Why all designers need to understand color blindness

facebooktwittergoogle_plusredditpinterestlinkedinmail

Given the question of how to deal with color blindness in graphic design, many people would be tempted to give a brusque answer: “Choose a different profession.”

As any professional designer should understand, it’s not that simple. Even if you (a designer) are not color blind, over 8% of your male clients are likely to be, as are 8% of their male target markets (color blindness is rarer in females — more like 0.5%). If your design work is unsightly or hard to read for this substantial group, you’ve made a pretty huge mistake.

And say you want to design but do happen to be color blind? Not a big deal. Learn a few tricks and you’ll be fine.

In this post, we’ll give pointers for non-color blind designers on how to consider a color blind audience, and tips for color blind designers on how to keep your colors straight. But first, a little background… and a test.

Are you color blind?

colortest

If you see the number 74 in the image above, you’re in the clear. If, like me, you see a 21 (or nothing), then we’ve got some bad news for you: you are red-green color blind. If you’re not convinced, you can take a full test here.

It is important to understand that color blindness does not equate seeing in black and white. That is monochromacy, which is extremely rare. In fact, color blindness typically refers to a reduced ability to distinguish between shades of certain colors — most commonly reds and greens; less commonly, blues and yellows.

These colors tend to blend into one another, resulting in perceptions that may look something like this:

google

The top version of Google’s logo has normal colors. The bottom version is adjusted to mirror how a red-green color blind person might see it.

warhol

The left version of Andy Warhol’s Marilyn Monroe grid has normal coloration; the right version is adjusted to mirror how a red-green color blind person might see it

Lots of famous leaders and creatives have been color blind, including Mark Twain, Bill Clinton, Mark Zuckerberg (rumor has it that Facebook first used blue as its highlight color because it was easiest for the founder to see) and even — although this claim is hotly disputed — Vincent Van Gogh.

van gogh

Mark Zuckerberg (photo by jdlasica) and, perhaps, Vincent Van Gogh were both color blind

You’re not color blind, but you still need to consider a color blind audience

As a normally sighted person, it’s hard to imagine what your work is going to look like to a color blind eye. And yet, this can make a tremendous impact.

Websites are a major concern because it’s crucial that they are legible and easy to navigate for all users. This image underscores the difference between a color blind-unfriendly hover, and a color blind-friendly one:

hover over

The top highlight, which is similar in tone to the normal button, is worst for a color blind audience; the middle is better, as it takes advantage of differences in brightness; the bottom is best, as it also adds a non-color component: a highlighted border

You wouldn’t want your logo to consist of colors that are clashing or indistinguishable to a color blind audience, either, would you? Or worse, a logo that is entirely invisible — as with some of the ones below:

colourblindlogos

These were apparently logos for 1) Bill Gardner, 2) Dennis Murphy, 3) Razoo and 4) Crema Cafe. None of them carries a particularly positive association for a color blind viewer, but 2 and 3 are difficult or even impossible to read! 

Additionally, consider these more specific areas where color is key:

Links: It’s common to highlight a hyperlink within a body of text using color alone.

Infographics: Color is crucial to the appeal and readability of infographics. It also often carries symbolic information.

Maps: Here too, color is often used to distinguish things like different subway lines or city districts.

Games: Color is often used to distinguish teams and direct gameplay.

map1

Maps that rely too much on color can be very confusing for color blind viewers.

In order to avoid color blindness pitfalls, here are a few handy rules and approaches to consider:

  • Avoid the following color combinations, which are especially hard on color blind people: Green & Red; Green & Brown; Blue & Purple; Green & Blue; Light Green & Yellow; Blue & Grey; Green & Grey; Green & Black
  • Make it monochrome: Using various shades of a single color instead of multiple colors is of course the most surefire way to avoid color blindness issues. Today minimalism is all the rage, isn’t it?
  • Use high contrast: Color blind people can still perceive contrast, as well as differences in hue, saturation and brightness. Use these to your advantage (Hint: many color blind individuals report being able to better distinguish between bright colors rather than dim ones, which tend to blur into one another)
  • Use thicker lines: Some mildly color blind people are able to see a color, but only if there’s a sufficient “mass” of it. If a line of color is too thin, it won’t show up as the right color.
  • Don’t assume colors will signal emotions in and of themselves: If you’re using red to signal “bad,” “warning,” or “watch out,” consider adding another symbolic element to get the point across to color blind viewers.
  • Use texture instead: in maps and infographics, try using texture in addition to color to differentiate between objects.

infographic

Texture, in addition to tone, helps a color blind audience read something like an infographic.

Additionally, there are tons of resources that give you feedback about your color choices. Some of them even provide simulations of what your design would look like to a color blind eye! Check these out:

  • Colorblind Web Page Filter: type in a URL, select a type of color blindness, and their filter will show you what the web page looks like to someone with that issue
  • Vischeck: applied to files or web pages, it can either simulate color blind vision or try to correct images for color blind viewers
  • Newman services: another color blind simulation product
  • Color Laboratory: allows you to see how selected colors will appear next to one another, in various foreground/background combinations and to color blind viewers
  • Color Oracle: more color blindness simulation for Window, Mac and Linux
  • Sim Daltonism: a color blindness simulator for Mac only
  • Color contrast visualizer: helps you choose good color combinations in general

You’re color blind and ready to design!

Many graphic designers hide their color blindness like it’s some sort of shameful secret. Really, there’s no need. With a few simple technologies and a willingness to borrow the eyes of others from time to time, you’ll be absolutely fine. In fact, there’s an ever-growing community of color blind designers! Check it out:

  • We Are Colorblind: a website by color blind graphic designers that has articles about color blindness and reviews of various products (mostly apps) with respect to their color blind friendliness or unfriendliness
  • jdotreach: a proud color blind designer, who describes how he copes with his irregular vision in this blog post
  • Yoav Brill: a color blind designer/filmmaker created an inspiring short film made up entirely of dots resembling those from a color blind test

Yoav Brill’s film uses Ishihara color blind test dots to tell a story of difference. 

As far as color blind designing goes, each person has his or her own method, but it’s largely a matter of taking color combinations that you know look good, and keeping track of them with reference tags like the color’s hex value or Pantone code. The dropper tool in Photoshop will prove an indispensable resource in gathering your data, and you don’t need to worry about copying because color cannot be copyrighted.

Beyond that, here are a few other methods you can use:

  • The ColourAdd system: A system that pairs base colors with symbols, which can be combined in various ways to designate secondary colors. This is just one of many approaches one could take.

colouradd

The ColourAdd system uses symbols to accompany colors, to help direct color blind viewers.

  • Visolve: software that corrects colors for color blind users
  • Vischeck: an alternative software that attempts to correct colors for color blind users

Are you color blind or do you take a color blind audience into consideration when designing? What are your methods?

facebooktwittergoogle_plusredditpinterestlinkedinmail

Alex contributes from New York City on topics ranging from branding and typography to the history of design.

  • Margaret Welwood

    This is fascinating! I think my website did fine on the red-green test. What an interesting change it made to the cover!

  • Davidp

    Thanks. I’m 64 years into this life and I think this is the first article I’ve read on colorblindness from this point of view.