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 prescribed visual hierarchies in the media for all sight-abilities. These hierarchies will typically contain information that falls into the categories of signal and noise.

Measuring TheEffect of Color on Cognitive load

There are tools available that artists designers can use to check visual hierarchies for various sight-abilities. The example below uses 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).

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 communicates, emotion, information and attention. Depending on a person's color-abilities, environment and technology, colors can shift indiscriminately. When a color shifts in a way that changes the signal (the emotion, the information or the the attention) it receives, it begins to devolve into 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. Red 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.



COLOR-abilities

There are 7 types of color-blindness that, in total, that affect 8% of men and .5% of women. Photophobia (light sensitivity) is estimated to affect up to 20% of the population. This is the responsive design challenge for universal design for color, where readability of text and understandability of images for all color-abilities is the goal.

The Effect of Color-Ability on Color Attention

Because color hues can shift dramatically for persons with varying color-abilities, there is a limited number of color combinations that can maintain an effective signal and noise juxtaposition that works for all color-abilities. These relationships are dependent on the attention created by the color hues being maintained as the they shift.

Color-blindness

  • Total All ages: (4.5 %)
      • 8 % of men
      • .5 % of women
  • Deuteranomaly: 2.5% (partially red-green)
  • Deuteranopia: .64 % (fully red-green)
  • Protanomaly: .55% (partially red-green)
  • Protanopia: .52% (fully red-green)
  • Tritanomaly: .0002% (partially blue-yellow)
  • Tritanopia: .0001% (fully blue-yellow)
  • Achromatopsia: .00003% (no color vision)

Photophobia:

According to the National Institute of Health, Photophobia is a common yet debilitating symptom seen in many ophthalmic and neurologic disorders. It is defined as an abnormal sensitivity to light, especially of the eyes, and is reported in most all forms of migraine and many neuro-ophthalmic disorders. Persons with this condition can experience discomfort and flickering from images and text with high value contrast (over 16:1 ratio). They will often use accessibility features on digital devices that dim the brightness or convert screens to grayscale.



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 and full-color-abled 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 the 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 Univesal Palette

Universal Color Palette

Red-Green Color-blind Simulation

Universal Color Palette with Colorblind Filter

Full Color Palette for print & web

Full color palette

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.

  • There are many colors that exist between the swatches shown that can be created.
  • Yellows and Blues can be more saturated or desaturated.
  • 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.