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 colorblind, 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 colorblind? Not a big deal. Learn a few tricks and you’ll be fine.

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

Are you colorblind?

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 colorblind. 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 colorblind 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 colorblind person might see it

Lots of famous leaders and creatives have been colorblind, 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 colorblind

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

As a normally sighted person, it’s hard to imagine what your work is going to look like to a colorblind 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 colorblind-unfriendly hover, and a colorblind-friendly one:

hover over

The top highlight, which is similar in tone to the normal button, is worst for a colorblind 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 colorblind 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 colorblind 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 colorblind viewers.

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

  • Avoid the following color combinations, which are especially hard on colorblind 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 colorblindness issues. Today minimalism is all the rage, isn’t it?
  • Use high contrast: Colorblind people can still perceive contrast, as well as differences in hue, saturation and brightness. Use these to your advantage (Hint: many colorblind 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 colorblind 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 colorblind 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 colorblind 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 colorblind eye! Check these out:

  • Colorblind Web Page Filter: type in a URL, select a type of colorblindness, 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 colorblind vision or try to correct images for colorblind viewers
  • Newman services: another colorblind simulation product
  • Color Laboratory: allows you to see how selected colors will appear next to one another, in various foreground/background combinations and to colorblind viewers
  • Color Oracle: more colorblindness simulation for Window, Mac and Linux
  • Sim Daltonism: a colorblindness simulator for Mac only
  • Color contrast visualizer: helps you choose good color combinations in general

You’re colorblind 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 colorblind designers! Check it out:

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

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

As far as colorblind 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 colorblind viewers.

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

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

Related articles:
Understand color theory with these 7 facts
Color the world: create compelling color schemes
8 common mistakes when working with color and how to fix them

facebooktwittergoogle_plusredditpinterestlinkedinmail

Alex Bigman is liaison to 99designs' awesome community of graphic designers. He is a recent grad of UC Berkeley, where he studied history of art and cognitive science.