Blog

Regarding Color Vision Deficiency in the Icon Design Process

David Patrizi
David Patrizi
December 7th, 2009

Red is not always red, green is not always green. For quite a large amount of people it is not easy to distinguish between red and green hues. About 6% of all males have the same difficulties to tell orange from olive-green as unaffected people have to distinguish between burgundy and ruby-red – oftentimes, it is impossible. This most common kind of color vision deficiency is called Deuteranomaly, also known as “green weakness”. The following article will deal with the question of how this wide-spread impairment impacts the production process of high quality icons.

(Not) Seeing in RGB

Humans usually have three kinds of so-called “cone cells” on our retina, which are responsible for our ability to perceive colors. Each type of cone is sensitive for a particular spectrum of the light’s wavelengths, oftentimes referred to as red (long wavelengths), green (medium wavelengths) and blue (short wavelengths) spectrums. All other colors that we perceive, are mixtures of those three basic colors, or wavelength spectrums, respectively. As soon as one or more of the three types of cones is not (completely) able to perceive and correctly transmit the wavelength, i.e. the color information, the affected person cannot distinguish between colors in the same way as unaffected people can. Depending on how many of the cone cell types are missing or defective, the deficiency is called

  • Monochromacy (there’s only one type of cones or no cones at all),
  • Dichromacy (one type of cones is missing) in the variations Deuteranopia (green blindness), Protanopia (red blindness) and Tritanopia (blue blindness)
  • Anomalous Trichromacy (all three types of cones are there, but at least one is defective).

The most common forms of color vision deficiencies involve missing or defective cone cells for red and green perception. Regarding Anomalous Trichromacy, the most common variation is Deuteranomaly (“green weakness”). People suffering from Deuteranomaly (primarily males) have all three types of cones, but one of them is defective. Women are much less affected by color vision deficiencies because they have more X Chromosomes which contain the main part of genes that are responsible for visual perception.

Deuteranomalous people have particular problems to tell the difference between greenish colors because the cones which are responsible for the medium-wavelength light are defective and cannot correctly perceive the color information for green. Those “green weak” people cannot easily distinguish between hues in the spectrum green, yellow, orange and red as their color perception is slightly skewed towards red.

A Life without Green

In everyday life, people that suffer from green weakness generally have no big problems in distinguishing between particular hues, as they can judge colors in real-life objects (such as traffic lights) by including additional information such as position, shape and, of course, previous knowledge. However, if additional distinguishing information is missing, the affected person can be quite helpless in identifying certain colors properly.

Icons are a good example for artificial objects, which often make use of colors to convey meaning. Especially when it comes to visualizing abstract metaphors, using colors is very popular, as there are established codes concerning the meanings and common use of particular colors, depending on the cultural context. Probably the best example are the colors red and green. If we try to illustrate the meaning of “bad”, “negative”, “decreasing”, for example, we most likely will use red within that icon, as red expresses all those attributes in the western countries. Green, on the other hand has the diametrically opposed meaning – it stands for “good”, “positive”, “increasing”. Unfortunately, “green weak” people won’t be able to distinguish exactly those two hues properly. A dark green might as well be a red tone, a light reddish shade could be green. The following image illustrates how a deuteranomalous person would see basic colors and shows an example of warning LEDs:

Red-Green Blind

Improved Accessibility: Designing Multiply-Encoded Icons

The example above demonstrates the difficulty for “green weak” people to distinguish between two objects if color is their sole distinctive feature. Therefore, in icon design, other visual aspects have to be regarded to make icons properly distinguishable. Those additional aspects can include, for instance, the position of an icon overlay or simply the shape of the icon. Instead of using two colored LEDs to visualize the two states “OK” and “Danger” as seen in the example above, we could use a red checkmark for the OK status and a red cross for the Danger status. Even when the colors green and red wouldn’t be recognized by a person with color vision deficiency, the shapes provide reliable information for interpreting the icons.

One other way of making two icons distinguishable is by making use of the previous knowledge of the observers. The model of traffic lights is well-known and we need no color information to know that the upper light stands for “Stop” and the lower light stands for “Go”, respectively for “Bad” and “Good”.

Multiple Encoding

In addition, it is not only reasonable to add more information to an icon to support colorblind people, it makes sense for people with normal vision as well. In case of an icon toolbar, e.g., it is very hard to spot differences between two or more icons, if they only differ in color.

An icon should always be clearly distinguishable from others used in the same context. While working with a computer application, it is very important to identify the meaning of an icon instantly. It can be very annoying, exhausting and time-consuming for users being forced to invest mental effort into considering which icon to choose from a palette of similar looking icons. The workflow is interrupted because the concentration of the user is drawn off the current task. Therefore, in order to support all users in quickly distinguishing between individual icons, effort should be invested in equipping each one with an individual outer shape that sets it apart from other icons in the same context. In fact, icons should not make users think – instead they should provoke the intended interpretation at the first glance.

Invisible Colors

In other cases problems are not due to the fact that colorblind users cannot distinguish between two or more icons, but rather because certain parts of an icon become “invisible”. This is the case when two colors, which are distinguishable for normal-sighted people, but not for colorblind people (see above) are used for parts of the icon or the background, respectively. This is actually the principle of the well-known color blindness tests in which digits are presented as sets of little colored dots in front of a different colored background: colorblind people cannot properly perceive those digits. Transferred to icon design, this problem can be illustrated with the following example:

Invisible Colors Problem

As can be seen in the example above, in certain cases the selection stroke of an icon can become (almost) invisible for colorblind users if inappropriate colors for stroke and background are chosen. Usually, the icon designer has no influence on the color of the background on which the icon will be placed unless he is responsible for the complete screen design, so he should make sure to ask for screenshots or the color value of the background to be able to use the right stroke color.

Invisible Colors Solution

Avoiding icon design flaws

So how can an icon designer avoid making design flaws that might lead to icons being misinterpreted by color vision impaired people if he isn’t color vision impaired him- or herself? At Centigrade, we use Color Oracle as a final step of quality assurance process before sending out icons to our clients. The tool can simulate the three extreme variations of Dichromacy color blindness which are Deuteranopia (green blindness), Protanopia (red blindness) and Tritanopia (blue blindness). As we use Macs as well as PCs for creating icon designs, Color Oracle is the perfect choice – it is written in Java and therefore platform independent. But not in every case it is appropriate to replace colors in order to meet the need of colorblind persons. Always using the colors that match best for those people would destroy the aesthetic aspects of the icon. The other way to make icons easier to distinguish is, as mentioned above, by adding more information. This is not only advisable because of the problems that color vision deficiency affected people have to face, it rather should be a routine part of the icon design process.

We at Centigrade have internal reviews before sending out any icon to a customer and check them – among other things – for quality aspects concerning the distinguishability. The outer shape of an icon is a very important characteristic and we test our icons always in “real-life” cases, e.g., built-in in the later screen design or, if it is not available, in a test environment. Particularly icons that are used close to each other, in three views, e.g., have to be tested in a comparable constellation, because only then we can detect if some icons have a similar shape and could accidently be mixed up.

Conclusion

The challenge when designing icons (and user interfaces in general) for a wide audience is the difficulty to meet everyone’s demands. This is often referred to as caring about a GUI’s accessibility. In case of icon design it is about keeping the balance between finding a distinctive shape and still maintaining a harmonic and “icon-like” form that is well identifiable and using colors that are both aesthetic and well distinguishable.

Looking at the topic from a higher level, it is important to understand what accessibility means and how this provokes certain design guidelines in general. Interested readers might want to have a look at the W3C’s Guidelines on Web Content Accessibility to dig deeper into the topic.

Want to know more about our services, products or our UX process?
We are looking forward to hearing from you.

Senior UX Manager
+49 681 959 3110

Before sending your request, please confirm that we may contact you by clicking in the checkbox above.