Color Case Studies

[Author: Bill Fischer]

Overview

Here are some of the most familiar images in the western world. I have improved them, though sacrilege as it may be to some. The adjusted images provide a better-quality experience for persons with:

The adjusted images will also hold up better in various environments and production methods, including:


Grant Wood

American Gothic: Improved color contrast between the characters and the background and higher saturation for the clothing.


Grant Wood Painting: original
1
Grant Wood Painting: red-green color-blind simulation
2
Grant Wood Painting: with color adjusted
3
Grant Wood Painting: adjusted: red-green color-blind simulation - color contrast is approved
4

Piet Mondrian

Composition with Large Red Plane, Yellow, Black, Gray and Blue: Improved visual hierarchy that maintains the attention value for the large central square.


Mondrian Painting
1
Mondrian Painting: red-green color-blind simulation
2
Mondrian Painting: color-adjusted
3
Mondrian Painting: color-adjusted: red-green color-blind simulation - color contrast is improved
4

Banksy

Child with Balloon: maintenance of the  attention value for the balloon.


Banksy painting
1
Banksy painting: red-green color-blind simulation
2
Banksy painting: color-adjusted
3
Banksy painting: color-adjusted: red-green color-blind simulation - color contrast is improved
4

Super Mario Bros

Start Screen: Improved hue and value contrast for the character and the graphic user interface.


Original start screen with low-contrast user interface
1
Original start screen with colorblind simulation. The Mario character is hard to see against the background
2
Adjusted start screen with high-contrast user interface
3
Adjusted start screen with colorblind simulation. The Mario character is easy to see against the background
4

US.gov Website

Landing Page: Improved consistency for color hierarchy and visual attractiveness. 


Original web site interface with red highlights
1
Original web site interface with red-green color-blind simulation. The red highlights are very dull and the site became unattractive
3
Adjusted web site interface with all blue and blu-green highlights
2
Adjusted web site interface with has only subtle color changes that do not affect the visual hierarchy of the layout.
4

Bar Chart

Data Visualization


Note: Color should never be the primary differentiator. Moving the letters directly under the bars, made them primary and the colors secondary.

colorful bar chart

1


colorful bar chart: red-green color-blind simulation: red and green bars appear the same color
2
colorful bar chart: gray-scale simulation: bars are all the same value
3
colorful bar chart adjusted: colors are darker and shifted
4
colorful bar chart adjusted: all colors are differentiated
5
colorful bar chart adjusted: all values are differentiated
6

U.S. Dept. of Trans.

Road Signs: Improved visibility for color-blind drivers.


Road signs

1


Road signs: red-green color-blind simulation

2


Road signs: color-adjusted
3

Google logo: color-adjusted: red-green color-blind simulation - color contrast is improved
4

Environmental Impact

Road signage, in particular, has the aditional burden of needing to function within a wide range of natural habitats.


Hapari Fashion

Color Block Swimwear: Improved hue and value contrast to maintain vibrant color for color-blind persons.


Swimwear - original color
1
Swimwear - red-green color-blind simulation - colors are dull
2
Swimwear - adjusted colors
3
Swimwear - adjusted - red-green color-blind simulation - colors remain vibrant
4

Emotional Color

Color wheels that assign specific emotions to colors are common and somewhat based on research. How does emotional color work for color-blind persons? The short slide deck below studies that question.

Emotional Color

I-See-U  Color Scheme Studies

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

Color Theme Applications