What’s up with #missingbodybackgroundwatch

I wrote a post the other day sharing a tiny tip that makes testing websites easier (go read, it’s short, I’ll wait), and in that post, called out the first site that I found that had a missing body background colour.

Since then, I’ve spotted a quite surprising number of sites that have the same affliction and have (mostly for my own edification, and with half a mind on a blog post further down the road) been posting each site to twitter using the hash tag #missingbodybackgroundwatch and today, a couple of people asked what it was all about.

So. A bit of explanation.

Working with a changed colour scheme was, for the most part, not a problem… unless the site in question had specified the text colour to be a similar shade grey (or anything else that was quite light) at which point the entire thing became almost entirely unreadable as the colour contrast all but disappeared. Doh!

A better example would be a site that specified black for its text and neglected to set white as the background colour. If anyone visits using a browser set to the default colour scheme (or using Windows or Mac default colour schemes) that’d be fine, but if, for example, someone was using a high contrast reverse colour scheme, the default browser background colour would more than likely wind up being black, combine that with black text, and it just doesn’t work.

Since a picture is worth a thousand words, here are three screenshots that illustrate why it’s a problem.

The site in question is the New Statesman (I can’t remember why I was looking at it – probably followed a link from twitter).

Example 1: New Statesman viewed using the standard Firefox (cos that’s what I use) default colour scheme. Looks fine, right?

Example 2: Viewed using a different background colour (to imitate a different colour scheme). I chose pale green because it illustrates my point better than grey. It doesn’t look too good, but at least it’s still readable.

Example 3: Viewed as it would be if a user had chosen a high contrast reverse colour scheme. Some text is readable, but lots of it isn’t (which is a bit of a problem for a newspaper/magazine site.

It’s such a tiny thing, but the impact can be huge.

So, if you’re going to specify a text colour, make sure you’ve specified an appropriate background colour too. That doesn’t mean that you have to specify a background colour on every element. Provided that somewhere underneath your text you’ve specified a background colour that has sufficient contrast against the text colour, you can let the cascade do its thing.

Obviously, if you decide to change to using light text on a dark background in an area where the rest of the site is dark text on a light background then you’ll need to specify both.

Oh, and make sure that wherever you use background images that you back them up with an appropriate background colour as well. Otherwise, all that lovely contrast disappears if, for any reason, images are not available.

I’m going to keep collecting sites with a missing body background colour, do a bit of research and write a post about it in a wee while, so in the meantime, if you feel like it, change your background to something else (in Firefox, you’ll find it in Preferences, Content, Colours, then click on the box next to Background and just pick something else from the handily provided swatch) and if you spot any, it’d be ace if you’d post them to twitter using the #missingbodybackgroundwatch hash tag.

Other, possibly related, posts:

1. A tiny tip that makes testing websites easier
2. Notes from Bristol Usability Group talk by Andrew Arch