WCAG 1.4.11 Контраст нетекстового контента

Критерий успеха 1.4.11 нужен для того, чтобы люди со слабым зрением видели части страницы, которыми им нужно пользоваться и которые нужно понимать: где находится поле формы, что изображает иконка, какой вариант выбран, где находится фокус клавиатуры. Критерий добавлен в WCAG 2.1, относится к уровню AA и входит в EN 301 549 (пункт 9.1.4.11). Тот же стандарт принят в Украине как ДСТУ EN 301 549:2022.

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

Визуальное представление следующих элементов должно иметь коэффициент контраста не ниже 3:1 с соседним цветом (цветами):

• Компоненты пользовательского интерфейса: визуальная информация, нужная, чтобы распознать компонент и его состояния, — рамка текстового поля, контур чекбокса, сама галочка, индикатор выбранной вкладки, индикатор фокуса;
• Графические объекты: части графики, нужные для понимания контента, — линии и столбцы графика, значимые части иконки.

Исключения:

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

Текст здесь не рассматривается — он относится к 1.4.3.

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

• светло-серые рамки полей ввода (#ddd на белом — намного ниже 3:1) без других признаков;
• нестандартные чекбоксы, радиокнопки и переключатели размера, у которых выбранное состояние — бледный оттенок;
• кнопки только с иконкой (поиск, корзина, избранное) светлого фирменного цвета;
• собственная рамка фокуса светлого цвета или outline: none с едва заметной заменой;
• рейтинг звёздами с бледными пустыми и чуть более тёмными заполненными звёздами;
• линии графиков в личном кабинете, слишком светлые на фоне.

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

Автоматически: ни одно автоматическое правило нашей проверки не соответствует этому критерию. axe-core измеряет контраст текста, но не может определить, какие рамки, иконки или состояния нужны для понимания компонента. Здесь нужна ручная проверка.

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

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

• Затемните в теме рамки полей ввода и цвет иконок, пока они не достигнут 3:1 с фоном.
• Показывайте выбранное состояние чёткой рамкой, галочкой или заливкой, а не только бледным оттенком.
• Используйте индикатор фокуса с контрастом не ниже 3:1 с соседними цветами, например тёмный контур 2 px с отступом.
• Добавьте к графикам прямые подписи или узоры, если не все цвета могут достичь 3:1.

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

• 1.4.3 Контраст (минимальный) — 4,5:1 для текста.
• 1.4.1 Использование цвета — цвет не должен быть единственным признаком.
• Проверка контраста — измерьте два цвета.

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

Нужен ли рамкам полей формы контраст 3:1?

Если рамка — единственный визуальный признак, по которому видно, где находится поле, то да: ей нужен контраст 3:1 с соседним цветом. Поле с хорошо контрастной заливкой фона может полагаться на неё.

Нужен ли неактивным кнопкам контраст 3:1?

Нет. Неактивные (отключённые) компоненты интерфейса освобождены от требования, как и элементы управления, внешний вид которых задаёт браузер и который автор не менял.

Распространяется ли 1.4.11 на иконки?

Да, если иконка нужна, чтобы понять контент или распознать элемент управления, — например, иконка корзины, поиска или закрытия без текстовой подписи. Чисто декоративные иконки не охватываются.

Может ли автоматический инструмент проверить контраст нетекстового контента?

Надёжно — нет. Наша проверка измеряет контраст текста, а рамки, иконки, рамки фокуса и элементы графиков нужно проверять вручную с помощью проверки контраста.