CSS Validator colour warnings are not errors

It’s quite common for CSS authors to think that the warnings the CSS Validator reports are errors. This is especially true for the warnings “You have no color with your background-color” and “You have no background-color with your color”.

Those particular warnings are there for accessibility reasons and to remind you that you need to take care when specifying colours. The validator is trying to help you reduce the risk of your author stylesheets interfering with user stylesheets or system-wide colour settings. From the W3C CSS Validator FAQ:

If you don’t specify color and background-color at the same level of specifity, your style sheet might clash with user style sheets.

As an example, let’s say you prefer negative text (light-on-dark) and have set the default colours in your browser to white for text and black for background. This would be similar to having a user stylesheet that contains the following:

body {
	color:#fff;
	background-color:#000;
}

Next, consider what happens when you view a page that has the following HTML structure

<html>
	<head></head>
	<body>
		<div id="entry">
		</div>
		<div id="comments">
		</div>
	</body>
</html>

and this author CSS:

body { background-color:#fff }
#entry { color:#454545 }

Yep. #comments will have white text on a white background. This example is not made up. I changed the colours in Firefox (Preferences / Content / Colors…) to white on black and went looking for a site where this would happen. It didn’t take me long since the first site I went to had unreadable comments. The fix is easy—the site author just needs to change the body rule to this:

body {
	color:#000;
	background-color:#fff;
}

I hope that example makes it easier to understand why the color and background-color warnings are there. It’s also important to understand that it is often not necessary to get rid of all colour warnings. If you specify both color and background-color high up in the document hierarchy, as in my example where they are set for the body element (I always set them for the html element as well), you should be fine. color will be inherited throughout the document unless redefined by later or more specific rules, and the background-color will shine through since the initial value is transparent.

This means that you do not need to specify both color and background-color for every rule that sets either of them. You do however need to check this manually since the CSS Validator doesn’t take inherited values into account.

Again, the warnings are just warnings and can be ignored if you have specified both color and background-color for html or body.

And finally a validation tip. The default setting for the CSS Validator is to use the CSS 2 profile and display warnings. If you don’t want to see any warnings when validating your stylesheets, use the Advanced Interface to disable them. There is also an option to choose which profile to validate your stylesheet against. If you’re using CSS 2.1 or 3 properties or selectors, that’s very useful.

Warnings and errors are there for a reason—you just need to learn how to interpret them.

Posted on October 5, 2006 in CSS