Matt McMahon
-
Senior Fellow in Department of Biological Structure
-
Vision interested in light that enters the eye
-
Light that emitted from the display
-
Rods and cones
-
Rods are for night time, very sensitive
-
Cones are for daytime vision
-
Color vision is product of how cone photoreceptors are sensitive to light
-
Different types of cones have different sensitivity profiles
-
blue cone
-
green cone
-
red cone
-
Output = intensity X sensitivity
-
Each type of cone can't differentiate colors within its sensitivity profile, more intense light in a less sensitivity part of its profile looks the same as less intense light from more sensitive parts
-
Brain creates color by comparing output from all the types of cones
-
Chromaticity diagram
-
Monitors create colors by mixing color from three color primaries
-
www.cs.rit.edu/~ncs/color/a_chroma.html
-
People with normal color vision can see all the colors that a monitor can create
-
Red/green color blindness
-
Types
-
Protan - red defect
-
Only have two cones, green and blue, to sense colors
-
Cannot make discriminations in the red range
-
Another type is when red cones are shifted towared the green range
-
Deutan - green defect
-
Lack green cone
-
Can't discriminate greens
-
Tritan - blue defect
-
Lack blue cone
-
Very rare
-
8% of males are red/green color blind
-
2% with serious red/green color blindness
-
6% with mild
-
Red/green color blindness is a sex-linked recessive trait
-
All the color vision genes are carried on the X Chromosome
-
Confusion Lines on chromaticity diagram
-
All colors that lie along the confusion lines are hard to distinguish
-
What this means for Web designers
-
Contrast is the key
-
High contrast is easy to read
-
Medium contrast is hard to read
-
Low contrast is impossible to read
-
Extent the concept of contrast to the color blind person
-
Cranking a color up to its maximum value does not insure contrast
-
For the colors chosen, want greatest difference in luminance
-
General Rules
-
Always make sure there is high brightness contrast
-
Ask yourself if you require color to convey more information
-
Choose colors that have high contrast for color blind people
-
Choose colors that you like and then make sure they are clearly distinguishable by color blind people
-
Methods
-
Color guidelines
-
Red: avoid pure red. Use vermillion or change to orange
-
Green: avoid pure green, which is confusing with red or brown. Use bluish green.
-
Light green and yellow will appear the same to color blinds. Avoid using colors between yellow and green (which are in the range that color blind people cannot distinguish).
-
Color blind safe colors
-
Use
Vischeck.com
-
Can simulate how your pages work
-
Effect on web pages
-
Style sheets, javascript, etc. can mess up the algorithm
-
Often works better to take a screen shot of the page and run it through Vischeck
-
Effect on images
-
Can download a Java program called ImageJ
-
Does Deuteranope, Protanope, and Tritanope simulations of any image
-
Vischeck makes available filters for Photoshop
-
You can't really guess how colors will be perceived by color blind person, but its easy to test
-
Do not want to operate at a high level of precision
-
There are huge differences between display monitors
-
Older monitors with more limited colors cannot distinguish fine differences between colors
-
Printers may not have the same color range of monitors
-
Top Tools
-
Vischeck.com
-
Simulate the appearance of web pages for color blind people
-
Barrier-free presentation that is friendly to colorblind people
-
http://jfly.iam.u-tokyo.ac.jp/html/color_blind/
-
Web safe color blind pallette
-
http://www.iamcal.com/toys/colors/index.php
-
http://www.tesspub.com/colours.html
-
Simulate how colored text on color backgrounds appears to people with different color vision deficiencies.
-
Using color
-
How can you use a range of colors, such as in a map?
-
Very hard for red/green color blind
-
Use variation in gray scale, just uses black, white, and grays
-
Also works well for printing
-
In RGB, colors are created by ration between red, green, blue. Brightness is determined by the values - the higher the brighter
-
Examples of using color are in the
http://jfly.aim.u-tokyo.ac.jp/html/color_blind/
site
-
Color blind people can see colors, can identify most colors. May not be able to discriminate between colors as well.
-
If you do not need color to convey more information, do not bother
-
Are some people completely colorblind
-
Yes, usually the result of a head injury
-
Some people are missing all three cone receptors
-
Some people only have the blue cones
-
Failing night vision
-
May be the result of generally poorer vision as they get older
-
Some degeneration of cones
-
Brightness versus saturation
-
Brightness is brightness/darkness
-
Saturation is about purity of color
-
HSB color system lets you adjust brightness (B)
-
Makes it easy to clarify difference between saturation and brightness
-
Can convert back and forth between RGB, HSB, CMYK and other color models easily in most graphics programs.
-
Can you test contrast by printing out page on black and white printer?
-
Not a perfect test, but is a good practice
-
Not a good way to simulate color blindness
-
Can give a sense of page contrast, but some browsers adjust image for black and white when printing.
Back to Top