Consider this map of Point Reyes and its surrounding area, created by the National Park Service (PDF). Like most well-designed maps, it is an excellent example of functional color. Color is used systematically to label the different regions (water, land, parkland), and to indicate the different types of roads (major highway, secondary highway, surface roads). The colors are clear and distinct, but not gaudy. Colors are chosen according to simple, well-established conventions: blue for water, green for parks, red for highways. But, the color choices within these conventions have much to teach us about the design and perception of functional color.
The highways look to be drawn in two shades of red. In fact, the dark red highways are the same red as the lighter ones. They are outlined in black to make the color look darker, a trick of perception exploited by map makers to save on printing costs. Back when map printing was a fine art, each different color required its own printing plate and custom ink. Using a black outline to create a new red saves the cost of adding a new color plate. The black outline also makes the edge of the road stand out more clearly from its background.
The perceived difference between two colors is called “contrast.” Contrast defines legibility, readability, and directs attention. Designers and vision scientists describe colors in terms of hue (red, blue, purple, etc.) and lightness, plus a third dimension variously called saturation, chroma, or colorfulness. The red roads contrast in both hue and lightness with the light colored backgrounds. The network of red highways creates the foremost visual layer in this map, as this map is designed for drivers. The roads are labeled in black, which maximizes readability.
The text that labels the features in the light blue water is a slightly darker, more saturated shade of blue. Because our visual system groups objects that are a similar hue, this creates a “blue” background layer that is quietly legible yet unobtrusive. Similarly, Point Reyes is labeled in green to associate it with the green park region, but more emphatically, as it is the destination for this map.
All colors have a perceived lightness (luminance) independent of their hue. Luminance can be measured, captured by technology such as black and white cameras, or computed. Consider our map in a luminance view, which was created by the “Grayscale” function in Adobe Photoshop. The first thing to notice is that the map is completely readable and usable. The roads are still the dominant visual layer because they contrast strongly with the light gray land. The difference between Point Reyes and its surrounding ocean is more subtle than in color, but still visible. It is now easy to see that the text labeling Point Reyes is darker (higher contrast) than the text “Pacific Ocean,” which gives it more emphasis.
Reducing colors to their luminance values allows us to evaluate the contrast and spatial relationships in a design without the distraction of hue. Luminance contrast alone defines shape and edges. Metrics for text legibility are defined with respect to luminance contrast. Differences in contrast direct attention and define importance. Applying color cannot repair a design that is poorly organized or lacks a clear information hierarchy encoded by luminance contrast.
Designers in many fields call this “get it right in black and white.”