Самое частое нарушение WCAG (Web Content Accessibility Guidelines) в интернете - не отсутствующие субтитры и не сломанная подпись для экранного чтеца. Это цвет текста, который недостаточно контрастирует с фоном, и, по анализу WebAIM Million 2025 для миллиона самых посещаемых главных страниц, у 79,1% сайтов есть хотя бы один такой случай, в среднем 29,6 нарушения контраста текста на страницу. По IASR Онтарио (Регламент об интегрированных стандартах доступности) соблюдение правила контраста на уровне WCAG 2.0 AA не опционально для организаций с 50 и более сотрудниками: это юридический минимум с 2014 года, а до срока ACR (отчёта о соответствии требованиям доступности) 31 декабря 2026 года осталось полгода.
Ключевые факты
- Отчёт WebAIM Million 2025 проанализировал 1 000 000 самых посещаемых главных страниц и нашёл низкоконтрастный текст на 79,1% страниц - самое распространённое нарушение WCAG пятый год подряд; на средней странице было 29,6 случая низкоконтрастного текста (WebAIM, webaim.org/projects/million/2025).
- WCAG 1.4.3 Контраст (минимальный), критерий уровня AA со времён WCAG 2.0, требует коэффициента контраста 4,5:1 между текстом и фоном для обычного текста и 3:1 для крупного текста - это 18 пунктов или 14 пунктов полужирным (W3C).
- Текст логотипов и чисто декоративный текст освобождены от правила контраста; текст неактивных элементов интерфейса тоже освобождён (W3C, WCAG Understanding 1.4.3).
- WCAG 1.4.11 Нетекстовый контраст (уровень AA, добавлен в WCAG 2.1) распространяет порог 3:1 на визуальную информацию, нужную, чтобы распознать кнопки, поля форм, флажки и индикаторы фокуса, - это выше базы IASR в WCAG 2.0, но на практике это цель лучшей практики для любого нового сайта (W3C, WCAG Understanding 1.4.11).
- IASR Онтарио требует, чтобы организации с 50 и более сотрудниками (и госсектор) соответствовали WCAG 2.0 уровня AA для публичных сайтов, со сроком отчёта 31 декабря 2026 года, и 1.4.3 входит в этот минимум; у AODA (Accessibility for Ontarians with Disabilities Act) нет права частного иска, но исключённый пользователь может обратиться в HRTO (Трибунал по правам человека Онтарио) по Кодексу прав человека Онтарио.
Что на самом деле требует правило WCAG о цветовом контрасте?
WCAG 1.4.3 задаёт минимальный коэффициент контраста яркости: 4,5:1 для обычного текста и 3:1 для крупного. Коэффициент считают, деля относительную яркость более светлого цвета на относительную яркость более тёмного, - любой инструмент контраста мгновенно выдаёт эту цифру по двум hex-значениям. Чёрный текст на белом фоне даёт коэффициент 21:1, далеко выше порога. Белый текст на средне-сером фоне может выглядеть читаемым, но при проверке даёт примерно 3,2:1, а это провал для всего, что меньше 18 пунктов.
Правило относится к тексту, отрисованному на странице, а не к файлу дизайна. «Фирменный» пыльно-серый или приглушённый бирюзовый для основного текста может элегантно выглядеть на экране, но не пройти проверку 4,5:1 - именно поэтому это нарушение самое устойчивое в интернете, хотя исправить его проще многих.
Что считается «крупным текстом» по WCAG 1.4.3?
Для крупного текста порог ниже (3:1 вместо 4,5:1), потому что размер компенсирует пониженный контраст. WCAG определяет крупный текст как текст от 18 пунктов или от 14 пунктов полужирным - примерно 24 CSS-пикселя для 18pt и 18,67 CSS-пикселя для 14pt, в зависимости от настроек браузера и системы (W3C). Всё меньше этих размеров считается обычным текстом и требует полных 4,5:1. Заголовок 24px обычного начертания - крупный текст; основной текст 16px - нет.
Относится ли то же правило к кнопкам, полям форм и иконкам?
Исходный WCAG 1.4.3 охватывает только текст (и изображения текста). Он ничего не говорит о том, достаточно ли видна рамка поля ввода или выделяется ли серая кнопка отправки на белом фоне.
WCAG 1.4.11 Нетекстовый контраст (уровень AA, WCAG 2.1) закрывает этот пробел. Он требует коэффициента контраста 3:1 для визуальной информации, нужной, чтобы распознать элементы интерфейса и их состояния, - на практике: рамка поля ввода на фоне страницы, контур флажка, индикатор фокуса, столбцы данных на графике. Требования к индикаторам фокуса дополнительно ужесточила WCAG 2.2 (SC 2.4.11 Заметность фокуса, минимум, уровень AA), но требования к нетекстовому контрасту и 2.1, и 2.2 лежат выше юридического минимума Онтарио в WCAG 2.0, поэтому это лучшая практика, а не действующее обязательство, - смотрите, чем WCAG 2.0 и 2.2 отличаются для сайтов Онтарио.
К каким бизнесам Онтарио применяется правило контраста IASR?
IASR делит обязанности по веб-контенту на два порога:
Организации с 50 и более сотрудниками (частный сектор и некоммерческие организации): публичные сайты и веб-контент должны соответствовать WCAG 2.0 уровня AA. Для интернет-сайтов это действует с 1 января 2021 года. ACR 31 декабря 2026 года - формальное подтверждение того, что ваша организация выполнила эти текущие требования, включая стандарт контраста 1.4.3.
Организации с 1-49 сотрудниками: обязанность IASR по веб-контенту - WCAG 2.0 уровня A, который не включает 1.4.3 (контраст - критерий AA). Однако если пользователь с нарушением зрения не может пользоваться вашим сайтом и подаёт жалобу в HRTO по Кодексу прав человека Онтарио о дискриминации, трибунал смотрит, был ли барьер создан или сохранён, а не только то, какой технический уровень IASR применяется. У бизнеса с 30 сотрудниками, использующего сочетание цветов ниже 4,5:1, есть потенциальный риск, который порог численности IASR не снимает.
Организации госсектора: WCAG 2.0 AA действует для них с 1 января 2014 года; их срок ACR (31 декабря 2025 года) уже прошёл.
У AODA нет права частного иска - в провинциальном законе о доступности нет механизма индивидуального иска в духе ADA. Но и процесс отчёта о соответствии, и путь через HRTO реальны; стоит понимать, как на самом деле выглядит жалоба в HRTO, если контраст на вашем сайте не проходит.
Почему так много сайтов всё ещё нарушают это правило?
Потому что дизайнеры и разработчики обычно работают на откалиброванных мониторах в освещённых офисах, и сочетания цветов, которые в этих условиях выглядят нормально, часто не проходят математический порог. Частый шаблон: основной текст набран фирменным цветом - приглушённым бирюзовым, мягким тёмно-синим, светло-серым, - который выглядел разборчиво на белом на печатной пробе, но ни разу не проходил через инструмент контраста. Другой шаблон: разработчик использует стиль-заглушку (color: #aaa на белом фоне) для сообщений об ошибках или вспомогательного текста, не понимая, что #aaa на #fff даёт примерно 2,32:1 - явный провал.
Данные WebAIM дают этому цифры: в среднем 29,6 случая низкого контраста на страницу значит, что проблема пронизывает большинство сайтов, а не ограничивается одним недосмотром. Поскольку нарушения часто живут в фирменных цветовых токенах, они повторяются на каждой новой странице и в каждом новом компоненте и со временем накапливаются.
Может ли оверлей доступности исправить проблемы контраста?
Нет. Коэффициенты контраста - функция значений цвета текста и фона в CSS сайта. У виджета-оверлея, вставленного сторонним фрагментом JavaScript, нет надёжного способа знать, какой текст на произвольной странице информационный, а какой декоративный, или какой реальный контраст между полупрозрачным элементом и фоновым изображением. Оверлеи покрывают примерно 30-40% нарушений WCAG, а контраст - именно потому, что это вычисляемое свойство каждого текстового элемента на каждой странице, - одна из областей, где автоматические оверлеи стабильно не справляются.
FTC (Федеральная торговая комиссия США) оштрафовала крупнейшего поставщика оверлеев, accessiBe, на 1 000 000 долларов США за ложное утверждение, что его виджет приводит сайты в соответствие (FTC, постановление окончательно утверждено в апреле 2025 года). Нарушения контраста, остающиеся на сайтах с оверлеями, - задокументированный шаблон в судебной статистике: в первой половине 2025 года иски о доступности получили 456 сайтов с установленными оверлеями. Исправление контраста живёт в CSS, а не в скрипте, загружаемом поверх него.
Как найти и исправить нарушения контраста до срока 2026 года?
Быстрее всего начать со специального инструмента контраста: WebAIM Contrast Checker (webaim.org/resources/contrastchecker) принимает два hex-значения и меньше чем за секунду возвращает коэффициент и результат «пройдено/не пройдено» для AA и AAA. Инструменты разработчика в Chrome и Firefox включают панель доступности, которая показывает контраст для элемента под курсором. Автоматический сканер вроде Google Lighthouse отметит самые очевидные случаи за один проход.
Два практических шага ускоряют исправление:
Сначала проверьте токены дизайна. Большинство сайтов используют небольшой набор повторяющихся сочетаний цветов - фирменные цвета на белом, текст на тонированных фонах, серое на сером. Исправьте коэффициент на уровне токена или переменной CSS, и исправление распространится везде, где этот токен используется, без постраничных поисков.
Проверяйте живую страницу, а не только файл дизайна. Фоновые изображения, полупрозрачные слои, состояния наведения и фокуса и динамически вставляемый текст влияют на реальный контраст, который отрисовывает браузер. Инструменты, проверяющие живой DOM, ловят нарушения, которые пропускает просмотр статичного макета.
Именно такую находку настоящий аудит доступности выявляет и документирует, давая вам датированные доказательства для ACR и позицию, которую можно защитить, если жалоба когда-нибудь будет подана. ACR, который вы подаёте до 31 декабря 2026 года, - тот самый документ, где фиксируется, выполнены ли ваши обязанности по WCAG 2.0 для сайта, включая контраст; что на самом деле охватывает отчёт о соответствии, объясняет, что вы подтверждаете.
Узнайте, где стоят контраст и другие пробелы WCAG на вашем сайте, примерно за 30 секунд - бесплатный отчёт Vayle: vayle.art. Без обязательств.
Vayle работает удалённо и занимается инженерной доступностью сайтов для бизнеса Онтарио. Общая информация, а не юридическая консультация.