Skip to content
Farbsehschwaeche.de
Foto einer Bibliothek Credit: unsplash.com/Susan Q Yin

Three rules for color vision deficiency inclusive design

The Association of Color Vision Deficient and Color-Blind (in German: IFFarb) has set as one of its goals "the development of more inclusive solutions for color vision impaired, color-blind and normal color-sighted people." However, before designing solutions for individual problems, it makes sense to define basic solution principles. This is what the IFFarb would like to achieve herewith.

Aim of the rules

The purpose of the rules is to make them universally applicable, if possible. The rules are defined in such a generic way that they are comprehensible, but not tailored to a specific application case.

In addition to universality in application, the rules must be designed to provide improvement for all kinds of color vision deficiencies and color-blindness. No variation shall be excluded, especially complete color-blindness (achromatopsia).

The rules should be inclusive, hence they should not provide a disadvantage for normal color vision people either. Ideally, those with normal color vision do not even notice that the respective solution is an improvement for people with color vision deficiencies and color-blindness, and may even benefit from it.

The three rules for color vision impaired design

1.    Symbols instead of colors
Use symbols and signs in preference to colors to describe content or objects.

2.    Brightness contrast instead of color contrast
Use color combinations that differ sufficiently in brightness from each other.

3.    Use clear color descriptions
Use unambiguous and comprehensible color descriptions

Symbols instead of colors

Use symbols and signs in preference to colors to describe content or objects.

Symbols – with the meaning of semiotics [1] or sign theory - are used to describe content or objects unambiguously. The development and use of symbols and signs is considered a requirement for gaining knowledge in the first [2] .

The primary property of symbols is their geometric explicitness. Therefore, they work largely independent from the color design, implied that they can be clearly recognized via the brightness contrast.

If important information is to be delivered, this works best for color vision impaired and color-blind people by means of unambiguous symbols and signs. This works not only because many color combinations are indistinguishable for color vision deficiencies, but also it is known that color vision deficiencies and color-blind people tend to think in terms of shapes instead of colors. Colors do not have to be renounced, as long as they are combined with the appropriate symbols.

Examples of color vision impaired design using symbols

The most obvious examples of symbols are letters, numbers and characters in general. However, they also include universal symbols such as those found on remote controls and other hand-held devices. On/off buttons, volume controls, play, stop and pause buttons are recognized and understood worldwide and are also regulated in international standards [3] . Unique signs can also be found outside of these standards. For example, controllers of all important game consoles are symbol coded.

Traffic signs also cause no problems for the color vision impaired and color-blind, despite the use of colors. Colors are not used as a primary distinguishing feature and there are no signs in the traffic sign catalogs [4] that are differentiated solely by the color used.

Technical drawings are almost exclusively created with black and white depictions. All technical features are represented here using some sort of symbols and are therefore understandable regardless of language. In sectional views, the different materials can be recognized by the hatching patter [5] . There are similar symbol catalogs for each technical discipline. Examples are civil engineering drawings [6] and geological information maps [7] .

Furthermore, the well-established playing cards can also be mentioned. Both the French and the German card types are primarily distinguishable by symbols. In the case of the French hand, this is even mandatory, since only two different colors are used here. The board game Monopoly switched from color-coded meeples to shape-coded - in a broader sense spatial-symbols - several years ago.

Sources for symbols

Brightness contrast instead of color contrast

Use color combinations that differ sufficiently from each other in brightness.

If symbols are not suitable for differentiation, for instance in the case of colored surfaces and areas, the colors must differ from each other in brightness contrast. Color contrast is not sufficient here. Black and white or grayscale representation can be used as support. If it is distinguishable in grayscale, then the brightness contrast ratio is sufficient.

Brightness perception in the human eye works independently of color perception, even for color vision deficient and color-blind people. Under daylight conditions, the highly sensitive rods can no longer transmit information about brightness intensities. Instead, the less sensitive cones take over, which also enables the brain to obtain information about hue, color saturation and color brightness. While the comparison of the relative stimulation of all three cone types is necessary to determine the color itself, the impressions gray to white result from an equal stimulation of all cone types, and the brightness of a color depends on the cone stimulation. For the information "all cone types are stimulated equally", and also for the perception of a weak or a strong stimulus, it does not matter if someone has only one, two or three different cone types or if the absorption spectra of two cone types overlap strongly due to a genetic defect.

Colors can be described in different color models. The standard for screen applications is the RGB system, basically the definition via the brightness of red, green and blue individually. Alternatively, the HSL/HSV system can also be used. Here, the color is defined via the color angle, saturation and brightness. The brightness contrast can be determined here directly via the brightness information.

Examples of color vision design using brightness contrast

Digital content is very widespread today and its importance will most certainly increase in the future. One of the most important associations on the subject of digital content is the World Wide Web Consortium [8] . This association has published an extensive catalog of standards [9] to enable accessibility to the world wide web and its content for all groups of people, including those with physical disabilities and especially limited vision. Part 1.4.3 Contrast minimum [10] is of particular interest for color vision impairments. Here, the minimum brightness contrast ratios are defined for various use cases. These values can basically be used for all digital content and screen applications. Such brightness contrast recommendations also exist for printed products based on the CMYK color model [11] .

If several colors are required, they should be selected in such a way that the individual colors have a sufficient brightness contrast. This can be easily determined using contrast calculator tools [12] . Adobe, the quasi-standard manufacturer for graphics, media and web design, also offers professional tools [13] for color selection, where also the aspect of brightness contrast can be taken into account.

Especially in science communication, but also in balance sheets and all cases where data is visually represented by diagrams and charts, the aforementioned rule regarding brightness contrast is applicable [14] [15] . In the case of false color representations, for instance postprocessing of pure intensity representations (de facto B/W representations) with color, which are popular in science, it is indicated not to distort the previous brightness information. In the past, false color representations were common, which did not fulfill this requirement. Again, there are now extensive collections of tools [16] that address this very problem [17] .

In team sports, it is important to distinguish the members of the different teams. Especially for those where there is on-field interaction. These include the world's most popular sports such as football, basketball, ice hockey, rugby, American football, and also handball. The higher the speed of the game, the more important the clear differentiation of the teams becomes. In both ice hockey [18] and basketball [19] there are clear rules for the jersey selection of the opposing teams. These can be summarized as "one team plays in light-colored jerseys, the other in dark-colored jerseys".

Sources for brightness contrast tools

Clear color descriptions

Use clear and understandable color descriptions.

Often the color itself is of interest, as in the case of paint colors, fashion or vehicle lacquer. In this case, the color must be described clearly and comprehensibly.

Unambiguity is achieved when a name or color number can be assigned to each color and its shades. Traceability is achieved if it is evident from which color catalog the color number or name originates.

When working with general color names that do not come from a specific color catalog, the color name should make a clear reference to a well-known color name. Artificial names are not helpful because of the missing clear assignment to a defined color.

Examples of color vision impaired design using color descriptions

Probably the most original color description is the one about the color-providing pigment [20] . The ability to synthesize color pigments has only existed since modern chemistry. Before that, people had to rely on natural pigments, which limited the choice of colors drastically. This is also the origin of such color names as indigo yellow, purple, lead white and cobalt blue, thus the color name can be clearly assigned to a substance.

Depending on the color system, the basic color names are also unique. This is the basis of the ColorADD system [21] , which assigns a unique symbol to each of its primary colors red, yellow and blue. These symbols can be combined. In addition, there is a symbol each for black, white, light, dark and metal. There are a total of 50 different symbols available for color description.

In addition, there are several standards, and also manufacturer catalogs for colors. In Germany, the RAL color system [22] , which comprises over 200 color shades, is the most commonly used for technical applications. The unique color designation is defined by a RAL number. HKS [23] also offers a color system which was developed primarily for art and printing. The Pantone catalog [24] and FED/AMS standard 595 [25] are also established internationally.

It is helpful for color vision impaired and color-blind people if the color name is also clearly indicated. This applies to wall paints, artists' paints, and model paints, but also to sharpies and colored pencils for example. Unfortunately, this is hardly ever implemented for the latter two applications.

For screen applications, the W3C color catalog [26] is well established. Here, each color name is assigned an RGB value and thus is unique. It is also provided in the web standards that instead of an RGB value, the color name can be specified, and this is displayed directly.

Clear color descriptions are also important when it comes to marketing consumer goods for which the color design is relevant. Examples include fashion and vehicles - but the list can be extended. Here, clear color descriptions are very helpful for color impaired and color-blind people, or they might refrain from purchasing the product due to uncertainty. Almost every color vision impaired and color-blind person can tell anecdotes, where it came to "wrong purchases" or "missteps" in the color combination with other garments. Therefore, artificial words without at least one clear reference to a known color are a not advised.

Sources for unique color descriptions and definitions

 

Feel free to contact us!

Do you have questions, comments or would you like to exchange ideas on the topic? Are you missing a topic that we have not yet covered or would you like to add something?

Thomas Vogel joined Farbsehschwaeche.de shortly after it was founded. In his normal life, he is an engineer, lives in Herzogenaurach, and wants to actively contribute to ensuring that the needs of color vision impaired people are taken into account in everyday life. Before moving into industry, he was at the "Erlangen Graduate School in Advanced Optical Technologies" and therefore knows a bit about the physical background.

Markus Stahmann is one of the founders of Farbsehschwaeche.de. The web developer from Oldenburg wants to use the platform to promote more awareness of the problem and present the issue more to the public.