The Humble Indie Bundle website has a section dedicated to sales statistics. One of those stats is displayed via a piechart. Usually a recipe for disaster, but not in this case.

Humble Indie Bundle

Humble Indie Bundle

The Humble Indie Bundle website has a section dedicated to sales statistics. One of those stats is displayed via a piechart. Usually a recipe for disaster, but not in this case.

The Humble Indie Bundle (humblebundle.com) is a pay what you want, help charity, cross-platform, DRM-free bundle of games.

The website shows a block with live statistics about the sale. Total payments, average purchases, top contributors, and the like. A piechart graph is used for the ‘total payments by platform’ statistics.

Statistics of the sales for the bundle in a colored pie chart

The piechart uses red, green and blue and just as with the Google Analytics example this poses problems.

The red and green in the chart itself are distinguishable from each other because of the close proximity to each other. But the squares in the legend are too small and too far apart from the chart itself to tell the color. As a result, in this form the colorblind are not able to tell what part of the chart represents Mac and Windows.

Thankfully there is a solution, when hovering over the chart with your mouse cursor an alternative greyscale version is showed. This version uses a grayscale gradient type color scheme; from light to dark. This eliminates the need for naming, recognizing and comparing the colors in the chart to the legend.

Humble Indie Bundle in the hover state

As a result, the chart is now usable by the colorblind. A very good example of how simple alternatives can provide a solution, even without changing the way a website looks.

*

Comments

  1. Colin

    Actually learnt a bit about my own colour-blindness reading this.

    As you say – in the chart itself I can make out the different colours fairly easily, but the boxes just look too similar to each other to properly distinguish which is which…

    Thanks, very interesting.

  2. Caleb

    This change occurred due to my contacting them several times and complaining about it. I eventually talked to Jeff and he said he’d add the hover status.

    Glad to see they’re getting recognition for it.

    • Tom van Beveren

      That is really awesome! Thanks for contacting them, problems like these are easy to overlook for the not colorblind.

  3. nemo

    So. I’m genuinely curious.
    This seems to be crying out for a technical solution on the side of the person w/ colourblindness.

    Maintaining alternate versions of most everything is a pretty big job.

    But, at least under Compiz on my system there’s the ability to apply an arbitrary shader to any system window, and toggle it on or off with a keystroke.

    These shaders are pretty easy to write and install, and w/ one enabled, you could alter the colours in a system window to best match your particular colourblindness. Heck. It only took me a few minutes to write one to invert colour brightness while pres while preserving hue (so I could enjoy dark web pages while not having inverted alien colours)

    Having trouble making out content on a web page? A couple of keystrokes and your browser window is rendered in colourblind-friendly hues.

    Heck. Why not just run the entire operating system in colour-blind friendly colours? The compiz filter can be applied system-wide too.

    This seems easier than an endless public awareness campaign.

    Change the output device, not the input.

    • Tim

      While I agree with you that it makes a lot of sense for the colorblind to try to adapt, I do think the ‘endless public awareness campagin’ is a good thing. Most non-colorblind people might be aware colorblindness, I think it’s really good to teach us how it affects people in practical situations.
       
      A good example is the trivial pursuit example on this website. I felt *really* bad after reading that, just for being annoyed with my dad all those times he would pick up the wrong piece…