This presentation was created by Dr. Karen Juneau for classroom use in 2004 .

You may link to this presentation but you cannot download or modify this presentation for use in a web-based course or post this presentation on another web site without the written permission of the author.

You may contact me at kjuneau@wmcarey.edu or at karen.juneau@wmcarey.edu if you have any questions about this presentation.

Dr. K. Juneau, 2004

Assessable Web Based Instruction for the Color Blind

Dr. Karen R. Juneau William Carey University

The Problem
The web based learning environment is a color rich learning environment

Dr. K. Juneau, 2004

The Problem

Colors are used to highlight information

As navigation tools To emphasize relationships

100 90 80 70 60 50 40 30 20 10 0 1st Qtr 2nd Qtr 3rd Qtr 4th Qtr

East West North

In 1969, man landed on the Moon.

Dr. K. Juneau, 2004

How Big a Problem is This?

1 In 12 Males 1 every 200 women This means that nearly 5 percent of the potential users of your materials could have difficulties due to a color deficiency problem

Dr. K. Juneau, 2004

Example Problems
The following examples simulate what it is like to function with a color deficiency in a graphical environment

Dr. K. Juneau, 2004

How well cooked is this roast?

Rare?
Medium ? Well done?
Dr. K. Juneau, 2004

How well cooked is this roast?

Rare?
Medium ? Well done?
Dr. K. Juneau, 2004

Which solution is an acid?

Solution A

Solution B

Dr. K. Juneau, 2004

Which solution is an acid?

Solution A

Solution B

Dr. K. Juneau, 2004

Which train line is a subway line?

Dr. K. Juneau, 2004

Which train line is a subway line?

Dr. K. Juneau, 2004

Which group ends class on May 15?

Blue Group?

Green Group?

Yellow Group?
Dr. K. Juneau, 2004

Purple Group?

Which group end class on May 15?

MAY
1 2 3 4 5 8 9 10 11 12 15 16 17 18

Blue Group?

Green Group?

Yellow Group?
Dr. K. Juneau, 2004

Purple Group?

Copy the vocabulary words

Crater Volcano Magma Lava Obsidian Dormant Magama Lahar Nuees Ardentes

Dr. K. Juneau, 2004

Copy the vocabulary words

Dr. K. Juneau, 2004

Nouns are marked in red

The mists rise over The still ponds at Asuka Memory does not Pass away so easily AKAHITO

Dr. K. Juneau, 2004

Nouns are marked in red

Dr. K. Juneau, 2004

Weather Maps

Dr. K. Juneau, 2004

Weather Maps

Dr. K. Juneau, 2004

Select the largest ball

Dr. K. Juneau, 2004

Select the largest ball

Dr. K. Juneau, 2004

What Do They See?

Color blind individuals see color but the images shift toward specific hues This affects the contrast, readability, and clarity of graphical images

Dr. K. Juneau, 2004

Shades and Hues

Most people key into hues

Colorblind people key into shades

Dr. K. Juneau, 2004

Shades and Hues

If the colors are the same hue but have different gray scales the image is easier for most colorblind people to read
Deuteranope Simulation
Trimetric (Normal vision)

Dr. K. Juneau, 2004

Shades and Hues

A color difference with no grey scale difference becomes monochromatic

Dr. K. Juneau, 2004

Types of Color Blindness

Color blindness can be divided into three groups Red-green deficiencies Blue deficiencies No color deficiencies

Dr. K. Juneau, 2004

Red Deficiencies
Prontanopia and Protanomaly Have difficulty seeing reds Reds are darker colors than they appear to a trimetric person Reds look like shades of brown or olive

Dr. K. Juneau, 2004

Example Protanope Simulation

Dr. K. Juneau, 2004

Green Deficiencies
Deuteranopia and Deuteranomaly Can not see green Many greens and reds appear to be the similar to dark or grayed yellows Red is not as dark to these individuals as it is to individuals with protonopia

Dr. K. Juneau, 2004

Examples Deuteranope

Dr. K. Juneau, 2004

Examples Deuteranope

Dr. K. Juneau, 2004

Example Deuteranope

Dr. K. Juneau, 2004

Comparison of Red/Green Types

Deuteranope

Protanope

Dr. K. Juneau, 2004

Blue Deficiencies
Tritanopia Difficulty seeing blue Blue and greens are often confused and appear more like grey Yellow appears pink Rare compared to red/green deficiencies

Dr. K. Juneau, 2004

Blue Deficiencies

Dr. K. Juneau, 2004

Blue Deficiencies

Dr. K. Juneau, 2004

Example Tritanope

Dr. K. Juneau, 2004

No Color Vision
Moncromanay or Achromacy Very rare types Can see only black, white and shades of grey Bright light is uncomfortable Visual clarity is poor

Dr. K. Juneau, 2004

No Color Example

Dr. K. Juneau, 2004

Text Contrast

Light letters on a dark background are more readable than dark letters on a white background
Light letters on a dark background are easier to read Dark letters on a light background are more difficult to read

Dr. K. Juneau, 2004

Text Spacing

Example from Arditi, Aries (2003) Making Text Legible; Designing for People with Partial Sight. http://www.lighthouse.org/print_leg.htm
Dr. K. Juneau, 2004

Text Spacing
Spacing between letters improves readability
This font is Arial Narrow. The letters tend to run together visually.

This font is Arial. These letters are easier to read.

Dr. K. Juneau, 2004

Design Solutions

Design materials in black and white and add the color afterward Limit colors to four colors

Dr. K. Juneau, 2004

Design Solutions

Do not make color the only clue to the information

Do not make the instructions dependent on color

Dr. K. Juneau, 2004

Design Solutions

Use shapes and textures as well as color

Dr. K. Juneau, 2004

Use Alt text tag for Images

ALT tags are attributes of the IMG tag They provide text equivalents for viewers who cannot use graphics

<IMG SRC=seal.gif ALT=Metal Art Society>

Make the text in these tags meaningful

Dr. K. Juneau, 2004

Use Alt text tag for Images

An equivalent experience for the non graphic users Use blank ALT tags for bullets

<IMG SRC=bullet.gif ALT=>

This prevents screen readers from reading non-essential information

Dr. K. Juneau, 2004

Create Text links that Stand Alone

Instead of For more photographs, click here. To return to the home page, click here. Consider: View more photographs Photobug homepage

Dr. K. Juneau, 2004

Consider your Link Colors

Avoid Red, Green, Brown, Grey and Purple links that change to Red, Green, Brown, Grey or Purple

Dr. K. Juneau, 2004

Use High Contrast

Poor Better Best

Dr. K. Juneau, 2004

Use High Contrast

Dr. K. Juneau, 2004

Use High Contrast

Deuteranope

Dr. K. Juneau, 2004

Tools

Color wheels Safe color charts

By Hue By Values
Color blind simulation Modification of images (Daltonlized images)

Vischeck

Dr. K. Juneau, 2004

Color Wheels

Dr. K. Juneau, 2004

Safe Color Charts by Hue

Dr. K. Juneau, 2004

Safe Color Charts by Values

Dr. K. Juneau, 2004

Vischeck

Dr. K. Juneau, 2004

Vischeck - Simulations

Dr. K. Juneau, 2004

Vischeck-Daltonize

Dr. K. Juneau, 2004

Original image

Color blind simulation

Daltonized original
Dr. K. Juneau, 2004

Daltonized color blind simulation

Example from www.vischeck.com

Example Web Page

Dr. K. Juneau, 2004

Example Web Page Simulation

Dr. K. Juneau, 2004

Summary

Use color

High contrast images Vary color by grey scale Consider adding text equivalents

Use tools such as Vischeck and color charts to design and check your work If your page is effective in black and white it will be effective to colorblind users

Dr. K. Juneau, 2004

Dr. K. Juneau, 2004

Image Sources
Note:
Every effort was made to correctly credit images in this presentation. Non-credited images are either original images created by the author or appeared to be free of copyright restrictions. If an image was not credited correctly, please contact the author and the error will be corrected or the image will be removed.

Dr. K. Juneau, 2004

Image Sources

Slide 3 NASA image of Earth from www.cseligman.com/text/planets Slide 4 Image of astronomical images from http://www.astr.ua.edu/choosepic.html Slide 6 Manipulation/composite of image found at http://www.stjohns.k12.fl.us/media/Crayons.jpg

Dr. K. Juneau, 2004

Images Sources

Slide 8 Original image of roast found at http://www.bordbia.ie/recipes/beef/beef-roastrib.html Slide 9 Original image of beakers found at http://www.niaid.nih.gov/publications/discovery/default.htm Slide 11 English version of Osaka subway map found at homepage3.nifty.com/subway/ japan/osaka/osaka.htm

Dr. K. Juneau, 2004

Image Sources

Slide 15 Volcano image found at http://georoc.mpchmainz.gwdg.de

Slide 18 Pond image located at National Park Service - Whitman Mission National Historic Site http://www.nps.gov/whmi/gallery/pond011.htm Poem by Akahito located at http://oldpoetry.com

Dr. K. Juneau, 2004

Image Sources

Slide 19 Temperature map of Jan 4, 2004. Weather map generated at http://cirrus.sprl.umich.edu/wxnet/maps.html

Slide 29 Photo of the Administration building and rose garden at The University of Southern Mississippi. www.usm.edu

Dr. K. Juneau, 2004

Image Sources

Slide 31 Image of Fruit Stand at Pike's Market (Seattle, WA) and image of Red Leaves in Box Canyon (Seattle, WA) by Evan A. Zamir located at http://students.cec.wustl.edu/~eaz1/pow_112600.html Image of tarts located at http://www.wilton.com/images/recipes/summer.jpg Photograph of butterfly located at http://lynx.uio.no/jon/gif/animals/insects/yellow-bfly.jpg

Dr. K. Juneau, 2004

Image Sources

Slide 52 Photo of a wheat field located at http://www.ebibleteacher.com Photo of wheat field with sky by David H. Mathews located at http://rna.chem.rochester.edu/david/wheat.jpg

Slides 56 & 57 Safe color charts located at http://www.lynda.com/hex.html

Slide 58 through 61 screen captures are from www.vischeck.com

Dr. K. Juneau, 2004

References

Arditi, A. (1999,2002). Making text legible: Designing for people with partial sight. New York: Lighthouse International. Retrieved January 2, 2004 from http://www.lighthouse.org/print_leg.htm ErgoGero (n.d.) Part 4: Color Blindness. Retrieved January 5, 2004 from http://www.ergogero.com/FAQ/Part4/cfaqPart4.html Hoffman, P. (1999) Accommodating Color Blindness. Usability Interface, Vol 6, No. 2, Retrieved from
http://www.stcsig.org/usability/newsletter/9910-color-blindness.html

Dr. K. Juneau, 2004

References

WebAim (2004) Visual Disabilities: Color Blindness. Center for Person with Disabilities. Utah State University. Retrieved January 5, 2004 from http://www.webaim.org/techniques/visual/colorblind Waggoner,T. (n.d.) What Teachers, School Nurses, and Parents Should Know About Being Colorblind. Retrieved January 5, 2004 from http://colorvisiontesting.com/color4.htm Wilson, D. (2003) Color Vision, Color Deficiency. Retrieved January 5, 2004 from http://www.firelily.com/opinions/color.html

Dr. K. Juneau, 2004

References
Webaim

(2004) Visual Disabilities: Color Blindness. Center for Person with Disabilities. Utah State University. Retrieved January 5, 2004 from http://www.webaim.org/techniques/visual/colorblind

Dr. K. Juneau, 2004

Dr. K. Juneau, 2004