Line, motion, space, texture, size , form, shape, typography, and color.
As a member of the 9 structural units, or elements of visual interaction design, the role of color is integral to the way we communicate, parse, and enhance information on and off the screen. In an attempt to simplify human interaction with the digital interface, designers have pursued the style of a “flat UI”. This bare-bones approach relying mostly on rectangular shapes and solid, flat color is meant to place a user’s focus on content. The visual shift from skeuomorphism to flatland also helped to foreshadow a product’s ease-of-use by dramatically simplifying how the interface looked.
This visually radical approach gave digital products a fresh start by further visually distancing themselves from previous versions. Their flaws and ‘baggage’ of poor experience and software bugs. The poster child of the new, approachable flat UI was introduced to the mainstream when Microsoft unveiled their Metro design language. The typography-based design language was applied to the new Windows 8 Start screen as part of the first pre-release of Windows 8 in the fall of 2011.
The Windows 8 Start screen, wearing Metro, a typography-based design language by Microsoft.
It is critical to address how we use color, so design is accessible to everyone, in particular those with a colorblind deficiency.
Rely on typography, you must. The Windows 8 Start screen as seen by a dichromat, color blind individual. Now, where do I set my alarm?
By pushing designers to rely on color as their primary differing design element, the hallmark of the flat UI, has become the perfect incubator for confusion.
Take away too many design elements, and our visual affordance weakens – all for the sake of a visual design trend.
Not everything we see is the way others may see it. This is a large reason for the 10th element of visual interaction design: Visual Empathy, the vicarious experience of understanding another person’s condition (situation, feelings, and motives) by what they experience.
The National Institutes of Health estimates that 1 in 12 men and 1 in 200 women interpret color differently due to some form of color blindness. Designing for color blindness (aka Daltonism) is an example of how designers can practice visual empathy and learn to experience the world from someone else’s perspective.
There are ways a designer can compensate for our color deficient users. It begins with making strategic decisions about how we use color and how we can make better use of other visual elements in our design toolbox.
The Three Blind Types
There are 3 (out of many) types of color blindness that are severe enough to cause visual confusion on a screen. Dichromats that are red compromised are called protanope, green compromised, deuteranope. Tritaneropes are those with blue compromised.
According to a New Yorker Interview with Facebook C.E.O. Mark Zuckerberg, Facebook’s dominant color is blue due to his red-green color deficiency. The dichromat explains: “blue is the richest color for me—I can see all of blue.”
An example of choosing a color with intention. When passed through a deuteranope and protanope simulation, the Facebook blue remains true to its hue.
Along with the digital interface, there are other types of graphical information that are problematic when represented by color only.
Reliance on color only to represent graphical data commonly occurs when space is too constrained to make use of additional visual cues (ex: labeling).
This type of hue intensive information or “color data” can be found in:
Complex maps — topographic data, weather, traffic info, and subway lines
Detailed drawings — scientific illustrations, and engineering plans
Infographics — pie, bar, scatter, and flowcharts
Topographic data as seen by a dichromat. The use of shadow and highlight help preserve some of the elevation details, preventing the appearance of a completely flat island.
The original image: http://commons.wikimedia.org/wiki/File:Topography_of_Bali.jpg
Only the areas of abnormal (mild) dry watering needs would be met if this map were used by a dichromat. The original image: http://www.agweb.com/article/3-reasons-youll-love-agwebs-new-weather-section/
Unlike our subconscious mind where we can multi-task, research shows us that the conscious mind can focus on only one task at a time. Even with normal vision, gathering like colors from a complex image and analyzing what that color means in the area it represents, is difficult to do simultaneously.
The Red and Green subway lines of the Massachusetts Bay Transportation Authority as seen by a dichromat. The original image: http://www.mbta.com/schedules_and_maps/subway/
With tritanomal (normal) color vision, we can tease apart different colors, but our ability to identify the name of a color is not the same as seeing the difference in color
Identifying color, labeling, multi-tasking
without labeling, and matching the same colors in distant places is extremely difficult. We are now forced to multi-task by also asking ourselves: “What does this color mean?”. Psychologically, people with normal color vision attribute meaning to color (ex: Red=Hot). For those with color blindness, knowing what a color or pattern means and what it represents, is challenging.
“Yes” and “No” as seen by a dichromat.
The original image: http://www.unaids.org/en/dataanalysis/datatools/aidsinfo
Deuteranope simulation of the US service economy.
The original image: http://earlywarn.blogspot.com/2010/05/what-we-spend-our-economy-on.html
When the colors in the legend are indiscernible, a legend becomes useless. To a deuteranope knowing which line represents: “Utilities, Healthcare, Food Services and Accommodations” within the US service economy chart is unclear.
There are other tools available to help users differentiate colors on a screen. For instance: magnification, bringing focus to all instances of a single color, using additional visual treatments, like altering the thickness or area of the shape (for example, a glow or shadow).
A “bilingual” traffic light that communicates by color and shape.
When elements and controls can not be differentiated in shape, utilizing differentiating color for ALL users becomes vital. Here’s how you to do this.
Simulating the real experience
At Cooper, I worked on the interface of a diagnostic imaging device that had a strict color and space constraint challenge which limited and excluded additional visual treatments.
A cardiologist will use an imaging device to measure and treat any abnormalities found in the vessels and chambers of the heart. An example may be discovering plaque burden within an artery, which could compromise blood flow from the heart. Analyzing a live view of a patient’s heart clearly and efficiently can be a life or death situation.
In the iLab user interface measuring a vessel must be done so as to not occlude important image data (ie: vessel abnormalities). Since several measurements may be taken on top of one another for the same image, it was necessary to differentiate each measurement by color.
A cross-sectional measurement (seen in orange and teal) drawn on a live ultrasound image of a heart vessel. Plaque is represented by a cluster or mass of white, similar in shape and color to the texture of the interior vessel wall.
To ensure the measurement lines would be visible against the image data and discernible to anyone, the entire interface was tested using simulations of the three major types of color blindness (Deuteranope, Protanope, Tritanerope). These colors needed to be distinct enough from one another while maintaining their legibility against black and on top of a complicated ultrasound image.
Weak Color Combinations
The following four truths about color will help you to choose colors that will test well for all major color blind types:
1. It is difficult to distinguish certain colors that differ only in their red OR green component. For example, blue with violet (red+blue), green with brown (green+red), and red with brown (red+green).
Simulations of color pairs that share the same red or green.
2. Compared to vivid colors (those with higher saturation), low saturation colors are especially hard to distinguish. For example, pale blue with pink and gray with pale green.
Deuteranope simulation of low saturated colors
3. The lack of red or green cone cells make Dichromats (deuteranope and protanope) rely more on the information from the blue cone cells. Thus, they tend to be more sensitive when distinguishing bluish hues. For example, red with green or yellow with yellow-green (chartreuse) are almost the same color. But green with bluish green (teal) can be seen as completely different colors.
How a Dichromat interprets reds & greens the same.
How a Duetanerope interprets blue hues differently. For a Tritanerope the green and blue-green pair are indistinguishable.
4. To compensate for their lower recognition of hue, color blind people tend to be more sensitive to the differences in brightness (value) and saturation (chroma). Use these attributes of color to increase contrast and legibility.
Designers, especially those responsible for the visual experience, have the opportunity to become “the great visual equalizers” in product design. When we design with empathy, we give ourselves a chance to differentiate what we create by how we choose to design. A truly thoughtful design whether it be flat or dimensional, will have been crafted from design decisions in favor of inclusion, by making our work accessible to everyone.
Online simulators, plug-ins and additional information
Upload and test your image files for the 3 major color blind types in JPEG or PNG or download their Photoshop plugin:
Upload an image to test up to 8 color blind types:
Filter a live URL to test against 8 color blind types including 3 coverage filters:
Simulate your desktop with a full screen filter, independant of the software you are using:
Suggested color combinations for topographic data:
http://wearecolorblind.com/ Dedicated to making the world a better place for the colorblind with reviews of design tools and apps by colorblind designers.
Jayson McCauliff is a Principal Visual Designer at Designit San Francisco. By day, he designs interfaces, identities, and visual systems for companies such as Practice Fusion, Boston Scientific, Amgen, Pwc, and Intel. Outside of work, he spends his time painting, photographing, and adding color to the visual landscape of San Francisco.