Color discussion in information graphics: A friendly design scheme for people with color blindness

Color can be used to distinguish data categories and dimensions on information graphs, and is one of the most commonly used visual variables in data visualization. However, more than 8% of men and 0.4% of women in the world are plagued by the problem of color vision disorders-they have difficulty in identifying some or all of the colors. We generally refer to this group as "color blindness (color blindness)" (also known as Dalton, vision loss, vision recognition disorder, anomalous trichromatism, etc.). In the face of such a large and special audience, designers should pay attention to their needs. The design of information graphics is aimed at transmitting accurate data to the users, and can not ignore this part of the group.

I. Understanding COLOR blindness

"Color blindness can see colors?" "Can they only see black and white?" "-people often mistakenly think that the sight of color-blind vision is only gray-scale distribution, but it is not." Color blindness does not imply a complete loss of pigmentation, but rather a partial colour perception that is impaired and therefore does not correctly perceive and distinguish between certain areas. color blindness can be divided into: Red Blind (P), Green Blind (D), Blue Blind (T) and panchromatic blind. Red blind and green blindness is the most common, collectively known as the Red-green blind. Around 200 million people worldwide suffer from color blindness, which is even more prevalent than AB blood groups. Below we have a sensual look at the world in the eyes of the blind:

From the above images of color blindness, we can feel that color-blind people can identify more limited hue. Red Blind and green blind color are more approximate. As the number of red-green blind people accounts for 99% of the total color blindness, we need to understand more about the colors they can see. Here's a list of red-green blind, confusing colors, and some of the rules of color vision:

1 red-green blind hard to distinguish between two different colors only in red or green elements. such as red and green, blue and purple (blue + red), green and brown, red and brown.

2 red-green-blind people are more sensitive to blue. For example, they would confuse red with green, or yellow and yellow green, but could clearly distinguish between green and turquoise (emerald green).

3 Red is not a bright and eye-catching color in red-green blind eyes. On the contrary, red is very deep for them, while dark red is almost black. It is therefore difficult for color blind people to distinguish the dark red accent in the article.

4) Although color-blind people have a weaker ability to identify the hue, they are sensitive to lightness and saturation.

5 The color of low saturation is more difficult to identify than the high saturation color. such as sky-blue and pink.

Perhaps the above analysis is too abstract, in order to more intuitive to see color blindness in the eyes of the people, the following introduce a number of tools to simulate color blindness, designers to facilitate the design and testing:

Adobe self-with proof setup

Photoshop CS4 and illustrator CS4 and above provide proof settings that simulate red blind and green blindness, which is the easiest way for visual designers who struggle every day in Photoshop/illustrator. Select View-Proof Settings-red blind/green blind type

Color Oracle:http://colororacle.org/

website Color Blind web Page Filter:http://colorfilter.wickline.org/

Two. Design the solution

The design of user-friendly information graphics for people with color blindness does not mean that designers should give up the use of color such a "sharp weapon." Even for people with a vision disorder, color remains a simple and fast form of expression that distinguishes between different types of data. To improve the identification and readability of information graphics, we can follow such a few ideas to find solutions: (1) not completely rely on color to distinguish information, while using a variety of visual variables to encode information, (2) Choose a safe color scheme, (3) Use text annotation.

1. Redundant code

To avoid encoding information using only color, try to encode information using multiple visual variables, such as Shape + color, size + color, annotation + color . The shapes include some of the elements that can be used: circles, triangles, rectangles, etc., solid lines, dotted lines, dots, etc., letters, digital symbols, etc. One rule to follow is to use as few colors as possible--combining different shape symbols with a few bright colors-- far better than using only one shape and multiple colors.

2. Choose the appropriate color

For color blind people's ability to identify colors, you need to carefully select color, in order to avoid the choice of easily confused color area. However, it is not easy to make colors that cover a variety of color vision recognition (including color blindness, anomalous trichromatism, and normal colour perception), especially when the same interface requires multiple colours. Japan has research to come up with a group of barrier-free color suggestions , here to share, for your reference. This set of colors is easy to identify for color blindness and non-color blindness (for example, it chooses Vermilion instead of red, blue-green instead of green, and magenta instead of purple to reduce the obsession of color blindness), which applies to both screen and print, and the names of all colors are easy to define.

Note that when you choose a color from the above color group: A. Please use warm and cool colors alternately; When using multiple warm colors and multiple cool colors, make a distinction between lightness and saturation; C. Avoid combination of low saturation and low brightness at the same time.

In addition, share two color tools, which provide a color-blindness option for people who are color-blind, to help you color:

Website Contrast-a-web V2.0 http://www.dasplankton.de/ContrastA/(open "Show color deficiency Simulation" panel)

Map Color Tool Color BREWER 2.0 http://colorbrewer2.org/(tick "colorblind safe" option)

Iii. examples

Here are some examples of commonly used information graphs to illustrate how to optimize an information map for color-blind users:

1) Dot Chart

Optimization uses such a number of means: a. Adjust the color, the color blind people easily confused red, green, orange for red, blue, yellow. B. Adjust the brightness, so that the number of colors in the figure is more obvious difference in brightness. C. Give different shapes to different elements. All information graphs that use point elements can refer to this workaround.

2) Line chart

Optimization uses such means as: a. Use thicker lines to make the color more obvious. (The smaller the color, the harder the color is to distinguish.) For people with colored disorders, the color of thin lines, small icons, fine text is particularly difficult to distinguish. B. Swap lines with different shapes (solid, dashed, dotted). C. Text directly comments around the line. D. Color fine-tuning. This allows the use of multiple visual variables for each type of data to encode, even if the color information is completely lost, can also complete the transmission of information. All information graphs that use line elements can refer to this workaround.

3) Column Chart

By adding shading, the histogram is optimized by directly annotating the text annotation. All graphics (such as pie charts) that use faces can refer to this workaround.

Four. Written in the final

In the actual design process, we will not necessarily use all of the above means, need to balance between beauty and friendliness . We can also use some interactive means to avoid the problem that too many elements are too cluttered in the same interface. This trend graph, such as highcharts, is very good, it uses an easily identifiable color, each node uses a different shape of the symbol, but only when the mouse hover to the specific node, the line of the corresponding information ("New York") appears.

In addition to the interactive mode of mouse hover, we can even provide a separate color blindness for people with color blindness, which can also take into account the visual beauty and avoid too much information interference. This form also has a precedent in games and software. For example, ichat, in general, only a different color to distinguish the user's online status, but it also provides the "User shapes to indicate status" option, you can change the "idle" status to orange-yellow triangle symbol, the "busy" state replaced by a red square symbol.

Resources:

We are colorblind http://wearecolorblind.com/

Designing for, and as, a color-blind person http://webdesign.tutsplus.com/articles/design-theory/ designing-for-and-as-a-color-blind-person/

Color Universal Design (CUD)-How to make figures and presentations this are friendly to colorblind people . u-tokyo.ac.jp/color/

Designing maps for the colour-vision impaired http://colororacle.org/design.html

Designing empathy--paying attention to color-blind people http://lovelyrosa.blogbus.com/logs/54856107.html

Web Accessibility for color blindness design http://www.2beusable.com/web-accessibility-1-what-is-color-blindness.html

Article Source: Tencent CDC