Web Access Centre Blog

Would you even know if it was?

For most people, the answer would be no, and it’d be down to a very simple thing - your default operating system colour scheme. Most people who use windows use the default colour scheme, which comes with a white background colour for applications, such as Internet Explorer. Firefox for Windows also comes with a white background colour by default, regardless of operating system default.

So what’s the problem?

The problem is when you forget that you need to specify that you want that white background colour in your web page.

It’s a really simple problem, and it’s really easy to fix, and it’ll make sure that your site won’t, at best, look a bit weird, and at worst, be completely unreadable, if someone uses a non-default colour scheme.

The scale of this problem became really obvious when we were carrying out the SOCITM assessments for the Better Connected 2007 report. Since I use a non-default colour scheme (Windows Plum (high colour)), instead of Windows Classic or Windows Standard, I get shades of muddy grey, which are far easier on my eyes when sitting in front of a screen all day. A side effect of this is that it shows up, instantly, the sites which have forgotten to specify a default body background colour. During the Better Connected testing, I saw this so often that I started to count. By the time I’d finished my allocation of manual tests, I reckoned about 40% were missing their default body background colour, which is a shockingly high percentage.

Since then, I’ve gone back and done some further testing. Starting at A, I worked my way down the list of sites until I’d checked half the number of sites - 234. Out of that fairly hefty sample, a staggering 35% (not that far off my original estimate) were visibly missing their default body background colour.

The screenshots below are from Amber Valley council, who I promise are not being victimised, but were just chosen because it’s a good example of the problem.

Screenshot 1 shows the site as it was intended to be viewed, with a white background and readable text.

Screenshot 2 shows the site as I see it, with a grey background and barely readable text..

Screenshot 3 shows the site as someone who uses a reverse high contrast colour scheme would see it, with a black background and unreadable text.

You can avoid this kind of issue by simply making sure the following is in your CSS:

body {background-color: #fff;}

preferably paired with:

color: #000;

To ensure that contrast will be maintained in the event that you forget to specify a text colour for any piece of text.

Obviously, you can replace #fff and #000 with whichever background and text colours you’re using. This is especially important if you’re using a large or repeating background image, as a background colour still needs to be specified to ensure that contrast is maintained if images are switched off.