Waxy.org
Waxy.org is the sandbox of Andy Baio. I run XOXO, built Playfic and Supercut, helped build Kickstarter, founded Upcoming, made an album, and some other stuff too.

Contact Me: Email, AOL IM, or follow me on Twitter.

Colorblind Leading the Blind

Posted Jan 27, 2011 (Updated Jan 29, 2011)

Today, Netflix posted some interesting research, tracking the performance of their streaming service on the top ISPs in the U.S.

Sadly, the charts were completely useless to me — a pile of mostly-indistinguishable lines. Along with one out of every 14 American males (about 7%), I'm red-green colorblind.

This is hard for non-colorblind people to understand, so I pulled together a couple examples. Here's a split comparison of the original chart, showing what people with normal vision see compared to me and my broke-ass eyes.


(Click to view large.)


Two simple solutions:

1. Label your lines. When you have more than three data points in a line chart, legends fall apart quickly whether you're colorblind or not. A label next to each line makes any chart much more readable. Here's a quick remake I whipped up. (Thanks to Greg for helping me get the colors right.)


(Click to view large.)

2. Pick colorblind-safe colors. If you have to use a legend, be kind and pick something people like us can see. Photoshop's supported drop-dead simple colorblind simulation since CS4, or you can check your images or webpages for free using the Vischeck colorblind simulator.


When doing the right thing is this easy, it's really disturbing when it's dismissed as a waste of time.

A couple years ago, I contacted the husband-and-wife team behind Snopes, the essential resource on urban legends, to let them know about a similar issue. The red/green icons they use to indicate true/false urban legends looked absolutely identical to me. I let them know about the problem and prepared alternate GIFs for them, with a darker red and lighter green. (Incidentally, that's why colorblind people don't have trouble with stoplights.)

They not only refused the new images, but actually added a new entry to their FAQ, defending their position:

We chose our red-yellow-green coding system because its "traffic light" pattern can be understood by most of our readers with little or no explanation. While we understand that about 8% of our readership experiences some form of color blindness and therefore cannot distinguish the different colors of bullets, other alternatives we have tried have proved confusing to many of our non-color blind readers. Therefore, we have chosen to stick with a system that works very well for 92% of our readers.

Instead, they recommended hovering over every icon to see the tooltip text. I absolutely adore the work they do on Snopes, but that interaction's left a sour taste in my mouth ever since. It just doesn't seem defensible — is slightly darkening a shade of red and brightening a green too much to ask?

I wouldn't expect anyone to be able to perfectly anticipate every person's needs; accessibility is extremely hard to get right 100% of the time. But if your ultimate goal is conveying information, open ears and a little empathy can go a long way.

Update: Alex Bischoff took the three images I made for Snopes, and wrote a user script that replaces their images with mine. Install it here for your browser of choice.

26 Comments (Add Yours)

Jan 27, 2011
4:36 PM  
JoolaPrime wrote:

Colour-blind or not, its still impossible to read.


Jan 27, 2011
4:40 PM  
Clint wrote:

Thanks! I had the same problem.


Jan 27, 2011
5:04 PM  
Matt wrote:

Just a minor correction. If color-blindness affects 1 in 14 males, but far fewer females, then we are not talking about 7% of audience, but more like 3.5%.

That said, the reaction at snopes was ludicrous. I once dealt with a similar attitude designing a system with a graphics designer. I suggested changing some stop light icons/gifs, changing them from circles to alternate shapes like circle/triangle/square for Red/Amber/Green (a la iChat). She refused.

Whenever doing graphs at work I always bear in mind that we only have B/W printers, so I add a pattern to the lines to help distinguish.


Jan 27, 2011
5:10 PM  
Andy Baio wrote:

Whoops, I meant to write "male audience" in that paragraph. Thanks for the correction.


Jan 27, 2011
9:20 PM  
Christian wrote:

It's interesting that they're so committed to the "traffic light" analogy. These assessments are about unchanging conditions: true, false, plausible, etc.. Traffic lights by definition change frequently. Simply replacing the icon with a text label might not feel clever, but would be preferable. Just as you've done with the Netflix chart, direct labeling, whenever possible means less work for the reader.


Jan 27, 2011
9:55 PM  
Tristan Seligmann wrote:

I have to agree with JoolaPrime, I'm not colour-blind and the graph is still just about impossible to read.


Jan 28, 2011
4:23 AM  
Jason wrote:

Great post -- and that response from the Snopes folks is nothing short of stunning.


Jan 28, 2011
4:57 AM  
Rick wrote:

There are other relatively simple-to-implement visual effects that can create "color neutral" user experiences for relative dense data sets such as these. One is to provide a legend that handles a click or mouseover to change the alpha of all data sets (increase alpha for selected, decrease others), or other techniques to provide an obvious visual emphasis.


Jan 28, 2011
5:35 AM  
Jon Plummer wrote:

The Snopes folks wouldn't need to change color if they would consider varying shape as well as color for the truth values. A check for true and an X for false, in addition to the color variation, would suit everyone regardless of the level of color vision.


Jan 28, 2011
6:01 AM  
Philipp Lenssen wrote:

I'm not colorblind (not that I know of anyway) but still have a hard time distinguishing some of those colors... a third solution would probably be to use different stroke types, like dashed, dotted, dash-dotted, etc., to aid the accessibility.


Jan 28, 2011
9:01 AM  
urlnotfound wrote:

[this is good]

I work for a business intelligence consulting firm and this is something we tell our clients to be mindful of.


Jan 28, 2011
9:11 AM  
Stephen van Egmond wrote:

In case anyone looks at that split display and thinks "bullshit": I am red-green colourblind, and to me that looks like a chart with a black line down the middle. The left and right side colours look identical.


Jan 28, 2011
9:19 AM  
Daniel Howard wrote:

You are raising awareness, which is important, and I enjoyed your Snopes anecdote. I tried the colorblind simulator on my own web site which is mostly black and white, so no issues there.

That Snopes is too small-minded to work out a reasonable accommodation brings me to this: it is too bad the ADA doesn't cover the web.

-danny


Jan 28, 2011
10:33 AM  
chromatically challenged wrote:

There seems to be a problem with your split comparison graph. The colors on both sides are the same.
Problem is you could pulling my leg and I'd never know.


Jan 28, 2011
11:53 AM  
Steve wrote:

I have to agree with JoolaPrime. My color vision works fine, and the graph is still unintelligible.

Unless they were trying to make a case for how the ISP throughput changes over time, the use of time-domain graphs is pretty pointless. Perhaps a nice table of average plus standard deviation would have worked better?


Jan 28, 2011
3:40 PM  
matt wrote:

do you use tableau software? the UI looks familiar from our software. had you tried our colorblind palette? I'm just curious to know if it provides any benefit over the other color sets we offer.


Jan 28, 2011
7:40 PM  
Tim Vlamis wrote:

Those who are looking for assistance in designing effective data visualizations may want to check out http://colorbrewer2.org. While it's primarily been designed for use by the mapping/spatial analytics community, we use their color palettes all the time in designing executive dashboards, business intelligence systems, and other data visualizations. They have an option to choose palettes that are color-blind safe.


Jan 28, 2011
10:05 PM  
Cathy N wrote:

My father and my daughter are color blind. They are missing red color. My daughter colored a ray of colors for science class. She got low grade and her friend told the teacher "Come On she is color blind." The teacher changed her grade to B. She showed me the color she drew. I couldn't believe it. All she sees are black brown green blue yellow orange.
Seems like they are from genetics.


Jan 29, 2011
9:04 AM  
Lou wrote:

Is there an Excel plugin or option to default Excel charts and graphs to colorblind-friendly colors?


Jan 30, 2011
7:15 AM  
Grant Hutchins wrote:

I wonder if it might help to humanize that 7% of males. Here's an idea of a rewrite of their policy:

We chose our red-yellow-green coding system because its "traffic light" pattern can be understood by most of our readers with little or no explanation. While we understand that Bill Clinton, Bob Dole, Keanu Reaves, Matt Lauer, Paul Newman, Jack Nicklaus, Bing Crosby, and Prince Williams experience some form of color blindness and therefore cannot distinguish the different colors of bullets, other alternatives we have tried have proved confusing to many of our non-color blind readers. Therefore, we have chosen to stick with a system that works very well for 92% of our readers.

Feb 2, 2011
3:01 AM  
anon wrote:

Thanks for this great example! My 2 cents: Having a simulator for colorblindness in Photoshop is nice, but choosing 16 different colors for thin lines that are maximally distinguishable on a white background is already challenging, even without trying to account for colorblind users. For users with normal sight, thin lines of different shades of blue are harder to distinguish, and thin yellow lines are hard to see on a white background. Having to then apply a colorblindness filter in Photoshop to simulate how this looks to someone else could lead to a lot of frustrating trial-and-error tweaking. I would love a list of pre-tested and recommended top-5, top-10, and top-20 most easily distinguishable colors for thin lines on white, black, and grey backgrounds, for normal and colorblind users. Or even an algorithm to generate the top-N most distinguishable colors. (Any color perception scientists out there?) Links to expert advice welcome!


Feb 2, 2011
3:10 AM  
Daniel wrote:

Wow, I now have an image to demonstrate how I see - usually with "this is how the colorblind see" images I can clearly see the difference, but here both sides look the same.

Thanks, from one eye-cripple to the other.


Feb 2, 2011
9:00 AM  
David wrote:

That graph is hard to read not just for color-blind people, but for non-colorblind people as well.


Feb 2, 2011
8:16 PM  
Catherine Roy wrote:

I would add that for the blind and others with severe visual impairments, the charts you refer to are even more useless and the accompanying text posted by the "Director of Content Delivery at Netflix" does very little if nothing to solve the problem. It would have been useful to include explanations on the content of the charts, either on the page itself or through the longdesc attribute. At the very least, an alt attribute. As it is, it completely fails.


Feb 4, 2011
8:39 AM  
Jay Askren wrote:

I agree. I'm not colorblind, and I still have hard time making any sense out of this chart. It's pretty worthless.


Feb 24, 2011
8:45 PM  
George wrote:

Thank you for doing this. I always wondered which company was which on that graph. I support labeling of things in graphs as you proposed, because there is no other way for me to figure out which is which.

Of course, I am also color blind :(


 

Leave a comment





Waxy Links
Ads via The Deck
May 24, 2013
Jay Silver's TED talk on turning everyday objects into computer interfaces — the creator of Makey Makey, which I highly recommend (via)
Steven Universe pilot — Rebecca Sugar, the artist behind Adventure Time's best songs, starts her own show
The Lonely Island's "Semicolon" — catchy parody of hashtag rap
The Girl Who Turned to Bone — how rare diseases are now treated, and how people support each other online (via)
May 23, 2013
Daily Dot on the pre-history of Tumblr — interviews with the guys behind anarchaia and Projectionist
SIGGRAPH's technical papers 2013 preview — someone show these people how to use Kickstarter
Planet Online — the modern web meets early 1990s children's toy commercials
How does copyright work in space? — Hatfield negotiated a license directly with Bowie, but it's otherwise complicated
Limits & Demonstrations — standalone minigame set in the world of Kentucky Route Zero (via)
Google Poetics — common human search queries as poetry (via)
Jessica Hische on typography — great overall primer for selecting type
It's Not About the Nail — "stop trying to fix it" (via)
LEGO's full-scale X-Wing model arrives in Times Square — a 42:1 scale LEGO model of a LEGO model of a model
May 22, 2013
Computer Beach Party — so bad it's good; don't miss Jason Scott's great backstory and interview with the director
ROM CHECK FAIL — after five years, Farbs' classic retro gaming mashup ported to Flash
Indie developers can't self-publish on the Xbox One — giving in to pressure from partners?
NYT asks Scroll Kit developer not to use their name — asking him to take down the assets is fine, but this is overreaching
Face morphing mirror at Maker Faire — simple idea, great effect
Soylent, the post-food drink, raises $230k in a day — his blog is fascinating and, of course, there's a subreddit
Amazon introduces Kindle Worlds, official licensing for fanfic — John Scalzi notes that Amazon gets exclusive copyright and licensors can use your new elements without compensation
The History of YouTube by the Gregory Brothers — on YouTube's eight birthday
May 21, 2013
Google Glass through a toddler's eyes — reminds me of Among the Sleep with Oculus Rift support
Newsblur redesigns — my pick for a worthy Google Reader successor
You Must Escape — clever echolocation game mechanic, second place in Ludum Dare 26
Dictionary of Numbers — Chrome add-on puts large numbers into human terms (via)
May 20, 2013
Flickr launches major redesign with 1TB free space, new apps — looking pretty great
Marco Arment on the Tumblr acquisition — great early personal history of Tumblr
May 19, 2013
Yahoo approves Tumblr acquisition for $1.1B — the community isn't taking it well; let's hope Yahoo learned from their first billion-dollar mistake
May 17, 2013
Doodal — now you're doodling with portals
Bret Victor on drawing dynamic visualizations — I really wish Bret would independently release some of his work as products

Andy Baio lives here. Some rights reserved, for your pleasure.