Intro to Color for Information Display

Color Theory Color Geometries Color applications

Electronic Chart Example

Spectrum approximation, visual segmentation

Double-Ended Income

Olson ‘97, fig. 11-8.

Hue Saturation Bivariate.

Tufte ‘83, pg. 153.

Bivariate map

Ware:Vislab:CCOM

Low errors but big patches (only 13)These kinds of color sequences are known to give very large errors

Attribute Blocks (Miller, 2007)

Color weaving (Hagh-Shenas et al, 2007)

Temperature and Pressure

Physiology: Receptors

Rods active at low light levels (night vision) only one wavelength sensitivity function 100 million rod receptors

Cones active at normal light levels three types: sensitivity functions peaks at different

wavelengths (“red”, “green”, “blue”) 6 million cone receptors Focused in the center of vision (fovea)

The basis of color visionand measurementCone Sensitivity Functions

Color Measurement

a

G+B +R

a b

A three primary system

Consider three lamps

Color measurement

Based on the “standard observer”

CIE tristimulus values XYZ

Y is luminance. Assumes all humans

are the same

CIEluv

x = X/(X+Y+Z), y = Y/(X+Y+Z)

Terms

Luminance (physical) Brightness (perceived amount of light) Lightness (perceive reflectance) Value – used in Computer graphics

Hue (color) Saturation (strength or vividness)

Luminance

Is a physical measurement of the amount of light in the environment weighted by the sensitivity to flickering light.

L = VEd

Brightness: amount of perceived light Brightness (in the dark) =L 1/3

Gamma and Gamma Correction Lightness: perceived surface reflectance

400

700

Eye sensitive over 9 orders or magnitude 5 orders of magnitude (room – sunlight) Receptors bleach and become less

sensitive with more light Takes up to half an hour to recover

sensitivity We are not light meters

Luminance is not Brightness

Short wavelength sensitive cones

Blue text on a dark backgroundis to be avoided. We have very fewshort-wavelength sensitive cones in the retina and they are not very sensitive

Blue text on dark backgroundis to be avoided. We have very fewshort-wavelength sensitive cones in the retina and they are not very sensitive

Blue text on a dark backgroundis to be avoided. We have very fewshort-wavelength sensitive cones in the retina and they are not very sensitive.Chromatic aberration in the eye is also a problem

Blue text on a dark backgroundis to be avoided. We have very fewshort-wavelength sensitive cones in the retina and they are not very sensitive

Opponent Process Theory Cone signals transformed into new

channels

Color Channel Theory

Luminance contrast needed to see detail

3:1 recommended10:1 idea for small text

Comparing the Channels Spatial Sensitivity

Red/Green and Yellow/Blue each about 1/3 detail of Black/White

Stereoscopic Depth Pretty much can’t do it with hue alone

Temporal Sensitivity Moving hue-change patterns seem to move slowly

Form Shape-from shading works well Shape-from-hue doesn’t

Information Labeling: Hue works well!

Some natural philosophersSuppose that these colors arise from the accidental vapours diffused in the air, which communicates their own hues to the shadow

Some natural philosophersSuppose that these colors arise from the accidental vapours diffused in the air, which communicates their own hues to the shadow

Some natural philosophersSuppose that these colors arise from the accidental vapours diffused in the air, which communicates their own hues to the shadow

Luminance contrast

Lightness constancy

Visual system extracts surface information Discounts illumination level Discounts color of illumination Mechanisms 1) Adaptation 2) Simultaneous contrast

Contrast for constancy

Contrast for constancy

Brightness Lightness and Luminance

Luminance – a physical measurement

Brightness refers to perception of lights

Brightness non linear Monitor Gamma: L = V

Lightness refers to perception of surfaces

Perceived lightness depends on a reference white

Gamma = approx 2.0

Luminance for Shape-from-shading

Playing with the background

Miscellaneous of contrast effects

SharpeningNon-linear grey scalesLuminance contrast required for detail

Chromatic Color is Irrelevant…

To perceiving object shapes To perceiving layout of objects in space To perceiving how objects are moving Therefore, to much of modern life

Laboratory assistant went 21 years without realizing he was color-blind

Color is Critical…

To help us break camouflage To judge the condition of objects (food) To determine material types Extremely useful for coding information

Other contrast effects

Small field tritanopiaChromatic contrast

Color “blindness”

A 3D to a 2D space 8 % of males R-G color blindness

Can generate color blind acceptable palette

Yellow blue variation OK

Implications

Color perception is relative We are sensitive to small differences-

hence need sixteen million colors Not sensitive to absolute values- hence

we can only use < 10 colors for coding

Channel Properties

Luminance Channel Detail Form Shading Motion Stereo

Chromatic Channels Surfaces of things Labels Berlin and Kay Categories (about 6-

10) Red, green, yellow

and blue are special (unique hues)

Applications

Color interfaces Color coding Color sequences Color for multi-dimensional discrete data

Color Planes

Saturation

Hue

Data: code objectscode maps

Measurement Scales (Stevens)

Nominal (labeling) Ordinal (orderable) Interval (meaningful step sizes) Ratio (Zero, ratios)

Color great for classification

Rapid visual segmentation

Color helps us determine type

Only about six categories

a

whiteblack

green yellow

green

blue brown

pinkpurpleorangegrey

red

yellow

Color Categories

Task: Name the colors Regions same > 75% Nonuniform sizes Only 8 hues named

small number of labels

Color Coding

Large areas: low saturation

Small areas high saturation

Break isoluminance with borders

Must have luminance contrast with background to see details

Which colors

-Distinct and-memorable

Cultural semantics

The fact that certain colors are special is because they are hard wired

The meaning of those colors is culturally determined

Electronic Chart Example

Color Coding

The same rules apply to color coding text and other similar information. Small areas should have high saturation colors.

Large areas should be coded with low saturation colors

Luminance contrast should be maintained

Color examples

Ordinal DataPseudo-color sequences

One approach: Change a single color model component with other components held constant

Examples Grey scale Saturation scale Spectrum (hue, rainbow) scale (not good)

Issues: How can we see forms (quality) How we read value (quantity)

Luminance Vs Spectrum

Spectrum not a Perceptual

Sequence. Visually Segments

Luminance good for form

High contrast errors

Pseudo-color sequences

Spectrum sequence

Luminance (Gray) Scale

Saturation and Luminance Scale

Spectrum approximation, visual segmentation

Hue+Lightness - Highlighting

Ordinal data Principles

Order: ordered values should be represented by perceptually-ordered colors

Separation: significantly different levels should be represented by distinguishable colors

Can use uniform color spaces

Luminance: good for showing form Many hues: useful for showing readable values

Redundant Color Scales

Two or more color components varied together

Examples Hue with lightness

Characteristics Reinforces signal Combines characteristics of simpler scales

Hue+Lightness Spiral

Spiral Sequence

Interval sequences: Contour Lines and Color

Both indicate regions Contour by showing the boundaries Bands by showing the interiors

Choice of spacing Regular intervals to enable interval comparison Specific values to highlight regions (sea level) Choice of spacing

Can attempt to use UCS

Interval – contours and color

Interval – step color Note spectrum sequence

Uncertainty

Ratio sequence to represent zeroDouble-ended Scale

Represent neutral by neutral on opponent-color channels

Ordered (and double-ended)

Tufte ‘97, pg. 76.

Double-Ended Income

Olson ‘97, fig. 11-8.

Neutral = 0

Bivariate Maps Rows and columns: to preserve univariate

information, display parameters should should be perceptually orthogonal (ideally)

Hue Saturation Bivariate.

Tufte ‘83, pg. 153.

Bivariate map

Bivariate MapValue 1 Luminance – shadingValue 2 Surface hue

Consider Data

Nominal, ordinal interval or ratio Map or point data coding Amount of detail High spatial frequency?

Vary lightness in addition to hue

Consider Audience

Color deficient viewers? Don’t depend on red-green differentiation Use redundant scales

Application area conventions? Use familiar scales (or at least know when you’re not)

Color associations with variables? Use associated color

Color associations with data ranges? Use red for bad range (in U.S.) Use red for hot

Pseudo-color sequences

Issues: How can we see forms (quality) How we read value (quantity)

Multi - Dimensional Scatterplot

V1 - xposition V2 - yposition V3 - red V4 - green V5 - blue Can identify clusters and trends Cannot read values back from visualization

Show grouping

Ware and Beatty ‘85, p. 22

Scatterplot

Scatterplot Results

For cluster discrimination Color adds as much as space

Except for certain special conditions where one cluster lies above another.

3

Take home messages

Use luminance for detail, shape and form Use color for coding - few colors Minimize contrast effects Strong colors for small areas - contrast in

luminance with background Subtle colors can be used to segment

large areas

More messages

Color excellent for multi-dimensional data Use additional tools to get quantities Beware of artifacts due to color re-

sampling We need precise color for specification

and standardization

Luminance to signal direction

Bivariate Map