Growth House Logo Site Map
Search
Home
Help us keep helping -- small donations make a difference!
Growth House > Technology > Web Accessibility

Color Index
book coverOver 1100 Color Combinations, CMYK and RGB Formulas, for Print and Web Media

Color Logic for Web Site Design
book cover Over 250 illustrations accompany clear, concise text.

Accessibility for Everybody: Understanding the Section 508 Accessibility Requirements
book cover The Section 508 rules don't just touch on the Internet, they provide rules about every aspect of computer use.

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

The following palettes simulate how some types of color blindness affect color perception.
216 color blind web colors

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.

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

Can color blind users see your site?