ansaurus

Question

You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.

Answer 1

A:

It covers theoretical problem when font colour is same as the backgound, i.e:

background-color: #fff;
color: #fff;

You don't need to worry about it, but if you want to get rid of the warrning I'm guessing just set the background colour as per the message.

rochal 2010-04-23 11:17:57

It is a real problem. It crops up most often when authors assume people have their default main background colour set to white, but it can also conflict with user stylesheets.

David Dorward 2010-04-23 11:19:37

Good point. What about background colour of the elements inside? Does *every* div need a background then if you set css color property on it..?

rochal 2010-04-23 11:21:56

You don't know what the user has configured their browser to do. They might have `p { background: white; color: black }`. In general, always specify both if you can.

David Dorward 2010-04-23 11:23:04

So * { background-color:#fff; color:#000; } would probably fix the problem? Declare it in first line, and then overwrite it by following rules.

rochal 2010-04-23 11:45:04

No, it wouldn't help at all. The cascade matters. Having a background colour is applied to an element in the least specific part of the cascade has little impact.

David Dorward 2010-04-23 11:53:08

Answer 2

A:

Add background-color:#/*whatever you want*/; to all 57 selectors and you should be fine.

Kyle Sevenoaks 2010-04-23 11:22:40

`html { color: #000; background: #FFF; min-height: 100%; margin-bottom: 1px; font-size: 100%; }` is already defined as a first thing in my css. even though i'm getting this warning

metal-gear-solid 2010-04-23 11:53:41

A "reset" isn't going to help.

David Dorward 2010-04-23 11:53:46

Fair enough, then just add the rule to your other selectors.

Kyle Sevenoaks 2010-04-23 12:01:58

Answer 3

A:

You solve it by:

Make[ing] sure that cascading of colors keeps the text reasonably legible.

It's a warning that there might be something wrong, but that no tool is capable of discerning whether or not there actually is anything wrong.

(And of course, 'reasonably legible' is pretty open to interpretation. I use colour contrast analyser, many other, similar tools exist.)

graphicdivine 2010-04-23 13:17:29

Answer 4

+1 A:

Good explanation @graphicdevine on why the warnings are there.

Instead of hard-coding

background-color: #xxx;

for each tag, I read on a forum that suggested putting this in:

background-color: inherit;

Also, anywhere you set a background color but not a text color, put in:

color: inherit;

It resolved all of those type of warnings for me.

Curtis 2010-10-28 15:11:13

ansaurus

tags:

views:

answers:

You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.

related questions