test test

Color and Information

Week 4
 Overview
• Fundamental use of color in information design
• To label (color as noun)
• To measure (color as quantity)
• To represent or imitate reality (color as representation)
• To enliven or decorate (color as beauty)
Color Vision & Perception
 Color Vision
• The rods actively contribute to vision only in low-light settings and provide low-
resolution black and white information.
• The main sensors in normal lighting conditions are the cones.
• Three types of cones, each with peak sensitivities at a different wavelength within
the spectrum of visible light.
• Signals processed into three opponent color channels: (1) one rom red to green, (2) one from
blue to yellow, and (3) one from black and white recording luminance information
 Color Vision
• Color deficiency (colloquially called color blindness)
• When the red-green channel is impaired: deuteranopia and protanopia (sex-linked, more
common)
• When the blue-yellow channel is impaired: Tritanopia (not sex-linked, extremely rare)
 Contextual Effects
• Visual perception does not measure absolute values but instead registers
differences between values.
• The reason for the apparent difference is that we perceive color not in absolute
terms but as the difference between the color that we are focusing on and the
color that surrounds it.
 Contextual Effects
• Design Implication: Use a single, neutral background color
 Contextual Effects
Hermann grid effect (discovered in 1870):
Ghostly blobs seem to appear at the
intersections in the grid but only as long as one
is not looking at them directly.
 Contextual Effects
Mach bands: When the gray bars share a boundary, the apparent contrast
between them appears to increase.
 Contextual Effects
Edward Adelson’s checker shadow illusion: Our visual system is attracted to edges,
and we assess contrast and brightness in terms of relative rather than absolute values.
 Contextual Effects
• Your visualization should consider how your audience will
perceive, understand, or misunderstand what you show them.
• Every decision you make has an effect, not only what chart
to choose, but also other details (e.g., color).
• The perceptual processes the previous visual effects exploit
are not under your conscious control. ► This makes it easy to
be misled by them (e.g., when we overestimate the size of a
contrast between two adjacent shaded areas on a map or
grid simply because they share a boundary).
 Contextual Effects
• Any color coding of quantity is potentially sensitive to interactive contextual
effects.  Color differences should not be relied upon as the sole method for
sending a message amidst a mosaic of complex and variable data.
• The same color (in the central squares) looks different when placed in slightly
different circumstances.
 Contextual Effects
• Subtraction of color: any ground subtracts its own hue from colors which it carries
and therefore influences
• Example: Two different colors look alike.
 Edge Contrast
Our ability to see edge contrasts is stronger for monochrome images than for color.
 Vanishing Boundaries
• The effect that can occur when two
colors of similar hue, value, and
saturation are placed adjacent to one
another and appear to blend into
each other.
 Edge Lines
• Edge lines (a thin line of color not too distant in value from the
scale itself) allow very fine value distinctions, increasing scale
precision.

• Effect of the contour:

 Preattentive Pop-Out
Searching for the blue circle becomes progressively harder.
 Preattentive Pop-Out
• Pop-out makes some things on a data graphic easier to see or find than others.
• Pop-out on the color channel is stronger than it is on the shape channel.
• Adding multiple channels to a graph is likely to overtax the capacity of the
viewer very quickly. ► Even if our software allows us to, we should think carefully
before representing different variables and their values by shape, color, and
position all at once.
 Preattentive Pop-Out
• Multiple channels become uninterpretable very fast (left), unless your data has a
great deal of structure (right).
 Design Implications
• Use soft colors, except when highlighting data
 Design Implications
• Use the same color, except when associated with differences in meaning
Decomposing Color
 Color
Color: integral perception across luminance, hue, and saturation
• Ordered can show magnitude
• Luminance: how bright
• Saturation: how colorful

• Categorical can show identity

• Hue: what color
 Hue
• Hue: pure colors that are not mixed with white or black
• On a color wheel, we plot hue around the circumference of the wheel.
 Hue
• Primary colors in the RGB color wheel are the
colors that, added together, create pure white
light: red, green and blue.
• Secondary colors are colors that result from
mixing two primary colors. Three secondary
colors in the RGB color wheel: cyan, magenta
and yellow.
• Tertiary colors are colors made by combining a
secondary color with a primary color. Six
tertiary colors in the RGB color wheel: orange,
chartreuse green, spring green, azure, violet
and rose.
 Hue
• Hue interacts with size
• Hue is harder to distinguish in small regions than large regions
• We can make fine distinctions in hue for contiguous regions, but have very limited
discriminability between separated regions.

• Hue does not have an implicit perceptual ordering

 Luminance
• Luminance refers to the amount of black versus white within a color.
• Used as an evocative way to describe the black and white visual channel.
• The luminance and saturation channels are automatically interpreted as ordered
by our perceptual system, but the hue channel is not.
 Luminance
• When small symbols, text, or other
detailed graphical representations of
information are displayed using color on a
differently colored background, always
ensure luminance contrast with the
background.
• Purely chromatic differences should never
be used for displaying object shape,
object motion, or detailed information such
as text.
 Saturation
• Saturation is a measure of the purity of a hue.
• Often used informally to refer to vividness.
• The amount of gray mixed with a pure color.
 Saturation
Saturation interacts with size:
• For small regions, use bright, highly saturated colors to ensure that the color
coding is distinguishable
• For large regions (e.g., backgrounds), use low-saturation colors (i.e., pastels)
 Transparency
• Transparency: A fourth channel strongly related to luminance, saturation, and hue
• Information can be encoded by decreasing the opacity of a mark from fully
opaque to completely see-through.
• Used most often with superimposed layers
• Transparency cannot be used independently of the other color channels.
• Transparency coding interacts strongly with luminance and saturation and should
not be used in conjunction with them at all.
Color Choice
 Color Choice
“In most design situations, the best results are achieved by limiting hue to
a palette of two or three colors, and using hue and chroma variations
within these hues to create distinguishably different colors.”
– Maureen Stone
• Select color according to function.
• Use contrast to highlight
• Use analogy to group
• Control value contrast for legibility.
 Palette of Colors
• Use colors found in nature, especially
those on the lighter side
• Nature’s colors are familiar and coherent,
possessing a widely accepted harmony to
the human eye
• Local emphasis for data is then given by
means of spot highlights of strong color
woven through the serene background
 Color Semantics
• Take into account the meaning of
colors when color coding
symbols.
• Some naming conventions do not
necessarily cross cultural borders.
• Combinations of colors can have
affective qualities.
 Color Combinations
Complementary: Two colors that are on opposite sides of the color wheel.
• This combination provides a high contrast and high impact color combination –
together, these colors will appear brighter and more prominent.
 Color Combinations
Monochromatic: Different shades, tones and tints of one base color.
• This provides a subtle and conservative color combination, which is versatile and
easy to apply to design projects for a harmonious look.
 Color Combinations
Analogous: Colors that are side by side on the color wheel.
• This color combination is versatile, but can be overwhelming. To balance an
analogous color scheme, choose one dominant color, and use the others as accents.
 Color Combinations
Triadic: Three colors that are evenly spaced on the color wheel.
• This combination provides a high contrast color scheme and creates bold, vibrant
color palettes.
 Color Combinations
Square: Four colors that are evenly spaced on the color wheel.
• This combination is bold and works best if you let one color be dominant, and use
the others as accents.
 Color Combinations
Tetradic: Two sets of complementary colors, spaced so that when you draw a line
between them you get a rectangle.
• This combination works best if you let one color dominate while the others serve as
accents.
 Color Combinations
Split-complementary: Three colors including one base color and two secondary
colors placed symmetrically around its complementary color on the color wheel.
• This combination is better cold-warm balanceable than a complementary color
scheme.
 Example
How different choices affect the emphasis and message…
 Example
One approach is to span only a
segment of the hue circle, yet still
create distinctly different colors.
 Example
Another approach is to use a
common hue that varies in chroma
and value.
 Example
• Color is a powerful channel for picking out visual elements of interest.
• As a general rule, making the background white and its supporting information
shades of gray provides the most effective foundation for your color palette.
 Design Implications
• Strategies for how color can serve information are set out in Eduard Imhof’s classic
Cartographic Relief Presentation.
• Rule 1 and Rule 2 seek to minimize color damage.
• Rule 3 and Rule 4 mix cartographic science and art.
 First Rule
• Pure, bright or very strong colors have
loud, unbearable effects when they
stand unrelieved over large areas
adjacent to each other, but
extraordinary effects can be
achieved when they are used
sparingly on or between dull
background tones.
 Second Rule
• The placing of light, bright
colors mixed with white next to
each other usually produces
unpleasant results, especially if
the colors are used for large
areas.
 Third Rule
• Large area background or
base-colors should do their
work most quietly, allowing
the smaller, bright areas to
stand out most vividly, if
the former are muted,
grayish or neutral.
 Fourth Rule
• If a picture is composed of two or more large, enclosed areas in different colors,
then the picture falls apart. Unity will be maintained, however, if the colors of one
area are repeatedly intermingled in the other, if the colors are interwoven
carpet-fashion throughout the other.
 Fourth Rule
• Quantities are shown by a
value scale, progressing
from light to dark
 Colorblind-Safe Design
• Avoid using only the hue channel to encode information
• Avoid colormaps that emphasize red-green, especially divergent red-green
ramps

• Check a design with a color blindness simulator

 Sensitive Multiplicity
• The process of translating perceived color marks on paper into quantitative data
residing in the viewer’s mind is beset by uncertainties and complexities.
• Redundant and partially overlapping methods of data representation can yield a
sturdy design, responding in one way or another to potential visual complications.
 A crystalline, lucid redundancy!
• Transparent and effective deployment of redundant signals requires:
• Need: an ambiguity or confusion in seeing a data display that can in fact be diminished by
multiplicity
• Appropriate choice of design technique: the method of signal reinforcement that will work to
minimize the ambiguity of reading
 Color Systems
Different ways to mathematically describe color as a space
 Color Systems
In almost all systems of color organization, every color is located in three space:
1. Described by hue, saturation, and value in Munsell and other spatial-perceptual
classifications.
2. Described by red, green, and blue components in various additive methods for video
displays.
3. Described by cyan, magenta, and yellow components in subtractive methods for
printing inks.
Color Specification Interface: Users can be given a set of controls to specify a point in a
three-dimensional color space, a set of color names to choose from, or a palette of
predefined color samples.
 CMYK
• The colors cyan, magenta, yellow, and black are
combined through subtraction.
• Colors on passive media (e.g., paper) are
created using this principle.
• Some colors (e.g., turquoise, orange) look radiant
on a website, but pale in print.
 RGB
• Colors are specified as triples of red, green, and blue values.
• The RGB primaries form the coordinates of a color space.
• Colors are created through addition by mixing the parts red,
green, and blue.
• Colors in active light sources (e.g., displays or computer screens)
are created using this principle.
• To give users controls to adjust the amounts of red, green, and blue light
that combine to make a patch of color on a monitor.

• The red, green, and blue axes of the RGB color space are not
useful as separable channels.
 HSL
• The hue-saturation-lightness system is heavily used by
artists and designers.
• Hue: what we normally think of as pure colors that are
not mixed with white or black
• Saturation: the amount of white mixed with that pure
color (e.g., pink as a partially desaturated red)
• Lightness: the amount of black mixed with a color
• Very similar to Hue-Saturation-Value (HSV) space.
 HSL
• Pseudo-perceptual: It does not truly
reflect how we perceive color.
• Lightness (L) is different from how
we perceive luminance.
• Example: six different hues
arranged in order of their luminance
(The true luminance is a somewhat
better match with our perceptual
experience.)
 Spectral Sensitivity
• The spectral sensitivity of our eyes to
luminance depends on the
wavelength of the incoming light.
Colormaps
 Color Schemes
• When choosing color schemes, we will want mappings from data to color that are
not just numerically but also perceptually uniform.
• Our perception is not uniform across the space of possible colors.
• The range of chroma we are able to see depends strongly on luminance.
• Numerically equal gaps between a sequences of reds (say), are perceived differently from
the same gaps mapped to blues
 Color Schemes
When we want to use different
expressions of a preattentive
attribute (e.g., hue) to separate
objects into different groups, we
should select expressions of that
attribute that vary significantly
from one another.
 Color Schemes
• Different color spaces have been defined and standardized in ways that account
for these uneven or nonlinear aspects of human color perception.
• The body responsible for this is Commission Internationale de l’Eclairage
(International Commission on Illumination).
• R and ggplot make these features available to us.
 Color Schemes
• R provides color models and color spaces that try to
make the mappings from data to color numerically and
perceptually uniform.
• Example: A series of sequential gradients using the HCL
(Hue-Chroma-Luminance) color model (palettes
generated from R’s colorspace library) ►
• Goal: to generate a perceptually uniform scheme, where hops
from one level to the next are seen as having the same
magnitude.
 Colormaps
• A colormap specified a mapping between colors and data values (a visual
encoding with color)
• Colormapping: also called Pseudocoloring
• Pseudocoloring is the technique of representing continuously varying map values using a
sequence of colors.  Choropleth map

• Used widely for astronomical radiation charts, medical imaging, and many other
scientific applications.
 Colormaps
• The major design choice for colormap construction: whether the intent is to
distinguish between categorical attributes or to encode ordered attributes.
• Sequential ordered colormaps show a progression of an attribute from a minimum to a
maximum value
• Diverging ordered colormaps have a visual indication of a zero point in the center where the
attribute values diverge to negative on one side and positive on the other.
• Bivariate colormaps are designed to show two attributes simultaneously.
 Colormaps
• Taxonomy of colormaps mirrors the taxonomy of data types.
• Categorical colormaps
• Ordered colormaps
• Sequential
• Diverging

• Continuous colormaps are heavily used for showing quantitative attributes.

• Segmented colormaps are suitable for categorical data.
• Bivariate colormaps encode two attributes simultaneously.
 Categorical Colormaps
• A categorical colormap uses color to encode categories and groupings.
• Also known as qualitative colormaps
• Normally segmented

• For categorical data, they are the next best channel after spatial position.
• Typically designed by using color as an integral identity channel to encode a
single attribute.
• Easily nameable colors are desirable, both for memorability and ability to discuss
them using words.
 Categorical Colormaps
• For some uses, the colors should be close in luminance to avoid major differences
in salience and to ensure that all can be seen against the same background.
• For other uses, colors should be sufficiently different in luminance that they can be
distinguished even in black and while.
• Colormaps for small regions such as lines should be highly saturated, but large
regions such as areas should have low saturation.
• ColorBrewer: A good resource for creating colormaps
 Categorical Colormaps
• Two design choices when faced
with the problem of discriminability
mismatch:
1. Reduce the number of bins
1) Through a deliberate data
transformation that takes into
account the nature of the data and
task
2) Filter the attributes to only encode a
small set of the most important ones
with color, and aggregate all of the
rest into a new category of other
 Categorical Colormaps
• Two design choices when faced with the problem
of discriminability mismatch:
2. Use a different visual encoding idiom that uses other
visual channels instead of, or in addition to, the color
channel alone
 Ordered Colormaps
• An ordered colormap is appropriate for encoding ordinal or quantitative
attributes.
• A sequential colormap ranges from a minimum value to a maximum value.
• A diverging colormap has two hues at the endpoints and a neutral color as a midpoint (e.g.,
white, gray, or black, or a high-luminance color such as yellow)

• How many unique hues to use in continuous colormaps depends on what level of
structure should be emphasized: the high-level structure, the middle range of local
neighborhoods, or fine-grained detail at the lowest level.
 Ordered Colormaps
• Rainbow colormap
• Advantage: people can easily discuss specific subranges because the differences are easily
nameable
• Problems:
• Hue is used to indicate order
• The scale is not perceptually linear
• Fine detail cannot be perceived with the hue channel
 Ordered Colormaps
• Monotonically increasing luminance colormaps: where the multiple hues are
ordered according to their luminance from lowest to highest (the figure on right)
• The varying hues allow easy segmentation into categorical regions.
• Luminance supports both high-level distinctions and low-level structure perception.
 Ordered Colormaps
• The standard rainbow colormap is perceptually nonlinear.

• A segmented rainbow colormap is a fine choice for categorical data with a small
number of categories.

• Deliberately bin the data explicitly rather than relying on the eye to create bins
 Bivariate Colormaps
• Univariate colormaps visually encode a single
attribute.
• Bivariate colormaps encode two separate
attributes.
• When one of the two attributes is binary: create a
colormap with two families of colors by fixing a base
set of hues and varying their saturation
• When both attributes are categorical with multiple
levels, results will be poor.
 References
• Few, S. (2009). Now you see it: simple visualization techniques for quantitative
analysis.
• Munzner, T. (2014). Visualization analysis and design. CRC press.
• Stone, M. (2003). A field guide to digital color. CRC Press.
• Tufte, E. R. (1990). Envisioning information. Graphics Press LLC.
• Ware, C. (2019). Information visualization: perception for design.