Question

当我通过http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.gamefriction.com%2FCoded&profile=css21&usermedium=all&warning=1&lang=en

进行CSS验证检查时，我收到了大量警告，例如下面列出的警告

> 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

任何想法如何解决这个问题？

CSS文件：gamefriction.com/Coded/css/style.css

Answer 1

它的含义是你在某些情境中拥有相同的背景颜色和前景色。 CSS中的示例（为清晰起见，省略了一些声明）：

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

请注意您如何设置color: #fff。这意味着您的前景色为白色。但是没有设置背景颜色。您确实设置了背景图像，但如果由于某种原因图像不可用，那么背景也将是白色的（因为您的身体标签没有定义背景颜色而验证器认为它是白色的），使文本不可见。

您只需在背景线上添加一种颜色即可解决此问题。例如：

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

现在发生的事情是验证器会看到背景与前景不同而不是抱怨。

Answer 2

由于可访问性原因，它抱怨颜色会使文本难以阅读。如果文本颜色和背景颜色相同，则根本无法阅读。

CSS验证警告：两种情况下颜色和背景颜色相同

2 个答案: