Universal Color

[Author: Bill Fischer]

Overview

Universal color goes beyond simply making images and layouts discernible for color-blind persons to providing an equal quality experience for the color typical and the color-blind.

Attainability

There are 7 types of color-blindness that, in total, that affect 8% of men and .5% of women. This is the attainability challenge for universal design, where readability of text and understandability of images for all color-abilities is the goal.

Common Types of Color-blindness

Deuteranomaly: 2.5% (partially red-green)

Deuteranopia: .64 % (fully red-green)

Protanomaly: .55% (partially red-green)

Protanopia: .52% (fully red-green)

Total: 4.21% (99.9999% of all instances)



Rare Types of Color-blindness

Tritanomaly: .0002% (partially blue-yellow)

Tritanopia: .0001% (fully blue-yellow)

Achromatopsia: .00003% (no color vision)(this does not include persons using grayscale filters on digital devices that are designed to help with light sensitivity.

Total: .0003% (.0001% 0f all instances)

Photophobia

An unfortunate term for a not-so-rare condition that essentially describes vision that is abnormally light sensitive. It does not mean fear of light or photographs. Persons with this condition can experience migraines and flickering from images and text with high value and hue contrast (over 16:1 ratio). They will typically use accessibility features that dim the brightness and convert screens to grayscale.

The I-See-U Universal Color Palette

Applying color to images and graphic layouts that work for every color-ability in every delivery system requires assessing colors by the attention they will attract across that spectrum. This includes 4 types of color-blindness, a multitude of sight impairments that dull vision, Digital, and print delivery systems as well as various room lighting scenarios.

The I-See-U Universal color palette adjusts the saturation of colors to reflect the attention they will have for red-green color-blind persons.

    • 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-litho (CMYK) printing.

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 grayscale and red-green colorblind testing as adjustments are made with the tools listed below on this page.

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 for a red-green color-blind person.

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


Responsiveness

Working With the I-See-U Universal Color Palette

Art and design that is meant to to be colorful, should be colorful and understandable for all persons regardless of their color-ability. The image should be color-responsive. Shown below are 2 images that I created to demonstrate how:

  1. High contrast images remain understandable regardless of color-ability
  2. Adjusted colors towards the high saturation areas in the I-See-U color palette will result in images that remain colorful regardless of color-ability.
  3. Starting with this palette, then testing and adjusting the image using the tools listed at the bottom of this page, will result in a responsive color scheme.

Illustrations by Bill Fischer.

#1 Original: red-green color-blind filtered

Colorful portrait Illustration that has been red-green colorblind filtered. It appears less colorful than image 2.

#1 Original: this color scheme not been filtered.

Colorful portrait Illustration

#2 Adjusted: red-green color-blind filtered

Colorful portrait Illustration that has been color-shifted toward blues and yellows and red-green colorblind filtered. It appears more colorful than image 1.

#2 Adjusted: towards yellow & blue not filtered.

Colorful portrait Illustration that has been color-shifted toward blues and yellows

#1 Original: blue-yellow color-blind filtered. It's a very rare condition.

Colorful portrait Illustration that has been blue colorblind filtered. It appears more colorful than image 2.


#1 Original: gray filtered. Gray filters are built into the accessibility control of digital devices and are used by persons with light sensitivity issues.

Colorful portrait Illustration that has been color-shifted toward blues and yellows and all colors colorblind filtered. It appears less contrasted than image 2.

#2 Adjusted: blue-yellow color-blind filtered. It's a very rare condition.

Colorful portrait Illustration that has been color-shifted toward blues and yellows and blue colorblind filtered. It appears less colorful than image 1.


#2 Adjusted: gray filtered. Gray filters are built into the accessibility control of digital devices and are used by persons with light sensitivity issues.

Colorful portrait Illustration that has been color-shifted toward blues and yellows and all colors colorblind filtered. It appears more contrasted than image 1.

Cognitive Load

In the case of color, I want to think about the cognitive load on the designer attempting the extraordinary feat of achieving truly universal color schemes. The options are too complicated to hold in your working memory and your brain's executive function capabilities are no match for the design problem that begs to be solved. Considering for a moment that the human brain can only hold 4-5 bits of information in working memory. Trying to create a mental model of a universal color theory and all of the potential hue and saturation and value shifts for each color combination during the creative process seem like an impossible task.

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 in 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.

A Process

Continuous testing while applying color is the most productive approach for achieving universal color schemes. Images should remain easy to understand when tested. The more frequently you test your images during development, the more quickly you will solve the particular color design problem for any particular project.

Here are the color perception variations for just four colors and four types of vision. They are arrange according to their grayscale values from dark to light.

A color chart showing four colorblind variation of four colors: red, green, blue, and yellow.



Here are all of the color combinations for those four colors and four types of vision. They are arranged according to their grayscale value contrast from least to most.

A color chart showing all possible combinations offour colorblind variation of four colors: red, green, blue, and yellow.

Testing Tools

Adobe Photoshop and Illustrator

Colors can be tested in this software as gray scale (using a hue and saturation adjustment layer), and two types of red-green color-blindness: Protanopia and Deuteranopia, using the proof set-up preview.


Chromatic Vision Simulator

This color-blind simulation app runs on both the Android and iOS mobile operating systems. with the app running, designers can simply aim their phone camera at any digital display, physical print, object, or environment and it will simulate three types of color-blindness (with side by side options). (free)


ColorPick Eye Dropper

This is a zoomed eyedropper & color chooser tool that allows you to select color values from webpages. It is a Google Chrome extension.


Wave Accessibility Evaluation Tool

This Chrome and Firefox Accessibility Extension has a built in tool that allows real time color adjustment and assessment for most websites in its 'Contrast' section. (free)


Enchroma Color-Blind Test

This on-line color-blindness test can determine if and what type of color-blindness a person may have. They also produce corrective eyewear. (free)


WebAIM Color Contrast Checker

This online text color tool allows designers to check compliance of text, graphical object and background colors to the WCAG AA and AAA standards that have been adopted by the ADA. (free)

Paletton Color Palette Simulator

A Color Palette builder that provides color-blind previews (the vision simulation button is small and in the lower right corner).


Poor Environmental Conditions

It's a good idea to test images in a brightly lit room on a dimly lit display (such as an overhead projector aimed at a white board). Also, take your test device into outdoor light.


Shifting Display Colors

Colors can render dramatically different depending on the display. It is important to test colors on as many as possible.

  • Low cost desktop displays and laptops can be low contrast
  • Apple products use premium technology. There beautiful colors do not represent the norm.
  • Android devices and un-adjusted flat TVs are typically very saturated. Some colors can shift dramatically or turn almost fluorescent on these.