If You Pick One Color, Pick Them All
A surprising number of Web sites have color specified for body text, headings, and links of all kinds yet not for the background. Because your visitor may have any color set in their preferences, they may:
- See an incongruous or alarming combination of colors.
- Worse happens when your visitor's browser preferences are light on dark, and the site is dark on light or vice versa. The visitor may find the text invisible, dark on dark or light on light.
The rule of thumb to avoid these problems is: If you specify one color, you must specify them all.
Recommended Practices
Forget <font>, use CSS
The proper, modern way to set color in a Web page is to use Cascading Style Sheets. This is strongly recommended over the use of <body> attributes and the <font> element in HTML, because CSS is more flexible, easier to maintain and saves bandwidth. Use the CSS properties <color> and <background-color> or its shorthand <background>.
Example
The background, foreground and link colors are all specified in this simple black on white page.
html, body { background: #fff; color: #000; } a:link { background: #fff; color: #037; } a:visited { background: #fff; color: #636; }
Further Reading
Some of the advice here differs from ours.
- What's wrong with the FONT element? by Warren Steel
- Effective Color Contrast - Designing for People with Partial Sight and Color Deficiencies by Aries Arditi
- When Bad Design Elements Become the Standard by Jakob Nielsen
- Let Users Control Font Size by Jakob Nielsen
- See also the W3C CSS Validation Service
About the "QA Tips"
The W3C QA Tips are short documents explaining useful bits of knowledge for Web developers or designers, hosted and produced by the Quality Assurance Interest Group at W3C.
While the tips are carefully reviewed by the participants of the group, they should not be seen as anything else than informative bits of wisdom, and especially, they are not normative W3C technical specifications.
Learn more about the Tips, how to submit your own pearls of wisdom, and find all the other QA tips in the Tips Index.