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.
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.
The following palettes simulate how some types of color blindness affect color perception.
Our standard color palette has been chosen to facilitate access by people with visual disabilities, including color blind users. Key colors are defined in the standard
cif.css style sheet.
This is the "crumbtrail" standard class that is used to provide location and navigation clues to the user.
This is the "feature-cell" standard class that is often used to provide an accent. It uses a yellow color that can be perceived clearly by color-blind users.