Pie charts
Usage
Problems
Examples
Google Analytics
Google analytics uses pie charts on some pages to display data. In this example the chart is used to display an overview of traffic sources.
Protan and Deutan-type color blind have trouble distinguishing between the red and green used in this example. It is easy to spot the difference between the red and green in the chart itself as the colors are next to each other, making the difference obvious. But the colored squares in the legend are too small and too far apart from each other and the chart. The red and green now appear the same, and because of this there is no way of matching the chart segments with the legend.
Thankfully, the provided category name, amount and percentage on the right give an indication of the proportions of items. But besides defeating the purpose of the pie chart, this way of reading the chart is confusing and time consuming.
Solutions
Solution 1: Use colors easy to distinguish
Use very clear colors with good contrast. Most of all, try to avoid the high priority confusion colors.
Replacing green with yellow in the Google Analytics example makes the pie chart more usable. The difference between the three colors is now large enough to immediately match the legend to the chart. More information »
Solution 2: Connect the legend to the chart itself
Using lines from the categories in the legend to the pie parts or placing the labels next to the parts. This way, there is more of a visual connection between chart and data. The color blind can now rely on something other than color alone.
Solution 3: Use mouse-over hints to connect the legend to the chart
While one of the more technologically involved solutions, this leaves the chart intact but gives an mouse-over with extra information when needed. During the mouse-over, the legend gets matched to the part of the chart the user is hovering over at that moment. This can be a label in the chart with the name of the segment, lighting up the color in the chart and legend, or another way to clarify the link between the chart and the legend.
Solution 4: Consider using another chart type
Pie charts can often be difficult to read whether you are color blind or not, and should often be replaced by a bar graph or another way of conveying the same information. The Google Analytics example could be replaced with a bar graph. This way, the color palette loses its function and can stay the same. (thanks to Jeff van Campen for his suggestion)
