Penn State Learning Design Community Hub

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 palettes
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 difference in color value between two areas where 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

• Text should be legible in black and white
• Beware of "subtle" tonal contrasts that may not have enough contrast. Use the Juicy Studio color contrast analyzer to make sure contrast is above 125.

Comparing Gray-on-Gray Palettes

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).

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" Palette 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

Additional Links

Color Theory and Design

• Learning to Use Color on Your Web Site
• Bloomsburg University Graphic Design
• Color Matters
• James Saw Design Notes on Color
• University of Minnesota Duluth Color Links - Includes a variety of color blindness resources.

Web Color Codes

• HTML Goodies Quick Color Explanation
• Juicy Studio color contrast analyzer
• Web Source Net 216 browser-safe colors
• More Crayons 4096 "Web Smart" Palette

About Color Blindness

• WebAIM Color Blindness
• Wickline Color Filter - Lets you toggle between different forms of color blindness once you designate a Web address.
• Color Vision (Cal Henderson) - Test color schemes with almost all forms of color blindness
• Colors for the Color Blind - An informative yet wry look at color blindness from an actual "user". Includes links to utilities for the color blind.
• Testing the Readability of Web Page Colors