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.

A tiny tip that makes testing websites easier

When I worked at RNIB, I changed my default desktop colour scheme because the default windows scheme gave me headaches and eye strain. The department of unintended consequences then stepped in and handed me a neat way to know whether a site was missing it's body background colour without having to check any code, because it changed the default browser background from white to muddy grey. Since moving to using a mac, I've grown used to the white default background in the browser, and this morning, had a moment of panic when I realised that I wasn't sure if I'd specified the background colour in the templates I'd built (and which were delivered to the client) last week.

I had, of course, but I realised in that moment that it'd have been much easier if I went into the settings and changed the background colour away from white (to grey, but you could choose whatever makes you happy), just to avoid that kind of panic in future. So that's what I did.

Disappointingly, the first site to fall at that particular hurdle was the Firefox default Google search home page.