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.

*