In terms of color blindness, the most problems seem to occur with spot colors especially when many colors are combined. Photographs tend have enough color and shade changes to be interpretable to color blind users.
Do not rely on color codes alone to provide information. Always include additional changes in shape or text.
SECTION 508 - Web pages shall be designed so that all information conveyed with color is also available without color.
Avoid contrasts of red and black, since some color blind users do not perceive reds (i.e. red is the same as "no color" or black).
In terms of color blindness, the safest colors are black, white and gray followed by blue and yellow. Contrasting red versus green is the most problematic, but can be usable so long as supplemental information is provided.
To ensure that color contrasts are visible to the most viewers, use a
color blind simulator. Having
enough contrasts in darkness is important for low vision and color blind
users.
Note: There are some color combinations, such as some combinations
of teal and yellow which are O.K. in grayscale, but still problematic for
color blind users.
Adjacent areas of brightly colored hues also cause difficulties for normal-vision because of "color vibration."
Avoid long blocks of light text on dark backgrounds; they are generally more difficult to read.
Strongly textured backgrounds should be avoided since they make text harder to read. Subtly textured backgrounds or colored/textured toolbars can interest without compromising legibility.
Subtle variations of colors may be lost in different monitor settings. For instance, flat panel screens are brighter than older monitors; Mac colors are lighter than Windows colors. Finally, some low vision users set their monitors to high color contrast, reducing the mid-value range.
The human eye contains rods which detects levels of light (dark versus bright) and three kinds of cones which distinguish among the different colors. If none of the cones are functioning (very rare), then a person has grayscale vision. If the cones are semi-functional (also rare), then the person sees colors, but they are muted.
Some color blind users are lacking the capability to detect the lower color wave frequencies associated with red. For these users, red color waves read as "no signal", or "black". These users confuse red and black, so this contrast should be avoided whenever possible. Red and white is legible, but indistinguisable from black and white.
The black text on red sign becomes black on black for some color blind users.
| Normal Vision | Warning | Warning |
|---|---|---|
| Red Vision Missing | Warning | Warning |
If one or two sets of cones do not function correctly, then a person will have trouble telling certain colors apart. Almost 10% of men are red/green color blind; another group are blue/yellow color blind. Despite the fact that red-green contrasts are very distinct for about 95% of humanity, there are about 5% of people for whom this is completely non-functional. This is exacerbated by the fact that red and green are nearly identical on a gray scale monitor. See examples below.
NOTE: Red-Green color blind people are better able to find camouflaged objects in natural settings. See Visicheck Article for more details.
The paragraph above is "Merry Christmas" in green text on a red background which a color blind person may not be able to read. This is also problematic because it causes a visual vibration for users with normal color vision.
In grayscale, there is only a slight contrast because red and green are of nearly equal brightness.
Appears as dark olive on medium olive in normal color vision. Simulation courtesy of Visicheck.
Actually appears as teal and magenta. Simulation courtesy of Visicheck.
The yellow Background separates the areas of red and green and provides a contrast in brightness, making the sign more legible. See the grayscale example below.
Although it is difficult to determine exactly how a color-blind person sees the world, it is usually the case that if something is legible in grayscale, then a color-blind person can also view the information, although it may not be particularly appealing to that person. This is because, in most cases, the rods are functional and are still able to distinguish levels of light and dark.
Note: There are some color combinations, such as some combinations of teal and yellow which are O.K. in grayscale, but still problematic for color blind users.
Color Vision (Cal Henderson) - Test color schemes with almost all forms of color blindness
Visicheck Color Blindness Tester - Allows you to test images and live Web pages for red-green and blue yellow color deficiencies.
Color coding is possible as long as the color information is supplemented with differences in shape or text. Here are some accessible and inaccessible examples.
 |
Check site with color checkers or grayscale minor |
 |
Use color coding alone |
|
Use blue/green or black/white/gray |
|
Use red/green colors |
A color blind user would have trouble distinguishing a green box from a red box. Furthermore, a colored cell would be inaccessible to screen readers unless invisible text were included.
|
+
|
Check site with color checkers or grayscale monitor settings |
|
x
|
Use color coding alone |
|
+
|
Use blue/green or black/white/gray |
|
x
|
Use red/green colors |
Color blind users can rely on cues of shape in the "+" and "x" symbols to distinguish "do's" and "dont's". Using text symbols with a key is also more accessible to screen readers.
|
Do
|
Check site with color checkers or grayscale minor |
|
Don't
|
Use color coding alone |
|
Do
|
Use blue/green or black/white/gray |
|
Don't
|
Use red/green colors |
Color coded, but text labels makes it accessible to color blind users and screen readers.
In addition to the issues of color blindness mentioned above, placing areas of brightly colored hues together can be hard for users with color vision to read. Bright colors cause an afterimage effect.With only one bright color, the after image is usually not bothersome, but with two bright colors together, the afterimages interfere with one another, causing a "visual vibration." This can be reduced by placing a neutral color between the two areas of bright colors or by making one of the colors a pastel or dark shade.
|
red/green |
red on green |
green on red |
|
blue/orange |
blue on orange |
orange on blue |
|
green/magenta |
green on magenta |
magenta on green |
|
yellow/cyan |
yellow on cyan |
cyan on yellow |
|
blue/magenta |
magenta on blue |
blue on magenta |
|
orange/yellow |
yellow on orange |
orange on yellow (not so bad) |
|
blue/green |
green on blue |
blue on green |
Although changing a background on a Web page to a bright color or distinctive background can add excitement, these backgrounds can also make it difficult to read Web pages. In general, it is best to use dark text on light colors and subtly textured backgrounds. Here are some examples below.
Although
changing a background on a Web page to a bright color or distinctive background
can add excitement, these backgrounds can also make it difficult to read Web
pages. In general, it is best to use dark text on light colors for long passages
and
subtly textured
backgrounds only. Here are some examples below.
This light green text on dark green would cause eyestrain if an entire article were formatted this way.
Although
changing a background on a Web page to a bright color or distinctive background
can add excitement, these backgrounds can also make it difficult to read Web
pages. In general, it is best to use dark text on light colors for long passages
and
subtly textured
backgrounds only. Here are some examples below.
However, even this dark green text on lighter green should be used only for short paragraphs. An entire page of this could be difficult to read.
| This
is a not-so-good Celtic background texture - Although
changing a background on a Web page to a bright color or distinctive
background can add excitement, these
backgrounds can also
make it difficult to read Web pages. In general, it is best to use dark
text on light colors for long passages and subtly textured backgrounds
only. |
In a visual browser, this text is almost illegible because of the strong contrast and rapidly changing colors in the background image.
| This
is a much more subtle Celtic background texture - Although
changing a background on a Web page to a bright color or distinctive
background can add excitement, these
backgrounds can also make it difficult to read Web pages. In general,
it is best to use dark text on light colors for long passages and subtly
textured backgrounds only. Here are some examples below. |
The background image is more subtle, almost invisible, and is lightly colored. In small passages, legibility would be acceptable.
Site Menu:
Home Page/Main Menu
| Section 508 Guidelines
| Quick Checklist
| Details by Tag
| Links
| I.T.S. Seminar Page
| Sitemap
©1999-2006 Pennsylvania State University.
This Web page is hosted by (by Teaching and Learning with Technology, a unit of Information Technology Services. Please contact the Webmaster if you have any questions.