Color Blindness and Color User Interface Issues

Color Blindness and Color User Interface Issues

Color coding is commonly used in office applications such as word processing, spreadsheets and presentations. For a person with color blindness, instances where color cues are used to highlight important details can result in common frustrations. When "the boss" is color blind, it may be common knowledge in the workplace that presentations and reports need to be tailored for color accessibility, however the problems extend far beyond just management with approximately 5% of the population, the majority of which are men, affected by some degree of color vision deficiency.

One example of a common frustration is the use of "red-line" documents to indicate where changes (such as insertions, deletions, edits, etc) were made in a document. For people with protanomaly or protanopia, shades of red appear darker and more similar to black, creating an obvious problem when using the color red to indicate text editing. In some applications it is possible to change the edit color, but unfortunately there does not seem to be a universal software configuration to make red-lined documents more accessible.

In another example, color coding is often used in spreadsheets to draw attention to specific cells. The yellow highlight function is a good color to choose, due to its near universal perception as a bright color. However from an aesthetic point of view, the bright yellow color is jarring and unpleasant, and therefore it is common to see spreadsheets marked up using pastel shades such as green, pink and light red. Unfortunately these are all examples of the kind of subtle shading that can appear to be shades of gray when viewed by a person with common red-green color blindness. To avoid creating such problems it is a good practice to stick to shades of blue and yellow, and when using any of the "confusion group" including green, purple, brown, or red, ensure the brightness of the color is significantly different from any other shade drawn from the same set.

Another problem, which is notorious for making information inaccessible to people with color deficiency, is the use of color coding in charts and graphs. For example a pie chart may be presented in on a slideshow with a color-coded key. This setup can be extremely vexing for a person with color blindness as it requires the person to accurately identify subtle differences in color at disparate locations across the screen, a recipe for misunderstanding. Ideally, pie charts and bar charts should use contrasting textures in regions in addition to colors, and use direct labelling of each section rather than a key. In the case of graphs, use of various line weights and styles can greatly benefit ease of understanding across multiple vision-abled persons. Using line styles alone it is possible to achieve an overlay of up to 5 lines without significantly compromising readability. Try using a combination of solid, dashed, dotted, dot-dashed and dot-dot-dashed lines in your next graph.

Finally, it is important to be aware and to test methods of improving office document accessibility well in advance of when it's needed. The time to be learning how to make graphs properly is not when you're under a tight deadline. Next time you have a couple minutes to spare, consider opening up your spreadsheet editor and making some trial charts and graphs to establish a good baseline for best practices in visual communication.

Back to blog