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