Three tools to help you make colorblind-friendly graphics

This story is part of a series on bringing the journalism we produce to as many people as possible, regardless of language, access to technology, or physical capability. Find the series introduction, as well as a list of published stories here.

I am one of the 8% of men of Northern European descent who suffers from red-green colorblindness. Specifically, I have a mild case of protanopia (also called protanomaly), which means that my eyes lack a sufficient number of retinal cones to accurately see red wavelengths. To me some purples appear closer to blue; some oranges and light greens appear closer to yellow; dark greens and brown are sometimes indistinguishable.

Various color spectrums for different color vision deficiencies. Wikimedia Commons.

Most of the time this has little impact on my day-to-day life, but as a news consumer and designer I often find myself struggling to read certain visualizations because my eyes just can’t distinguish the color scheme. (If you're not colorblind and are interested in experiencing it, check out Dan Kaminsky’s iPhone app DanKam which uses augmented reality to let you experience the world through different color visions.)

As information architects, data visualizers and web designers, we need to make our work accessible to as many people as possible, which includes people with colorblindness.

Color is critical

Color is frequently used to quickly convey meaning. It's an important choice for any visualization, but making one that's attractive, informative and easily distinguishable by colorblind people trips up many designers.

The NPR Visuals team worked through these challenges this spring in a visualization for a story on how school districts spend money.

“Early on after some doing some exploration of the data we knew we were going to do a district level choropleth map,” said Katie Park, deputy graphics editor at NPR. “We thought that it would be easier to read with a diverging color palette where the center value was the U.S. average. When you get into divergent color palettes you realize that colorblindness might become an issue.”

The NPR graphics team knew they wanted a divergent choropleth map to help show the differences in school spending by district. After considering accessibility for colorblind people, this was the palette they chose.

Park said that the default color schemes designers might use — like green for positive values and red for negative values — tend to cause problems for colorblind readers.

Meanwhile, common colorblind friendly palettes like magenta/green or orange/purple are devoid of meaning. Pink, for example, doesn’t convey negativity like red does. Others, like blue/red, are already imbued with too much cultural meaning and would be confusing in a non-political map.

Sometimes you can get away with using a single hue and varying its lightness. But sometimes a project calls for a multi-hue scale or a diverging scale. (If you’re interested in reading more, The New York Times’ Gregor Aisch wrote a blog post about his library chroma.js that goes into more detail on multi-hue scales)

Three tools to help

There are a few simple tools to help ensure that your projects are colorblind-friendly.

  1. Start by using the color schemes on ColorBrewer, which gives you sequential, diverging, and categorical (sometimes called binary) palettes that are colorblind safe. You can use these and modify them to fit your style guide. “I try to find a good compromise between our colors, the colors that work in ColorBrewer, and the things that look good on the page,” Park said, noting that she'll tinker with the colors in Illustrator until she’s happy with the palette. “Usually my trick is to tweak the shades a little bit so that the greens have a little bit more blue in them,” Park added. “But the problem with that is that if you’re greens get too blue then you start to look like you have a political map or the colors just don’t read as intuitively.”

    ColorBrewer, generates colorblind-friendly color palettes. NPR's Katie Park starts with the colors here and then tweaks to find colors that look good on the page.
  2. Gregor Aisch’s chroma tool is also useful for optimizing your diverging color palettes. It can help you take two or more colors and generate a full scale of in-between values.

    The chroma.js-powered Color Scale Helper is an easy way to generate sequential and diverging color palettes.
  3. Before publishing, you should check your work. Color Oracle and Sim Daltonism both let non-colorblind people simulate colorblindness on their screens.
    Sim Daltonism lets you see your visualizations as though you were colorblind. Image from Flickr/Richard Ricciardi

The great thing about picking a palette, is that once you have it, you can use it again and again.

Taking a few minutes before publishing a project to make sure it’s colorblind friendly is an easy way to make your work have a bigger impact.

About the author

Alex Duner

Student Fellow

Latest Posts

  • A Google Spreadsheets change affecting TimelineJS users

    Google recently changed something about their Sheets service which is causing many people to run into an error when they are making a new timeline. Note: there should be no impact on existing timelines! After this change, many of you click on the "preview" and get this message: An unexpected error occurred trying to read your spreadsheet data [SyntaxError] Timeline configuration has no events. There is a straightforward work-around, but it requires those of you who have...

    Continue Reading

  • How Americans think and feel about gun violence

    A man killed his wife, then himself. I want you to see his face and learn that he enjoyed fishing with his grandchildren. A small-time drug dealer is shot by two men in a parking lot. I find his Facebook profile and a photo shows him striking a playfully irreverent pose, giving the camera the middle finger. The photo’s comments take a mournful turn after a certain date. “Rest easy bro ???” Gun Memorial runs...

    Continue Reading

  • Software developers interested in journalism: Northwestern and The Washington Post want you!

    Northwestern University and The Washington Post are offering a unique opportunity for two talented software developers interested in applying their programming skills in media and journalism. Here’s the proposition: (1) a full-tuition scholarship to earn a master’s degree in journalism at Northwestern University, followed by (2) a six-month paid internship with The Post’s world-class engineering team, with the possibility of subsequent full-time employment. These opportunities are made possible by the John S. and James L....

    Continue Reading

  • What happened when Gun Memorial let anyone contribute directly to victim profiles

    If you’re reporting local or niche news, there’s a good chance that your audience collectively knows more about the story than you do. That’s especially true for us at Gun Memorial, a small publication with a nationwide mission of covering every American who is shot dead. In our latest, mostly successful, experiment, we let readers add to our stories without editor intervention. This article shares some lessons from that experience. Asking for reader contributions A...

    Continue Reading

  • How conversational interfaces make the internet more accessible for everyone

    This story is part of a series on bringing the journalism we produce to as many people as possible, regardless of language, access to technology, or physical capability. Find the series introduction, as well as a list of published stories here. In 2004, human-computer interaction professor Alan Dix published the third edition of Human-Computer Interaction along with his colleagues, Janet Finley, Gregory Abowd, and Russell Beale. In a chapter called “The Interaction,” the authors wrote...

    Continue Reading

  • Phone stories: How a 100-year-old-technology helped Pop-up Magazine make news convenient for audiences

    This story is part of a series on bringing the journalism we produce to as many people as possible, regardless of language, access to technology, or physical capability. Find the series introduction, as well as a list of published stories here. As news organizations look increasingly to social networks, apps, and other recently-emerged technology to find new audiences, at least one has gone in the completely opposite direction. Pop-Up Magazine this year launched a product...

    Continue Reading

Storytelling Tools

We build easy-to-use tools that can help you tell better stories.

View More