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.
- Previous post: Accessibility for all vs. for people with disabilities
- Next post: Full Flash websites and SEO
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
Thanks for explaining this and giving an example too. I always wondered about those warnings but invariably just ignored them. At least now I understand and can correct where needed. Also the tip about specifying both color and background-color high up in the document hierarchy is one I will certainly try to implement.
Roger: Thanks for vocalizing this. I have been saying it's not a big deal for awhile now, to people who would ask via email or on forums. I wrote up a rant last year, entitled CSS Validator Nonsense...
http://sonspring.com/journal/css-validator-nonsense
Still, your soapbox is quite a bit taller than mine (and implictly your voice is more authoritative), and I think more people needed to hear this. Otherwise, there would be many needless instances of background: inherit; littering everyone's stylesheets, just to appease a picky validator! :)
Thanx for the article.
Many people already doesn't know the difference between a warning and an error.
Thank you for this! I figured they were simply warnings, but I either forgot or didn't know to look up what they truly were. It's a bit noob-y on my part, but thanks :D
Otherwise, there would be many needless instances of background: inherit; littering everyone's stylesheets, just to appease a picky validator! so, is it bad practive to use background: inherit; for that reason? I've seen a few cases where inherited background was needed, especially in cases where images were disabled
I always had been confused about this. And as a result, I did not bother validating my CSS. I understood this recently - before this article. But thanks for the writeup.
I was battling with this just yesterday on my new design for our company website. Thanks for clearing things up.
The validator has a few other annoyances as well, the line-height parser bug, and the fact that it doesn't allow for vendor extensions, which are part of the spec (See: CSS Vendor-specific extensions).
It's not just that issue, but also for when background-images are used without a colour. Imagine you're got white text and sat it on top of a blue gradient background image. If you are browsing with images turned off you'd end up with your white text sitting directly above your white body. The correct thing to do then is to specify some blue as a background colour for your element in addition to the image.
Nice review Roger, I was wondering for some time about CSS warnings.
After reading your article, I feel a bit wiser now - and I didn't even realise you can use your own stylesheet to override/merge (or whatever the term is) an authored stylesheet.
Thank you for the article! It's been very helpful!
Mats Lindblad, just because CSS specifies an extention mechanism for CSS doesn't mean that style sheets that use them are conforming. They are, by definition, invalid CSS.
Outstanding. On my Firefox browser I have a default #999 gray background. I see tons of sites that don't spec a background-color on body (ugly), and if they use, for example a text-color of #999, it's invisible to me so some of those warnings really do need to be heeded and developers need to pay attention to their color layers.
Nice to see it isn't just me. I try and encourage use of both where one is specified. All too often the reply I get is "not needed as they inherit ...". This is true as far as it goes but sometimes it leads to carelessness, as Mike points out above. I have had my own little "don't assume white background" campaign for some time. It's amazing how many sites - some quite high profile (including some web designers and members of 9Rules) that don't have a default background colour set - and even more amazing that for a minority of those the response is "so what, it's no big deal."
Keep fighting the good fight grin
Problem: if you set Element {background-color: transparent} for styling reasons. The www-validator will see this as a warning too. If you have multiple layered elements or nested elements, you wont always be able to set a colour for the background again for styling reasons.
Thank you! I really think this should be clearly stated on pages returned by the validator that include warnings. With that caveat, they could then include the information about using the logo. At best, tracking down the warning information is time-consuming, and at worst it can confuse, frustrate and alienate those newbies who then give up on writing conforming code.
It's a bit ironic that the "standard-bearer of standards" would present so much information without any type of feeback to help you proceed....
And while we're on the subject, what's with the "To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML." messages?! A simple "Don't forget to check your HTML documents" would do.
/crosses "Daily Rant" off the to-do list
About the line-height thing:
I wanted my sheet to validate so I did this on one of my elements which was previously formatted with line-height: 0:
sup { line-height: 0.00001; color: #886018; }
It validates--funny thing, when you check it with the css validator you get this:
sup {
}
I have no idea why.
Great article. I'm anal, so to avoid this "warning", I often use the "inherit" property (i.e. background-color:inherit).
Sorry, comments are closed for this post.