Color Cognition

[Author: Text & Illustration: Bill Fischer]


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.

a smart phone with a website on the screen in full color

Original Color Scheme

a smart phone with a website on the screen in grayscale

Grayscale Color Simulation

a smart phone with a website on the screen in red-green color-blind simulation color

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.

Yellow, green, red, and blue color squares shown in 3 color-blind simulations

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.

One image with  a graphic popping off a gray background compared to the color-blind version where the red graphic is very dull.

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.

New Color Language

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. 

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.

Universal Color Palette

I-See-U Universal Palette

Universal Color Palette with Colorblind Filter

Red-Green Color-blind Simulation

Full color palette

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.