Week 10 Stew:Color and Accessibility

28 February 2008

Overview

• Color Definition, Color Wheel, Color Theories,

Design Issues/Guidelines

• Accessibility Color & Age Voice Output Examples

Color Importance

• 80% of the brain is devoted to processing visual information

• The two categories: form and color You’ve reviewed Gestalt theory

What is color• The visual effect caused by the spectral

composition of light which is emitted, transmitted or reflected by objects [Color Logic for Web Design, p 7]

• The experience of color is always relative to context – relationship to adjacent color can cause noticeable differences in visual perception

• See Color Perception (in 3000 Words) In William Bechtel and George Graham (eds), A Companion to Cognitive Science, Blackwells, 1998. http://www.ucc.uconn.edu/~wwwphil/ccompan.html

Color Wheel

• Sir Isaac Newton developed the first color wheel in 1666

• Based on red, yellow, blue (primary colors) Computer: red, green, blue Print: cyan, magenta,yellow,

black

From http://www.sanford-artedventures.com/study/g_color_wheel.html

Secondary colors

• Colors created by mixing the primaries: green, orange, purple Computer:

Red + Green = Yellow Blue + Green = Cyan Red + Blue = Magenta

Other

• Tertiary: colors formed by mixing secondaries

• Complementary: opposite on the color wheel; when mixed, they are neutral

• Analogous: any three colors that are side-by-side on a 12-part color wheel

• Triad: any three colors that are equidistant

Additive & Subtractive Color

From http://www.sanford-artedventures.com/study/g_color_wheel.html

Attributes

• Hue – the specific color• Value – brightness• Saturation – intensity

Color Theory: Chevreul (1/2)

French Chemist (1776-1889)1. Highly contrasting colors used in sufficient

quantities will make each appear more brilliant; when used in small quantities the eye blends and creates a new, duller color.

Color Theory: Chevreul (2/2)

2. When colors are not analogous and not complementary, one will give the other a complementary tinge

3. Colors that are adjacent to one another tend to optically mix to create a new color

Color Theory: Bezold Effect

• Changing only one color can significantly alter appearance

Color Theory: Albers (1/2)

• Perceived hue will change based on surroundings; Bauhaus (1888-1976)

• Three colors below (and next) appear to be four

L: r102/g102/b104; R:r153/051g/153b; C: r153/g102/b204

Color Theory: Albers (2/2)

L: r153/g204/b000; R:r204/255g/153b; C: r051/g204/b102

Color Theory: Itten

• Focused on seven color contrasts; another Bauhaus school member (1889-1967)

Color Theory: Movement (1/2)

• Depending on the background, warm colors tend to “advance” and cool colors “recede” Thus, pick your colors for visited/not visited

links with care Also be aware of cultural meanings (green =

“go” so might not be a good choice for “went”)

Color Theory: Movement (2/2)

• Which color advances?

Warm/Cool

• Theory shows that background/context matters – but given a light, neutral background and “pure” colors: Warm: yellow, orange, red Cool: blue, blue-green, green

See also http://www.handprint.com/HP/WCL/wcolor.html

Harmonious Design

Color Logic for Web Design, p35

Harmonious Guidelines

• Use a limited color palette• Experiment with harmonies – match with

tone Dynamic, strong contrast = edgy, attention-

getting, energizing Subtle, low contrast = fluid, low key,

sophisticated

Wireframe to Design: Dynamic

• Start with b/w/g

• Focus on contrast; remember readability requires it

• Less is more

Color Logic for Web Design, p37

Subtle

• Start with b/w/g

• Structure dominant areas first

• Create contrast with value change or with pure color

Color Logic for Web Design, p38

Branding

• Designed to build emotional connections; becomes a source of “promises”

• One major component: color• Adjectives ….for your project

Let’s look at Trust, Security, Speed, Cheap/Inexpensive

Trust

See http://www.joehallock.com/edu/COM498/associations.html

Security

See http://www.joehallock.com/edu/COM498/associations.html

Speed

See http://www.joehallock.com/edu/COM498/associations.html

Cheap/Inexpensive

See http://www.joehallock.com/edu/COM498/associations.html

Color Psychology

• Color psychology varies by culture• However, there are some (almost)

universals Black: authority, power, … White: purity, sterility, … Red: emotionally intense, color of blood & love

…

Color Psychology

• Universals (cont’d) Blue: tranquil, color of water, opposite of red,

… Green: nature, calming, … Yellow: color of the sun, cheerful, …

See http://www.infoplease.com/spot/colors1.html, http://www.pantone.com/products/products.asp?idArticle=112&idArea=16

Color Meaning

• For fun: http://www.supervert.com/shockwave/colortest/ (shockwave) or http://www.colorquiz.com/

• Primer: Color, Contrast and Dimension in News Design, http://poynterextra.org/cp/colorproject/color.html

Accessibility

• "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." -- Tim Berners-Lee, W3C Director and inventor of the World Wide Web

• See http://www.w3.org/WAI/ and http://www.section508.gov/

Accessibility: color

• Beware of “color-blindness” (red/green)• Beware of “aging” (blue)

http://www.lighthouse.org/color_contrast.htm

Red/Green Impairments

From left: “normal” vision – “green-insensitive” so red is perceived as red and green – “red insensitive” so green is perceived as red and green

http://www.firelily.com/opinions/color.html

More visual impairments

• Color vision defects causeproblems in the real world, http://www.mcw.edu/cellbio/colorvision/test1.htm

Accessibility: Sound Out

• Jaws is the most common Windows reader Macromedia Demo

• Window-Eyes Macromedia Demo

Books/References• http://www.writer2001.com/bukcolor.htm• http://www.colormatters.com/biblio_willard.html• http://darkwing.uoregon.edu/~artv471/colorreading.htm• http://www.macromedia.com/resources/accessibility/

Card sort (1/2)

• List of information by topic• Cards (or post-it notes for affinity diagram)• Group• Name the group• How-Tos:

http://www.ucc.ie/hfrg/emmus/methods/cardsort.html http://www.boxesandarrows.com/view/

card_sorting_a_definitive_guide http://www.infodesign.com.au/usabilityresources/

design/cardsorting.asp

Card sort (1/2)

• Look for patterns – dominant organization scheme

• Adjust for consistency• ID categories that don’t match

May be features May just be oddball

Card sort (2/2)

• Category refinement = taxonomy• Examples:

http://eat.epicurious.com/ http://www.outpost.com/ http://www.bestbuy.com/ http://www.mercurynews.com/mld/mercurynews/ http://news.google.com/

Questions?

• Next Week• Design Analysis• Other?