How Green and Cyan become a Yellow and Purple Contrast or a Turquoise Sequence.
In this writing, I highlight how data visualization insight can be gained by examining trends resulting from color deficiency tests. Specifically, I discuss how an area chart with a Green and Cyan color harmony transforms itself under these color blindness simulations. It can either convert to a Yellow and Purple combination, or step through phases of Turquoise. This is a recent discovery of mine. In the past, I was satisfied that individuals with color deficiency could distinguish between each individual color element in the visualization. Previously, I had not realized that the color deficiency simulations actually produced color schemes that led to different visual conclusions about the data. Individuals with normal color vision can view an abstract transitional color scheme akin to the natural world. People with Protanopia and Deuteranopia color deficiencies might explore a contrasting color scheme while individuals with Tritanopia potentially travel through a single hue sequence. Each story provides a different perspective about the data. You can use these insights to enhance or improve your final visualization product. Let’s begin by examining the normal color vision perspective of a Green and Cyan color harmony.
The Color Wheel and the Green and Cyan Diad Color Harmony:
Isaac Newton is credited with creating the Color Wheel concept when he closed the linear color spectrum into a color circle in the early 1700s. Over the centuries, artists and color scientists amplified his concept to include color harmonies. A Dyad color harmony combines two colors that are two colors apart on the color wheel. Below I show the Red-Green-Blue Color Wheel based on the concept that Red, Green, and Blue (RGB) are the color primaries for viewing displays like what we see on our desktop and mobile devices. I also include the Dyad Harmony of Green and Cyan that is going to be highlighted further in this writing.
Creating a Green-Cyan Dyad Color Scheme with Adobe Color:
By selecting the Custom function in the Adobe Color online app, I can quickly build a Green-Cyan Dyad color harmony. I show these results below. Adobe Color represents each of the colors in Hex code notation. For those unfamiliar with the concept, a color Hex code is a hexadecimal way to represent a color in RGB format by combining amounts of Red, Green, and Blue to note that specific color. The Green colors are #15A82C and #8BDF99 while the Cyan colors are #A1EEFE and #10ADC2. Adobe Color creates color schemes with five colors, so I added #FFFFFF as the middle color.
Next, I can create a Green-Cyan color scheme. I remove the middle White (#FFFFFF) color and flip the Cyan colors of #A1EEFE and #10ADC2 to match the Green color progression from dark to light. I name the final color scheme Green-Cyan.
Applying Green-Cyan Diad to an Area Chart Visualization:
I can now apply Green-Cyan to an area chart visualization that depicts sales in the East and West zones of Region 1 (shown in Green) and the East and West zones of Region 2 (shown in Cyan). I show these results below.
My next step is to examine how the Green-Cyan area chart might appear to individuals with color deficiencies. Let’s first begin with a review of basic color deficiency concepts.
Exploring Color Deficiencies:
In humans, there are three types of photoreceptors or cones where each is sensitive to different parts of the visual spectrum of light to facilitate rich color vision. If one or more of the set of cones does not perform properly, a color deficiency results. A red cone deficiency is classified as Protanopia. A green cone deficiency is classified as Deuteranopia. A blue cone deficiency is classified as Tritanopia. Software is available that simulates color deficiencies. The Color Blindness Simulator (Coblis) tool is a freely available online app that serves this purpose. Let’s use Coblis to examine how the Green-Cyan area chart appears under Protanopia, Deuteranopia and Tritanopia color deficiency tests. I show these results below.
A hasty evaluation of these simulations indicates that the Green-Cyan Area Chart passes color deficiency tests. Individuals with Protanopia, Deuteranopia, and Tritanopia can distinguish four different color elements in the area chart visualization.
The Difference in Data Stories between the Color Deficiency Tests:
A more detailed examination of the resulting area charts indicates the three data stories are being told according to the color schemes. I describe each of these in detail below.
The Normal Color Vision Data Story:
The Normal Color Vision version depicts a transitional color scheme between the Region 1 and Region 2 data sets. The Green-Cyan area chart visualization is like a transition from land to sky that might be found in nature. I show this comparison below with the Green-Cyan color harmony noted.
The Protanopia and Deuteranopia Vision Data Story:
The Protanopia and Deuteranopia versions depict a contrasting color scheme. Both versions have a Yellow Orangish color opposing a Purple Bluish color. I can use the online Adobe Color app to examine the color harmony of the Protanopia and Deuteranopia versions. The results, shown below, depict the Yellow Orangish and Purple Bluish colors nearly opposing each other on the color wheel for both cases.
Two colors that oppose each other on the color wheel are defined as a Complementary color harmony. The Protanopia and the Deuteranopia visualizations are telling a data story of contrasts between the Region 1 and Region 2 data sets. Below, I include a detailed view of the respective color deficiency visualizations with the corresponding complementary color harmonies.
The Tritanopia Vision Data Story:
The Tritanopia version depicts a Turquoise monochromatic color harmony. A Monochromatic color harmony combines one hue (a 100% saturated color) with various tints, tones, and shades of that hue to create a color scheme. A tint is defined as a hue mixed with White while a tone is designated as a hue mixed with Gray and a shade is created when a hue is mixed with Black. On the color wheel, a Monochromatic color harmony consists of colors that form a straight line from the center of the wheel to the outside edge of the wheel. I use the Adobe Color app to explore the color harmony of the Tritanopia color deficiency visualization. I show these results below.
The Tritanopia visualizations tells a data story of an ordered sequence of sales data across both regions: Region 1 and Region 2. Below, I include a detailed view of the Tritanopia color deficiency visualization with the corresponding monochromatic color harmony. Although the sequence is ordered, we can also observe a contrast between the Western and Eastern regions.
Summary and Concluding Remarks:
In this writing, I have shown how a Green and Cyan area chart visualization transforms itself under color blindness simulations. For individuals with a Red cone deficiency (Protanopia) or a Green cone deficiency (Deuteranopia), the area chart appears to have a contrasting Yellow and Purple color scheme. For those with a Blue cone deficiency (Tritanopia), the same visualization looks like a Turquoise sequence. Three different data stories are told depending on the resulting color scheme. The process of colorizing a data visualization is a journey that can yield surprising results.
In your own practice of data visualization, you might decide that you prefer one of the color deficiency simulations over your original color scheme design. This has happened to me several times. In September 2022, I discussed a similar adventure in “A data visualization recovery from failed color deficiency tests”. For additional writings on my other colorization efforts, please see my prior articles for UX Collective and Nightingale as well as my 2016 book on “Applying Color Theory to Digital Media and Visualization” published by CRC Press.
