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



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
A warm-mix theme
Deuteranopia
A warm-mix theme shown with red-green color-blindness simulation
Tritanopia
A warm-mix theme shown with blue-yellow color-blindness simulation
Grayscale
A warm-mix theme shown with grayscale simulation

The I-See-U Color Theme Library

Right-click > copy > paste these themes into your graphics file.


Warm Themes

Theme A2

Analogous

Theme Tr1

Triadic

Theme R1

Red Complimentary

Theme R2

Red Complimentary


Warm Mix Themes

Theme C1

Complimentary

Theme S1

Square

Theme G1

Split Analogous

Theme G2

Triadic Analogous


Cool Mix Themes

Theme T2

Tetradic

Theme S2

Square

Theme C2

Complimentary

Theme T1

Tetradic


Cool Themes

Theme SC2

Split Complimentary

Theme S2

Square

Theme Tr2

Triadic

Theme A1

Analogous


I-See-U  Color Scheme Case Studies

Do the the I-See-U color schemes work in practice? The short slide deck below studies that question.

Color Theme Applications