Accessibility (dare I say it) guru (oh dear I said it) Jeffrey Zeldman recently pointed out on his blog that very few (and I’ve tested this, it is very few) websites actually specify CSS body background colours. Some of you may think “What? How stupid of them!” and some of you may think “What? Why the hell does that matter?“, well believe it or not it does matter.
Users, and I do not mean disabled users, visually impaired users or accessibility freaks but all users have the ability and many take advantage of the ability to specifiy default body background colours, font colours and font sizes among other things. This can aid readability, help colourblind users, satisfy personal preference and hell; some people just love to mess around. The problem is, by forgetting or neglecting to specify a body background colour - your website could appear as so:
An exaggeration? No, not really. If you don’t believe me check out some of the reliable comments on the respective article. A surprising number of users choose to maintain a default browser background colour other than white.
Good news!
Let’s face it, all you have to to avoid this (assuming your site’s background colour is white) is to slip the following into your CSS:
body {
background-color: #ffffff;
}
No way! Yes way. Just a little something to remeber.
A note on font sizes
As I mentioned above, users can specify default font sizes and colours as well as background colours. So it’s also important to take this into account. The chances are you’ll specify a font colour naturally to suit the site, but people often dictate font sizes in pixels (and yes, I’m no exception). Always try and use ems to describe your font sizes - for more information on typography accessibility you can check out my recent post on Accessible Web Design or this fab article on A List Apart.
Howie
Good point you make. If the CSS was validated, it should pick this up. I seem to remember that the validator requires ALL elements to have a background specified. This is easy too. Once the body background is specified, set all (*) elements to inherit.
riya
nice post
nathan
@Howie - That seems true, although I’m sure I’ve created sites without specifying a body background before and it’s still validated. I have feeling the case is if you specify a background image or other values using just the background property, as so:
body {
background: url(images/body-bg.jpg) repeat-x top;
}
… the background colour is interpreted as transparent - which in turn validates.
But regardless of whether this validates or not, it doesn’t get around the fact that a colour should still be specified, as so:
body {
background: #fff url(images/body-bg.jpg) repeat-x top;
}
Jin
I think some sites can get away with this if their main content is encased in a DIV, and the DIV(wrapper) itself has a bgcolor assigned. I’m just glad the default bgcolor is no longer the netscape gray. /shudder.
bgcolor is imporant when it comes to elements that use transparent/translucent background images. Without assigning a bgcolor on top of that, IE7 doesn’t render the text with cleartype on.
Seema
Nice article about CSS body background colors.I think CSS ia vast field to learn.
Clay McIlrath
I have a tough time crediting anything that Jeffrey Zeldman writes about given the fact that his whole site is 5 shades of monochrome greenish and i’m fairly certain it doesn’t meet w3c accessibility standards for color contrast..
But overall good point.. I’ve always specified a color on my body so i think any sites i’ve developed should be good.. but good to note in the ole’ nogger just in case
Acessibilidade: Sempre defina um cor de fundo no seu site » Pinceladas da Web - Reflexões sobre XHTML, CSS, PHP e WebStandards Said:
[...] soar estranho, mas veja a opinião de outras pessoas como Jeffrey Zeldman, Roger Johansson, redswish. No Flickr existe até uma galeria com alguns “desastres” ocorridos em alguns [...]
dani
I did, defining background-color and color will help visitors. But actually I didn’t realize that some users have set a non-white background color.