Предупреждение о проверке CSS: одинаковые цвета для цвета и фона в двух контекстах

Question

Я получаю тонну предупреждений, подобных тем, которые перечислены ниже, когда я проверяю CSS с помощью 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

Есть идеи как это исправить?

Файл 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. Это означает, что ваш цвет переднего плана белый. Но ваш цвет фона не установлен. Вы устанавливаете фоновое изображение, но если по какой-то причине изображение недоступно, фон также будет белым (поскольку ваш тег body не определяет цвет фона, а валидатор предполагает, что он белый), делая текст невидимым.

Вы можете просто добавить цвет к фоновой линии, чтобы это исправить. Например:

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

Теперь, что происходит, валидатор увидит, что фон отличается от переднего плана, и не будет жаловаться.

Answer 2

Жалуется по причинам доступности, что цвета затрудняют чтение текста. Если цвет текста и фона одинаковы, вы вообще не сможете прочитать их.