copyright © CSSPG, lud October 18 2000

 for practical use of CSS

CSS Color Issues

this document is located at...
<URI:http://css.nu/pointers/CSS-colours.html>

 Color Considerations 

Due to recent discussions in the newgroup, CIWAH , these comments are intended to reconcile the ability of a CSS author to set colors and the ability of a user to set overriding colors. Given the usual CSS Caveats, it seemed reasonable to re-visit the issues raised by Warren Steele in his essay, What's Wrong with FONT, in the areas of author-designated color.

The advice to set all colors if you set one color is still viable. ⁽¹⁾ If you set background-color in your CSS file, be sure that you also set color. If you have the background-color set to Black, and do not set your text color to contrast, a viewer of your document with text color set to black will see...nothing. Even in a less extreme situation, user-specified colors may not interact well with the colors you have chosen. If, for example, the user has specified 'darkolivegreen' for text in their stylesheet, and failed to specify a light background-color, your document with the black background will be barely legible. This instance, however, cannot be your fault. The user should exhibit the same good sense the author has in setting 'all or none' in colors.

A lengthy discussion of 'highlighting' ⁽²⁾ produced a variety of responses, with a variety of rationales, as well. As is often the case when reasonable people disagree, there was no single 'correct answer by consensus'.

A suite of tests was devised to test overriding by:

• User defined colors in browser preferences and
• User defined style sheets (IE4x only)

Varying colors were set/un-set so that differences would readily appear.

Select:

• Black type on Red background
• Blue type on White background
• Fuchsia type on Maroon background
• Maroon type on Fuchsia background
• Navy type on Yellow background
• Red type on Black background
• White type on Blue background
• Yellow type on Navy background
• Unpleasant surprise #1
• Unpleasant surprise #2
• Unpleasant surprise #3

⁽¹⁾ Side note: In looking at a provided URL in a ciwa-stylesheets post, I discovered that the author had set background-color to black and color to white in his CSS file, then had set background to white and text to black in one of his HTML files. Because of specificity, the resulting rendering was certainly not what the author intended. Because he had set color on <Hn> and <LI> in his CSS file, those elements appeared in the rendering, but the majority of his document was invisible.

⁽²⁾See the highlighting tests.

CSS Pointers Navigation

Index · Browser Bugs · Books · Tools · DHTML · XSL & DSSSL

Main Site Navigation

Index · Articles · Examples · Experiments · FAQ · Markup · Styles · Who is?

CSSPG ~ Sue ~ Roland