Accessible Color Use on the Web

Published: Jun 19, 2007

Roughly 1 in 12 people has some sort of color vision deficiency. Your website looks different to these people and it sometimes means they cannot see things that ‘the rest’ of the users can see. Webmasters can improve their websites with a wide variety of free tools and articles available on the Web.


 

Many pictures, documents and Web pages are hard for colorblind people to read because the people who designed them didn’t think about the problem. You can check their work for color blind visibility.

About 8% of men and 0.4% of women in the US would be helped with a color accessible website and to understand what color-blind people see we will summarize the four kinds of color vision:

  • Trichromat
    Regular vision is Trichromatic - it uses all three color pigments (red/green/blue).
     
  • Anomalous Trichromat
    People with Anomalous Trichromatic vision use all three color receptors but reception of one pigment is misaligned. Protanomaly is a reduced red sensitivity, deuteranomaly a reduced green sensitivity and tritanomaly a reduced blue sensitivity. 
     
  • Dichromat
    People with Dichromatic vision use only 2 of the 3 visual pigments - red, green or blue is missing. With protanopia you are unable to receive red, with deuteranopia you’re unable to receive green and with tritanopia you’re unable to receive blue.
     
  • Monochromat (Achromatopsia)
    People with Monochromatic vision can only see one color, so their vision contains no ‘color.’ Typical Monochromatic is when you are unable to combine colors. The second option is fully grayscale also known as Rod Monochromat and last there is atypical monochromatic where you have very low color recognition, also known as Cone Monochromat.

Check your website with free tools and articles available on the web:

  • Color Contrast Check
    The Color Contrast Check tool allows users to specify a foreground and a background color and determine if they provide enough of a contrast. The tool matches the W3C guidelines on the use of contract and color.
    http://www.snook.ca/technical/colour_contrast/colour.html
     
  • Vischeck
    Online tool for images and full Web pages on Deuteranope, Protanope, Tritanope. Provides online tools and offline filters for Adobe Photoshop to improve color accessibility.
    http://www.vischeck.com
     
  • Effective Color Contrast
    This Web article contains basic guidelines for making effective color choices that work for nearly everyone. To understand them best they explain the three perceptual attributes of color: hue, lightness and saturation, in the particular way that vision scientists use them. http://www.lighthouse.org/color_contrast.htm

Source: TechDis


Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 License.

Back to top