Skip to content

Latest commit

 

History

History
34 lines (20 loc) · 2.87 KB

File metadata and controls

34 lines (20 loc) · 2.87 KB

Color

  1. Contrast
  2. Patterns
  3. Human Perception

1. Contrast

Contrast impacts everybody. Ensure sufficient contrast exists between text and its background. Common sense is vital when considering color contrast, if you can't differentiate the colors, nobody else can. Use simple, high-contrast color schemes.

color-contrast

2. Patterns

Don’t use color alone to convey information; consider patterns, line widths, etc. as alternative ways of highlighting differences between objects on your maps.

A portion of the population, approximately 8% of men and 0.5% of women are affected by some form of color blindness. Color blindness, better described as color vision deficiency, is the absence of seeing colors in their full capacity. While there are multiple forms of deficiency, red/green color blindness is the most common.

For example, normal vision can see red and green colors whereas red/green color blindness cannot distinguish between the background and text. Remember especially: red + green = bad!:

colorblind-example

While it may be a good option to use color to highlight or compliment what is already visible, do not use color alone to convey information. That information may not be available to a person who is colorblind, and will be unavailable to screen reader users. As an example of how to help correct for this, see the map below, which is more accessible to users who are color blind, as it uses both color and shape to convey the difference between icons:

patterns

3. Human Perception

People see color before they absorb anything else. Many of the most recognizable brands in the world rely on color for instant recognition. Color can also carry cultural connotations that can sway thinking, change actions, and cause reactions. It can irritate or soothe one's eyes, raise blood pressure, or even suppress appetite. As seen in the image below, the colors used for a product, web site, business card, or logo cause powerful reactions (especially when flipped!).

yahoo-google-icon

As a powerful form of communication, it is important to consider the message your color choices are sending. For example: Red or black may connote "stop" or "bad", and green may connote "go" or "good". In general, when displaying data on a map, you will want to look for 'neutral' colors that don't confuse or bias your message.

stoplight

Return to the Best Practices homepage.