CSS Validation Warning: Same colors for color and background-color in two contexts

Question

I am getting a ton of warnings like the ones listed below when I do a CSS validation check via http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.gamefriction.com%2FCoded&profile=css21&usermedium=all&warning=1&lang=en

> 513       Same colors for color and
> background-color in two contexts
> #blue_module and #red_module_top 513      Same colors for color and
> background-color in two contexts
> .content ul li and #red_module_top 513
>       Same colors for color and
> background-color in two contexts
> #footer_container and #red_module_top 513         Same colors for color and
> background-color in two contexts
> ul.tabs li a.active and
> #red_module_top 513       Same colors for color and background-color in two
> contexts #content_960 and
> #red_module_top 513       Same colors for color and background-color in two
> contexts #content_main and
> #red_module_top 513       Same colors for color and background-color in two
> contexts .content and #red_module_top
> 513       Same colors for color and
> background-color in two contexts
> #league_module select option and #red_module_top 513      Same colors for color and background-color in two
> contexts #red_module and
> #red_module_top

Any ideas how to fix this?

CSS file: gamefriction.com/Coded/css/style.css

Answer 1

It's complaining for accessibility reasons, that the colors would make it difficult to read the text. If the text color and background color are the same, you couldn't read it at all.

Answer 2

What it's saying is that you have the same background color and foreground color in some of your contexts. Example from your CSS (some declarations omitted for clarity):

#red_module_top {
  background: url(http://www.gamefriction.com/Coded/images/red_content_top.jpg) no-repeat;
  color: #fff;
}

Notice how you set the color: #fff. This means your foreground color is white. But your background color is not set. You do set a background image but if for some reason the image is not available, then the background will also be white (because your body tag doesn't define a background color and the validator assumes that it's white), making the text invisible.

You can just add a color to the background line to fix this. For example:

background: #ff0000 url(http://www.gamefriction.com/Coded/images/red_content_top.jpg) no-repeat;

Now what happens is the validator will see that the background is different than the foreground and not complain.

Answer 3

So is this a big deal for SEO or will it have no effect?