Research on Teaching, Learning & Technology

Text Color on the Web

This Page

The Best Choice . . . . according to the experts

  1. Specify BOTH text and background colors to maintain consistency across user settings
  2. Maintain sufficient contrast between text and background colors. Watch out for "subtle" tonal contrasts which may not have enough contrast for all users.
  3. Most readers on the Web prefer dark text on light backgrounds (Hill, 2001)
  4. Avoid vibrating contrasts, especially red and green next to each other (color blindness).
  5. For color blind users (Penn State Accessibility)
    1. Supplement color coding with changes in shape or text
    2. Avoid combinations of red and green or red and black.
  6. Understand mechanics of Web color pallettes
  7. Learn about the art of color design to choose effective colors and tones.

Rationale

The above rules will enhance legibility for all users including older users, color blind users and low vision users.

Basic Information

Use Contrast

  1. No matter what color is used, contrast is the most important effect when choosing colors. Contrast is the value (intensity) difference between two areas; the value is the amount of lightness or darkness in a color (Hill, 2001).
  2. The contrast of a light-colored background with a dark colored foreground (text and images) is most widely used and allows for accessibility.

Tips

Comparing Gray-on-Gray Pallettes

Darker Grays
Too Little (Dark)
Enough (Dark) Enough (Darker) Just Enough
Text:#999999
Back:#666666
Score: 51 		Text:#333333
Back:#CCCCCC
Score: 153 		Text:#000000
Back:#999999
Score: 153
 Text:#383838
Back:#B8B8B8
Score: 128
Gray Gray Gray Gray

 

Light Grays
Too Little (Light) Enough (Light) Just Enough
Text:#99999
Back:#FFFFFF
Score: 102 		Text:#777777
Back:#FFFFFF
Score: 136 		Text:#707070
Back:#FFFFFF
Score: 127
Gray Gray Gray

Avoid Vibrating Contrasts

Placing areas of brightly colored hues together can be hard for users to read because 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 (Hill, 2001),(Greenberg, 1998).

Some Vibrating Color Combinations

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

Technical Explanation

Reds have long wavelengths, and they are focused farther back in the eye, unlike blues which have short wavelengths and are focused closer to the middle of the eye. This causes a sort of 'tug of war' in the eyes between focusing on the red and focusing on the blue (Hill, 2001).

Web Color Palettes

With the emergence of new monitor technologies, the notion of web palettes has evolved.

Original 216 Browser-safe color palette

When monitors were restricted to 265 colors (or "8-bit color"), there was a defined set of 216 browser-safe colors viewable on both Windows and Macs. As Weinman (1997) notes

"These colors were chosen not for their beauty and usefulness; they were chosen from a mathematical color cube based on [six steps on three color values, red, green and blue]. This is why the browser-safe palette is sometimes called the 6 x 6 x 6 palette."

—Weinman (1997)

However, most users have monitors that display millions of colors, so the rules have been changing.

Modern Monitor Gotchas

Even though many monitors display millions of colors, they may not display them in exactly the same way. For example

  1. Newer LCD monitors are much brigther than older CRT monitors. Designers with LCD monitors often find black and white too harsh, whereas black and white are preferred on older montitors.
  2. Colors on Mac monitors are paler than those on Windows. Contrasts which are readable on Windows are too "washed out" on a Macintosh.
    Tip: Designers can switch gamma between 1.8 (Mac) and 2.2 (Windows) to test each platform.
  3. Paler shades of orange, yellow and lime green differ significantly between Windows on Mac. A color which is pleasing on one monitor may be "hideous" on another monitor.
    Tip: Designers can switch gamma between 1.8 (Mac) and 2.2 (Windows) to test each platform.

4096 "Web Smart" Pallette and CSS

Coders of CSS often prefer to code RGB colors in short hand reducing the number digits. For instance the six-digit code #FF6600 (orange) can written as #F60. The resulting short hand results in a palette of 4096 colors (16 x 16 x 16)

Although this palette is useful for CSS (especially in reducing CSS file sizes), the colors are not necessarily any "safer" than colors outside the 4096 palette.

The Art of Color Design

Entire books and courses are devoted to understanding and using color, but these tips may help.

  1. Use nature, favorite art, favorite Web sites or favorite locations as a way to find color palettes.
  2. Remember your audience. Color palettes may have cultural connotations. For instance, a very colorful palette may be appropriate for a site aimed at children, but not to administration.
  3. Use bright colors carefully - The right amount can draw the viewer to important elements. Too much can be overwhelming.
  4. If a color seems "too extreme" try to use a less intense versions (darker, lighter or grayer).
  5. Colors can change "appearance" depending on an adjacent color. A shade of red that works well with aqua may not work next to peach. Try minor adjustments in the color if you see a "clash".
  6. Remember that value (brightness/darkness) is as important as the actual color within a color scheme.
  7. Safe (but "boring") color palettes include using shades of one color, colors adjacent to each other on the color wheel, or all neutrals.
  8. More exciting (but potentially overwhelming) color palettes include those which mix warm and cool colors, brights and neutrals, or colors from different parts of the color wheel. Generally the "different" color should be used less often as an accent.

References

Greenberg, C. (1998). Design and cognition. Beyond HTML! Information Outlook 2 (11): 26-30.

Griffin, R. (1998). Visual Design. Chapter 7. Pages 7-1 through 7-22.

Hill, Alyson. (2001). Readability of Websites with various foreground/background color combinations, font types and word styles. Retrieved May 14, 2003, from http://hubel.sfasu.edu/research/AHNCUR.html#Fig1

Penn State University (1999,2006) "Color Schemes and Backgrounds" from Creating Accessible Web Sites
Retrieved Jan 11,2007 from
http://accessibility.psu.edu/color.html

Weinman, Lynda. (1997). Desktop Media: Web color wizardry. MacUser, May 1997. Pages 71 through 73.

Web site design (1999). Retrieved May 14, 2003, from http://www.jmsolutions.com/faq/faq.htm

Additional Links

Color Theory and Design

Web Color Codes

About Color Blindness

Top of Page