Archive for November, 2011

More on color-friendly design

Thursday, November 17th, 2011

This chart from theunderstatement.com on Android and iPhone update histories is wonderful, but hard-to-read for many color-blind users because:

  1. The colors are too similar. To me, On current major version and 3+ major versions behind are indistinguishable from each other, and both are confusingly similar to 2 major features behind.
  2. The colors aren’t arranged logically. The range from newest to oldest isn’t supported by a corresponding range of brightness.


colored_image_bad.jpg

Better: use colors with different values (brightness) and, where appropriate, order the colors from lightest value to darkest as an additional aid to color-blind users. The latter will actually improve the chart for all users, not just the color-blind ones.


colored_image_better.jpg

Color-Friendly legends

Wednesday, November 16th, 2011

To make color legends easier to read

  • make the color swatches large
  • position the swatches close together and close to the referenced image
  • eliminate any other non-swatch colors from the legend.

In this image taken from an cellular network 4G availability checker, my color-blind eyes see a map filled with a nearly uniform orange. The legend on the right doesn’t help much; the yellow box makes things worse.


color_legend_bad.jpg

Simply increasing the size and proximity of the color swatches helps a lot. In this revised version the difference between all three colors is much clearer:


color_legend_better.jpg

Although it’s better to use more strongly contrasting colors as well as other visual cues to help color-blind users, just following this simple tip really helps.

As a nice bonus, minor changes like these made to help color-blind users often improve the design for everyone.