WCAG 1.4.1 Использование цвета

Критерий успеха 1.4.1 нужен для того, чтобы информация не терялась для людей, которые видят цвета иначе или не различают их вовсе: людей с нарушением цветовосприятия, людей со слабым зрением и всех, кто пользуется монохромным или высококонтрастным экраном. Это уровень A, критерий входит в EN 301 549 (пункт 9.1.4.1). Тот же стандарт принят в Украине как ДСТУ EN 301 549:2022.

Что требует критерий

Цвет не должен быть единственным визуальным средством, чтобы:

• передать информацию («цены со скидкой — красные»);
• обозначить действие;
• побудить к ответу;
• выделить визуальный элемент (например, ссылку внутри абзаца).

Цвет по-прежнему можно использовать — ему просто нужен второй визуальный признак: текст, иконка, подчёркивание, узор или форма.

Для ссылок внутри текста документ W3C Understanding принимает в качестве дополнительного признака разницу в светлоте: если цвет ссылки имеет контраст не менее 3:1 с окружающим текстом (техника G183), ссылка считается различимой. Ссылки, которые вообще никак визуально не выделены, не входят в область 1.4.1, хотя пользоваться ими трудно.

Типичные ошибки в интернет-магазине

• ссылки в описаниях товаров, правилах или подвале отличаются только чуть другим цветом, без подчёркивания;
• поля формы с ошибкой отмечены только красной рамкой;
• наличие товара показано зелёной или красной точкой без текста («В наличии», «Нет в наличии»);
• образцы цвета без названий, так что покупатель не отличит «тёмно-синий» от «чёрного»;
• графики или таблицы размеров, где категории различаются только цветом;
• выбранный размер или текущий шаг показан только изменением цвета.

Как проверить

Автоматически: наша проверка отмечает ссылки внутри блока текста, которые отличаются от окружающего текста только цветом (правило ссылка в блоке текста). Другие случаи использования цвета — точки статуса, состояния ошибок, графики — автоматически оценить нельзя, здесь нужна ручная проверка.

Вручную: посмотрите страницу в оттенках серого (через расширение браузера или цветовой фильтр операционной системы). Всё, что вы больше не можете понять — где ссылка, в каком поле ошибка, какой вариант выбран, — не проходит. Проверьте состояния наведения, фокуса, ошибки и выбора.

Как исправить

• Подчёркивайте ссылки в тексте — как минимум в основном тексте, а также при наведении и фокусе.
• Добавьте к ошибкам и статусу наличия текст и иконку.
• Показывайте название каждого образца цвета — как минимум в виде доступного имени и при выборе.
• Используйте в графиках узоры, подписи или прямые пояснения в дополнение к цвету.
• Отмечайте выбранный вариант рамкой, галочкой или жирным текстом, а не только новым цветом.

Связанные критерии

• 1.4.3 Контраст (минимальный) — 4,5:1 для текста.
• 1.4.11 Контраст нетекстового контента — 3:1 для иконок и элементов управления.
• 1.3.3 Сенсорные характеристики — инструкции, которые опираются на цвет.

Частые вопросы

Обязательно ли подчёркивать ссылки в тексте?

Не всегда, но одного цвета недостаточно, если только он не даёт разницу в светлоте не менее 3:1 с окружающим текстом (техника W3C G183). Самый простой и надёжный вариант — подчёркивание.

Достаточно ли красной рамки у поля с ошибкой?

Нет. Добавьте второй признак, не зависящий от цвета, например иконку и текстовое сообщение об ошибке. Критерий 3.3.1 «Обнаружение ошибок» тоже требует описать ошибку текстом.

Запрещает ли 1.4.1 цветовое кодирование?

Нет. Цвет разрешён и полезен; он просто не должен быть единственным визуальным средством. Добавьте рядом текст, узор, иконку или форму.

Касается ли 1.4.1 контраста?

Нет. Контраст текста — это 1.4.3, а иконок и элементов управления — 1.4.11. 1.4.1 говорит о цвете как единственном сигнале, каким бы ни был контраст.