I’ve been having some fun over the last few weeks slowly creating and tweaking the new design for Digital End and now it’s almost complete. I decided to run the XHTML and CSS through the available validators and while the XHTML validator (as most people know) is pretty good and precise, the CSS validator (which I haven’t used for some time) is pretty strange.
CSS warnings?
The W3C CSS Validator quite correctly picks up errors in CSS, but it also gives some fairly strange warnings. For example, the validator warns that you should have a background-color for every color attribute that you use, and vice-versa, which seems overly strict:
Line : 160 (Level : 1) You have no background-color with your color : h1
Why does this happen
After doing some reading, it appears that this is to ensure that the designer has considered the contrast between the text and the background if the user applies their own stylesheet, which commonly happens with browsers for users with various disabilities. This is all very well, but any browsers that do allow you to use your own stylesheet, also allow you to override the designer’s stylesheet entirely, or disable it, as Opera’s Author/User mode can do.
Obviously, a good designer will ensure that there is a high contrast between the background and the text, wherever it is, but frequently the text’s colour and the background behind that text, will be styled in different elements. Unfortunately the validator isn’t intelligent enough to realise this, although it does warn you when you have the same colour for your text and background in the same element.
Conclusion
Obviously that’s why these are just warnings; what you’ve done could be a big problem, but it probably isn’t - just check! Until the CSS validator is better at figuring out if you’ve made a mistake or not when it comes to colours and readability, designers will simply have to take the warnings from the validator with a pinch of salt.