Посмотрите на свою кнопку «Добавить в корзину» и задайте странный вопрос: если бы на ней вообще не было текста, понял бы человек, что это кнопка? Теперь поле поиска вверху страницы: где оно заканчивается? Есть видимый край, или поле растворяется в фоне, пока вы не кликнете внутрь? На большинстве сайтов есть хотя бы один элемент управления, который плохо отвечает на эти вопросы: бледно-серая кнопка на белой странице, поле формы с тончайшей рамкой-волоском, набор иконок, выцветших до изящного шёпота. На откалиброванном мониторе дизайнера в полутёмной комнате всё выглядит чисто и современно. Для клиента со слабым зрением, на дешёвом ноутбуке, откинутом при дневном свете, этих краёв просто нет. У этого пробела есть собственное правило WCAG, и это одно из самых часто упускаемых правил во всём интернете.
Ключевые факты
- Критерий успеха 1.4.11 «Нетекстовый контраст» WCAG (Web Content Accessibility Guidelines) относится к уровню AA и был добавлен в WCAG 2.1 (2018) (W3C).
- Правило: визуальная информация, нужная, чтобы опознать элементы пользовательского интерфейса и их состояния, а также графические объекты, необходимые для понимания контента, должна иметь соотношение контраста как минимум 3:1 с соседними цветами (W3C).
- Оно отдельно от контраста текста: правило для текста (1.4.3, уровень AA) требует 4.5:1 для текста обычного размера; нетекстовый контраст - собственная проверка 3:1 для элементов управления и значимой графики (W3C).
- Обязательный минимум Онтарио - WCAG 2.0 уровня AA (IASR, O. Reg. 191/11, раздел 14, для организаций с 50 и более сотрудниками и госсектора), и поскольку 1.4.11 - критерий 2.1, он находится чуть за пределами этого юридического минимума, но внутри WCAG 2.2 (ontario.ca / W3C).
- Следующий ACR (отчёт о соответствии требованиям доступности) для организаций с 20 и более сотрудниками нужно подать до 31 декабря 2026 года (ontario.ca).
Что на самом деле требует правило о нетекстовом контрасте?
Кое-что поуже, чем «сделайте всё высококонтрастным», и оно делится на две группы. Первая - элементы пользовательского интерфейса: те части элемента управления, которые нужно видеть, чтобы понять, что это элемент управления и в каком он состоянии. Это граница кнопки, контур текстового поля, галочка внутри чекбокса, точка в выбранной радиокнопке, переключатель, который показывает «вкл» или «выкл», контур фокуса, который показывает, где вы находитесь, пока вы перемещаетесь клавишей Tab. Каждая из этих визуальных подсказок должна достигать 3:1 относительно того, что находится прямо рядом. Вторая группа - графические объекты: части изображения или схемы, которые нужны, чтобы понять суть, - сектора круговой диаграммы, линии графика, иконка, которая несёт смысл без текстовой подписи рядом.
Есть разумные исключения, и они важны. Элемент управления, который неактивен или отключён, не обязан соответствовать соотношению. Всё, чей вид полностью оставлен браузеру по умолчанию и не тронут вашим дизайном, освобождено. А там, где конкретное представление необходимо - логотип компании, флаг, фотография, снимок экрана, - правило отступает. Остаётся повседневная мебель вашего сайта: кнопки, поля и иконки, которые людям действительно нужно найти и использовать.
Где реальные сайты проваливают это, не замечая?
В местах, где дизайнер выбрал «деликатно» и ни разу не проверил на плохом экране. Безусловный лидер - поле формы без рамки или с рамкой-волоском: поле поиска или ввода при оформлении заказа без края или с таким бледным краем, что он никогда не достигает 3:1, и пользователь со слабым зрением не может понять, куда кликнуть. Следом идёт низкоконтрастная кнопка: светло-серая на белом или кнопка-«призрак», которая представляет собой просто бледный текст с едва заметным контуром. Затем элементы управления из одних иконок: лупа для поиска, «гамбургер» для меню, голый крестик для закрытия, нарисованные мягким серым, который растворяется в шапке. Переключатели и чекбоксы, у которых состояния «вкл» и «выкл» отличаются слишком близким оттенком. И графики, где две серии данных одинаковой светлоты, а именно здесь правило пожимает руку правилу об использовании цвета: цвет не должен быть единственным сигналом, а любой сигнал, который вы используете, тоже должен быть видимым.
Признак всегда один. Тому, кто это сделал, всё кажется нормальным, потому что он знает, что это кнопка, и видит цвет. Нетекстовый контраст - о посетителе, который не знает и не видит.
Разве это не то же, что правило о контрасте текста?
Нет, и путаница между ними - причина, почему сайты проходят одно и пропускают другое. Правило контраста текста (1.4.3) - о чтении слов: обычному тексту нужно 4.5:1, чтобы человек со слабым зрением мог разобрать буквы. Нетекстовый контраст (1.4.11) - о том, чтобы видеть элементы управления и значимые формы: край кнопки, границу поля, иконку, линию графика, - при более низкой планке 3:1. Текст вашего абзаца может прекрасно проходить 1.4.3, а кнопка «Продолжить» под ним проваливать 1.4.11, потому что её контур почти невидим. Две отдельные проверки, два порога, и сканер поймает часть провалов по тексту, тихо пропустив большинство провалов по компонентам, - ещё одна причина, почему сканирование - не аудит.
Обязателен ли нетекстовый контраст в Онтарио на самом деле?
Вот честный ответ, потому что версия «срежем угол» никому не помогает. IASR Онтарио указывает на WCAG 2.0 уровня AA, а 1.4.11 не существовало до WCAG 2.1. Поэтому по строгой букве регламента бледная кнопка сама по себе не нарушение IASR, в отличие от отсутствующего alt-текста или ловушки клавиатуры. Это узкое прочтение, и это плохая причина пропустить правило.
Три вещи делают его важным всё равно. Во-первых, долговечная цель любой серьёзной разработки - WCAG 2.2 уровня AA, который включает 1.4.11: закон - это пол, а не потолок, и пол должен подняться. Во-вторых, реальный путь для частного лица в Онтарио вовсе не AODA: у AODA (Accessibility for Ontarians with Disabilities Act) нет права частного иска, поэтому действующий путь - жалоба в HRTO (Трибунал по правам человека Онтарио) по Кодексу прав человека Онтарио, а у человека, который действительно не может найти вашу кнопку оформления заказа, есть барьер, какая бы версия WCAG его ни называла. В-третьих, если вы продаёте в США, низкоконтрастные элементы управления - именно то, что появляется в претензиях по ADA (Americans with Disabilities Act) о сайтах, где обычный ориентир - WCAG 2.1 и 2.2 уровня AA. Защитимая позиция та же, что всегда: задокументированное исправление, датированная запись того, что вы проверили и исправили, - то, что должен отражать честный ACR к 31 декабря 2026 года.
Хорошая новость в том, что исправить это дёшево. Сделать контур кнопки глубже, рамку поля формы темнее, придать иконке достаточно веса, чтобы она выделялась, - это небольшие изменения в CSS, а не переделка, и они делают сайт удобнее для всех, кто щурится на телефон на солнце.
Узнайте, достигают ли ваши кнопки, поля форм, иконки и контуры фокуса планки 3:1, и проверьте другие проблемы доступности - бесплатный отчёт Vayle, примерно 30 секунд: vayle.art. Он обнаруживает виджеты-оверлеи, показывает реальные нарушения WCAG и точно говорит, что юридически относится к вашей организации в Онтарио. Без обязательств.
Vayle работает удалённо и занимается инженерной доступностью сайтов для бизнеса Онтарио. Общая информация, а не юридическая консультация.