Back To Color Design Guide Menu

Universal Color Lesson Plan

[Author: Bill Fischer]

Overview

This lesson is serialized in accordance with 'Bloom's Taxonomy' and integrates Debroah Meier's 'Five Habits of Mind' ... in the 'Understand' Section.

- Remember the legal liabilities, production methods, and biological factors that determine how we must, and can, design universal color experiences.
- Understand the concepts underlying an 'art and design citizenship' mindset that will encourage students to create for a visually diverse population.

- Apply digital simulation tools and internet searches to simulate the visual world as it is experienced by a variety of visual abilities.
- Analyze and evaluate the effect that universal design constraints have on the generation of color systems.
- Create art and design that applies the universal design constraints in a practical use-case scenario.

(1) Anticipatory Set

(a) Introduce The Premise

Premise-Universal Color

(b) Build Empathy

Ask each student to close their eyes, and hold up a finger (and leave it raised) for every 'yes' to the questions below. Then have them all open their eyes and hold up their hands. There will be a lot of raised fingers. This will let them know that these are not obscure conditions that we are designing for and that we are all touched, directly or indirectly, by variations in sight-ability.

Have you or someone you know...

Lived with color-blindness?
Had a migraine episode that caused light sensitivity?
Sometimes experienced vibrating text?
Not been able to pursue a profession because of color-blindness?
Had temporary vision loss due to surgery or injury?
Had situations where fatigue has compromised the ability to read text, charts or graphs?
Had situations where colors, images , or text were difficult to see on a phone due to bright outdoor light, or a dimmed screen?

(2) Remember: The Three Foundational Principles

Use a quiz or written exam to test students' understanding of the foundational principles of universal color design.

(a) Attainability

Review the definitions of and explanations for Color Attainability, including:

Production limitations
Color systems and light sensitivity
Situational limitations
Physiological impairments

(b) Responsiveness

Review the definitions of and explanations for Responsive Color Design including

Responsive color metrics
Universal Color Themes

(c) Cognitive Load

Use the I-See-U search function to find definitions of and explanations for: Cognitive Color Design including:

Signal and noise
A Universal color language
Universal color palette

(3) Understand The Why

Review and Engage in a discussion or writing assignment that is prompted by the following (five habits of mind) questions. Review the Legal and Occupational requirements for color as well as the Universal Color Case Studies prior to the discussion. Then, as a group, compare and contrast answers.

(a) Why is it important to create designs that will respond to persons with every kind of vision ability?

(b) Do you feel like applying universal color design will unduly restrict your creative options?

(c) How might a color-blind or light sensitive person experience a tree in Summer in comparison to a sight-typical person. And, how can we understand that?

(d) How can universal design for color affect:

Color-typical persons
Color-blind or sight-impaired persons
Artists and Designers

(e) What would happen if :

We ignored universal color design when we create as artists and designers?

(4) Apply Simulations

(a) Assess Web Media

Use the Silktide color-blind simulation Chrome Extension (external link)(setting: 'green appears greatly reduced') or the Toptal web page (external link)(setting: 'deuteranopia')... to find images and/or design layouts that:

Contain text that is difficult to read
Contain images that are difficult to understand
Contain visual components where the intent is to provide a colorful (high chroma) experience, but it is translating into a neutral (low chroma) color experience.

Original start screen with colorblind simulation. The Mario character is hard to see against the background

Road signs: red-green color-blind simulation

(b) Assess how color is affected by human biology and the surrounding environment

1. Take the Enchroma Color-Blind Test (external link) (offer an opt-out)
2. While looking at an electronic device screen or a printed magazine, turn all of the room lights on, then off. Take note of the difference in how well the screen or paper can be seen.
3. Use the Chromatic Vision Simulator mobile app (external link) to experience the everyday world the way a color-blind person does.

While looking at both an electronic screen and printed material, turn all of the room lights on, then off. Take note of the difference in how well the screen or paper can be seen.

Use the Chromatic Vision Simulator mobile app (external link) to experience the everyday world the way a color-blind person does.

Take the Enchroma Color-Blind Test (external link) (offer an opt-out)

(5) Analyze Universal Color Themes

Create a new color theme, using the I-See-U method (in the responsiveness section), Only include the rectangles, circles, and the house. While developing your theme:

Copy a theme from the website and paste it into your image editing software
Set the image color mode to CMYK
Use the Hue and Saturation adjustment tool to create a new theme.
Use a hue/sat adjustment layer to simulate a grayscale used by light-sensitive persons.
Use a deuteranopia simulator to check the color-blindness efficacy.

Original Color Scheme

Adjusted Color Scheme

Photoshop is the perfect tool for this exercise. Photopea (external link) or Vectr (external link) are two free web-based image creating and editing tools that can also be used in conjunction with the free Chromatic Vision Simulator mobile app (external link) or the free Skilltide chrome extension (external link) as well as the Colour Contrast Analyzer by NC State University (external link).

(6) Evaluate Universal Color Scheme efficacy

(a) Use the rubric below to evaluate the projects created in the 'Analyze' section

Students can self-evaluate, evaluate their classmates, or evaluate as a group.

Utilize a color-blindness simulation tool that can provide Deuteranopia, Protanopia , and Tritanopia, as well as Achromatopsia. Subjectively compare the chroma values..
Check each color to determine if it fits into the CMYK gamut. Both Photoshop and Photopea have this capability. This will be a measurable determination.
Use a contrast checker tool for each color combination denoted with circles. Check the contrast on each color-blind and grayscale simulation as well. These are each measurable determinations.

Original color scheme shown as:
Typical, and Deuteranopia, Tritanopia, Grayscale Simulations.

Adjusted color scheme shown as:
Typical, and Deuteranopia, Tritanopia, Grayscale Simulations.

Color contrast guidelines: Use the WebAim Color Contrast Checker (external link) to check for compliance.

WCAG AAA: Small Text Minimum

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

WCAG AA: Graphics

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

To alleviate Stotopic Vibration

Create A Reimagined Artwork or Design Utilizing Universal Color

(a) Use the I-See-U Universal Color Palette and/or themes to:

Optimize the signal for conveying information and keeping the noise strictly decorative, supportive, or emotional
Ensure that contrast requirements are met and color quality, in terms of beauty and/or emotion is preserved for colorblind persons and those using grayscale filters.

Photoshop or Illustrator are perfect tools for this exercise. The free web-based software Photopea (external link)) can also be used in conjunction with the free Chromatic Vision Simulator mobile app (external link) or the free Skilltide chrome extension (external link).

Process

Set the image color mode to CMYK
Use the color picker to choose colors from the palette.
Use a hue/sat adjustment layer to adjust colors and to simulate a grayscale filter used by light sensitive persons.
Use the deuteranopia simulator to check the color-blindness efficacy between adjustments.