Color-Friendly legends
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.
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:
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.