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.

Color-Blindness Transformations

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 "navigation-cell" standard class that is often displayed as a left navigation bar. It uses a blue that can be perceived clearly by color blind users.

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.