Color Cognition
[Author: Text & Illustration: Bill Fischer]
Overview
Color cognition describes the effect that color choices can have on the cognitive load required for persons to understand visual media. This typically involves choosing color combinations that will maintain the desired visual hierarchies for all sight-abilities. These hierarchies will typically contain information that falls into the categories of signal and noise. This concept is rooted in the science of Information Theory, which studies the transmission, processing, extraction, and utilization of information, and was was formalized in 1948 by Claude Shannon.
Measuring The Effect of Color on Cognitive load
There are tools available that artists designers can use to check visual hierarchies for various sight-abilities. The examples below used Photoshop's built-in hue and saturation adjustment and color-proofing tools, to create grayscale and red-green color-blind simulations for the The EPIC Project website (external link). Using these tools aims to optimize cognitive load by maintaining a consistent visual hierarchy for color-blind persons and those with photophobia that may be using a grayscale filter.
Original Color Scheme
Grayscale Color Simulation
Red-Green Colorblind Simulation
Signal and noise
We can think of color as a signal that draws attention to information. That information may be a narrative, an emotion, a description, or a data set. Noise is color that distracts from the information. Depending on a person's color-abilities, environment and technology, colors can shift indiscriminately. When a color shifts in a way that diminishes the attention it attracts, the signal is lost and we are left with noise.
New categories for defining color signals need to be developed if they are to be universal. For that reason, I am focusing this guide on the concept of attention. That is, prioritizing the amount of attention a color can attract through a variety of hue, saturation, and value shifts, relative to its adjacent colors.
This chart demonstrates the color shifts that are experienced by persons with color-blindness and those that view media in grayscale. Yellow and blue best maintain their saturation, and thus their ability to attract attention.
This Illustration demonstrates what can happen when the color red is used to create a strong signal through the attention it commands in juxtaposition over a neutral background. The signal is greatly weakened for a red-green colorblind person as shown at the bottom.
The I-See-U Universal Color Palette
Applying color to images and graphic layouts that responds to every color-ability requires assessing colors by the attention they will attract across that spectrum. This includes four types of color-blindness as well as both digital, and print color production systems.
The I-See-U Universal color palette adjusts the saturation of colors to reflect the attention they will have across the red-green and blue-yellow color-blind spectrums.
It adjusts reds and greens to be less saturated so images will be optimized for both red-green color-blind and full-color sighted persons. It approaches color in terms of the attention it brings versus its hue, saturation, or brightness.
The most saturated colors have also been toned down within the range that can be achieved with offset (CMYK) printing.
A Side by Side Comparison
The color palette comparison below demonstrates how the I-See-U universal palette matches the red's and green's color attention to a color-blind simulation. The full-color palette shows how, when not adjusted, the red's and green's attention factors will not translate correctly for a red-green color-blind person. These Universal Palette Colors are restricted to those that can be achieved using the CYMK offset printing process.
I-See-U Universal Palette
Red-Green Color-blind Simulation
Full Color Palette for print & web
Using The I-See-U Universal Color Palette
These are meant to be starting colors. As your image composition evolves, there are several additional methods that can be employed to add customization while maintaining the desired signal and noise balance.
There are many colors that exist between the swatches shown that can be created.
Yellows and Blues can be more saturated or desaturated as desired.
Greens and reds can only be desaturated.
Cyans, magentas, yellow-greens, and oranges can be slightly saturated or desaturated.
Perform constant contrast and red-green color-blind testing as adjustments are made with the tools listed on the Color Tools page.