If you set one color, set them all

As a lark, I changed the default colors in my Firefox browser to have a black background as the default, and red text as the default foreground color.

user_pref("browser.display.background_color", "#000000");
user_pref("browser.display.foreground_color", "#ff0000");

There was no real point to this, red on black isn't easy on the eyes, and most sites use CSS to style their pages.

However, many sites, many many many sites, appear to change one style (the background color typically) without changing the foreground style (the color attribute in CSS).

If you're going to change the color of either your text (using color: or your background (using background:) then you must set both colors, otherwise you'll get unexpected results.

The best benefit of this little excercise? I discovered that on my own sites I'd carefully set colors for all sorts of elements and classes, but not the default color for text.

Following are some screen shots of random sites I read which have set one, but not both background and foreground colors. The browser in use is Firefox 1.0.4 on Microsoft Windows XP.

Yahoo.com

Yahoo! sets colors for text items and the background colors for various divs and sections, but not the background color for the page.

Washington Post

The Washington Post site sets background and foreground colors for its homepage, but does not set a foreground color for article pages:

Sixapart.com / Movabletype

The MovableType site doesn't set a default foreground color for text, so you get my setting of red:

iaslash.org

IASlash sets a foreground color (some setting of grey?) but no background color:

I've posted additional screen shots on flickr (which, btw, does not set a default color for text elements).

Some sites seem to have the colors set on entry pages, but not on article or content pages (or error pages).

Posted in

Comments

Comments are hosted through disqus effective November 2008.