[Author: Bill Fischer]
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.
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)
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
Red-Green Color-blind Simulation
Full Color Palette for print & web
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:
- High contrast images remain understandable regardless of color-ability
- 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.
- 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
#1 Original: this color scheme not been filtered.
#2 Adjusted: red-green color-blind filtered
#2 Adjusted: towards yellow & blue not filtered.
#1 Original: blue-yellow color-blind filtered. It's a very rare condition.
#1 Original: gray filtered. Gray filters are built into the accessibility control of digital devices and are used by persons with light sensitivity issues.
#2 Adjusted: blue-yellow color-blind filtered. It's a very rare condition.
#2 Adjusted: gray filtered. Gray filters are built into the accessibility control of digital devices and are used by persons with light sensitivity issues.
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.
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.
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.
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)
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)
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)
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.