Vision Team Home > Color Standards for Accessibility

Links

Visibone Color Palette
Interactive palette tool.

6X6X6 Color Palette
Victor Engel's map of the 6X6X6 color palette.

Colors On The Web
Automatically select complementary colors.

Colour Schemer
Automatically select complementary colors.

Newman Services Colorpicker
Will auto-generate HTML code. Also offers a color blindness filtering tool.

Vischeck Color Blindness Tester
Simulates the effect of red-green color blindness on colors.

Lighthouse color design tutorial

Designing for the color-challenged

Carl Henderson's interactive color tester

Q42 color blindness simulator

Color issues in aging

Can color blind users see your site?

Color Standards For Accessibility

Visual deficit due to age

  • In the United States, about 25% of the population is 50 years old or older, the age at which declining visual acuity sets in. With age the lens and cornea experience yellowing that blocks short wavelength light, causing blues to look darker. Elderly persons can have problems distinguishing between colors that differ mainly in their blue content, such as red versus purple, or green versus blue. With age the pupil shrinks in size and the lens darkens, reducing the amount of light which enters the eyeball. By age 60 the amount of light entering the eye may be only a third of that entering the eye of a 20-year old. This makes all colors seem dimmer. To compensate for lower visual acuity make text larger and use bright colors with high brightness contrast.
  • Persons with poor visual acuity often configure their web browsers to display text in larger sizes than persons with normal vision. Do not use absolute size specifications for fonts in your web pages because this defeats the ability of the user to have their web browser make compensations automatically. Our CSS style sheet is designed to maximize the ability of the user to control the display size of text to meet their personal preferences.

Visual deficit due to color blindness

  • The incidence of color vision defects varies greatly between populations. Deficits are more common among males than among females. About 8% of Caucasian males have some form of color deficit, 6% for Asian males, and 4% for males of African descent.
  • For persons with dichromatic color blindness, white, black, blue, and yellow are the colors that are least likely to be confused with one another.
  • Limit the number of colors that are used, and choose these colors carefully to maximize their differentiating capability.
  • Use colors that differ greatly in brightness to keep high contrast between them. The contrast between bright and dark can be distinguished even if the colors are not seen as you might expect.
  • The lightest colors are white and yellow, and yellow can generally be distinguished from white. This is why our CSS style sheet uses a yellow hover color to accent links.
  • The darkest colors are black and blue, and min-range blues can generally be distinguished from black. This is why our CSS navigation classes use mid-range blue tones.
  • Don't depend on color to convey information in charts, navigation areas, or images. Use shape, size, labels, textures, and line shadings instead.
  • Use ALT= tags on all images.