Back To Color Design Guide Menu

Color Responsiveness

[Author: Text & Illustration: Bill Fischer]

Overview

Responsive, universal, color goes beyond simply making visual media accessible. It aims to create a quality experience for person's with both typical and impaired vision. Illustration, graphic design, video, mixed-reality, and photography should respond to a wide range of sight-abilities. It should be consistently produce-able across print and digital production processes.

Sight Impairments Addressed in the Themes

Color blindness (red-green being the most common by a large measure)
Blocked visual fields (caused by conditions such as macular degeneration, glaucoma, and diabetic retinopathy)
Photophobia (largely associated with migraine conditions)

The I-See-U Universal Color Themes

These color themes will respond to any sight-ability or production method. There are six guiding principles and and accompanying metrics for which each color combination must meet. They are outlined below.

a color wheel where the reds and greens a dulled

(1-3) The I-See-U Color Wheel

1. Optimized for both CMYK offset printing, and RGB digital production methods.

2. Aims to provide a quality experience for both red-green and blue-yellow color-blindness.

3. Colors are in a saturation range that are not likely to negatively affect persons with photophobia and other light sensitivity challenges.

a color theme with the 7:1 contrast area pointed out

(4) Min. Contrast for Text

4. Color combinations marked with a 'T' meet the 7:1 minimum contrast WCAG AAA standard that optimizes readability for all sight-abilities.

a color theme with the 16:1 contrast area pointed out

(5) Max. Contrast Control

5. Color combinations marked with circles remain below the maximum contrast ratio of 16:1 per the WCAG AAA standard to avoid graphical vibration and eye strain for persons with Photophobia and other light sensitivity challenges.

a color theme with the 3:1 contrast area pointed out

(6) Min. Contrast for Graphical Objects

6. Color combinations marked with circles meet the 3:1 minimum contrast WCAG AA requirement for graphical objects. I am also applying this standard to any visual element in any use-case scenario to qualify as 'signal'.

Theme Testing

The images below demonstrate how every theme was tested for quality and accessibility using the Photoshop and Silktide digital simulation tools. The two most common color-blindness disabilities are Deuteranopia (red-green) and Tritanopia (blue-yellow). Persons with light sensitivity challenges will often use gray-scale filters.

full color