Цветовой контраст по WCAG: нормы, проверка и исправление

Светло-серый текст на белом фоне в макете выглядит аккуратно. На телефоне под ярким солнцем или для слабовидящего человека читать его тяжело. Кроме того, это самая распространённая ошибка доступности: WebAIM Million 2026 (откроется в новой вкладке) нашёл текст с низким контрастом на 83,9% из миллиона самых популярных главных страниц — в среднем 34 отдельных случая на страницу.

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

Что такое коэффициент цветового контраста?

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

Формула выглядит так: (L1 + 0,05) / (L2 + 0,05), где L1 — относительная яркость более светлого цвета, а L2 — более тёмного. Считать вручную вам не придётся, но одна деталь важна: учитывается только яркость, а не цветовой тон. Поэтому красный текст на зелёном фоне может выглядеть ярко и всё равно получить плохую оценку.

Вторая деталь, которую часто упускают, — округление. В пояснительном документе W3C к критерию 1.4.3 (откроется в новой вкладке) сказано, что вычисленные значения «не следует округлять (например, 4,499:1 не соответствует порогу 4,5:1)». Поэтому серый #767676 на белом (4,54:1) проходит, а #777777 на белом (4,48:1) — нет, хотя на глаз их никто не различит.

Какого коэффициента контраста требует WCAG?

Для уровня AA, на который ссылается большинство законов и договоров, обычному тексту нужно не менее 4,5:1 относительно фона, а крупному — 3:1 (критерий успешности 1.4.3). Компонентам интерфейса и значимой графике нужно 3:1 относительно соседних цветов (1.4.11). Более строгий уровень AAA требует 7:1 для обычного текста и 4,5:1 для крупного (1.4.6).

Почему именно 4,5:1? W3C объясняет, что этот порог «компенсирует потерю контрастной чувствительности, обычную для пользователей с нарушением зрения, соответствующим остроте зрения примерно 20/40» (это около 0,5 по привычной десятичной шкале). Иначе говоря, он рассчитан на людей с умеренно сниженным зрением, среди которых много пожилых покупателей, которые никогда не назвали бы себя людьми с инвалидностью.

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

Что считается крупным текстом?

Крупный текст в WCAG — это не менее 18 пунктов или не менее 14 пунктов, если он жирный. W3C переводит это примерно в 24 CSS-пикселя и 18,5 пикселя жирным. Всему, что меньше, нужны полные 4,5:1. Основной текст, подписи к изображениям, подписи полей форм, цены и ссылки в подвале почти никогда не бывают крупным текстом, поэтому им нужен более высокий коэффициент.

Вот как это выглядит на практике. Серый #949494 на белом даёт 3,03:1. Для заголовка в 28 пикселей это нормально, а для абзаца в 16 пикселей того же цвета — ошибка. Множество сайтов проходят проверку на заголовках и проваливают всё, что под ними.

Тонким и декоративным шрифтам нужно особое внимание. W3C отмечает, что из-за сглаживания «особенно тонкие или необычные шрифты могут отображаться браузерами гораздо более блёклым цветом», чем выбранный вами. Если ваш фирменный шрифт светлого начертания, оставьте себе запас выше 4,5:1, а не целитесь в 4,51.

Касается ли контраст кнопок, значков, индикаторов фокуса и диаграмм?

Да. По критерию успешности 1.4.11 (уровень AA) всё, что людям нужно видеть, чтобы распознать элемент управления, его состояние или графику, должно иметь контраст 3:1 относительно соседних цветов. Сюда входят рамки полей форм, значки без текстовой подписи, контуры фокуса, состояния флажков и переключателей, линии и сегменты диаграмм. Текст внутри кнопки по-прежнему требует 4,5:1.

• Поля форм: светло-серая рамка #CCCCCC на белом даёт 1,61:1. Если эта бледная линия — единственное, что показывает, куда вводить текст, это нарушение.
• Кнопки: WCAG не требует видимой рамки вокруг каждой кнопки. В пояснительном документе W3C к критерию 1.4.11 (откроется в новой вкладке) сказано, что граница нужна, только если нет другого визуального способа распознать элемент управления. Если кнопку можно узнать только по цветной форме, этой форме нужно 3:1 относительно страницы.
• Значки: лупе поиска, сердечку избранного или значку корзины без текста рядом нужно 3:1.
• Индикаторы фокуса: контур, показывающий фокус клавиатуры, должен контрастировать с окружающим фоном. Более новые критерии о фокусе разобраны в нашем руководстве по WCAG 2.2.
• Диаграммы: линиям на линейном графике и секторам круговой диаграммы нужно 3:1, если те же значения не показаны ещё и текстом.
• Отключённые элементы управления освобождены от требований, хотя людям всё равно нужно понимать, можно ли нажать кнопку.

Ссылки в тексте — особый случай. Если они выделены только цветом, без подчёркивания, техника W3C G183 (откроется в новой вкладке) требует 3:1 между цветом ссылки и окружающим текстом, при этом оба цвета по-прежнему должны иметь 4,5:1 относительно фона. Подобрать три цвета, которые удовлетворяют всему этому, трудно. Подчёркивание гораздо проще.

Как проверить цветовой контраст?

Используйте бесплатный инструмент проверки контраста для конкретных пар цветов, инструменты разработчика в браузере для живых страниц и автоматическое сканирование, чтобы найти проблемные места по всему сайту. Затем проверьте глазами то, что инструменты пропускают: текст на фото и градиентах, состояния при наведении и фокусе, текст-подсказки и сообщения об ошибках. Большая часть этого занимает несколько минут на каждый шаблон страницы.

• WebAIM Contrast Checker (откроется в новой вкладке): введите два шестнадцатеричных кода и получите коэффициент с оценкой «проходит или нет» для обычного текста, крупного текста и графических объектов. Ползунок светлоты удобен, чтобы найти ближайший подходящий оттенок.
• Colour Contrast Analyser (откроется в новой вкладке): бесплатное настольное приложение от Vispero для Windows и macOS. Его пипетка берёт любой пиксель на экране, что полезно для текста на изображениях, PDF и в приложениях, а ещё в нём есть симулятор дальтонизма.
• Chrome DevTools: выберите фрагмент текста в инспекторе и откройте палитру цветов. Её раздел о коэффициенте контраста (откроется в новой вкладке) показывает линии для AA и AAA и может предложить подходящий цвет. Панель CSS Overview перечисляет все проблемы с контрастом на странице.
• Автоматические проверки: расширения браузера и Lighthouse находят текст с низким контрастом по всей странице, но текст на изображениях или градиентах часто помечают как требующий ручной проверки, а не как прошедший или не прошедший.

Там, где инструменты не справляются, проверяйте вручную. Для текста на главном фото проверьте самую светлую часть изображения за самыми светлыми буквами; фоновые изображения без достаточного контраста W3C относит к известным ошибкам (F83). Наведите курсор на кнопки, перейдите к ним клавишей Tab, вызовите ошибку в форме, включите тёмный режим, если он у вас есть. Тёмная тема тоже может не пройти проверку: серый #757575 на фоне #121212 даёт 4,07:1. Наше руководство «Как проверить доступность сайта» ставит контраст в один ряд с другими быстрыми ручными проверками.

Как исправить низкий контраст, не меняя фирменный стиль?

Обычно — добавив более тёмный оттенок фирменного цвета для текста и мелких элементов и сохранив оригинал для крупных заголовков, фонов и иллюстраций. Многие фирменные цвета не проходят проверку только в мелких размерах. Часто достаточно заменить белый текст на тёмный на светлом фирменном цвете, и большинство посетителей заметят лишь то, что страницу стало легче читать.

1. Сделайте «безопасную для текста» версию каждого фирменного цвета — не менее 4,5:1 относительно основных фонов — и используйте её для основного текста, ссылок и мелких значков.
2. Используйте исходный яркий цвет для крупных заголовков (там достаточно 3:1), фонов, иллюстраций и декора.
3. На светлых фирменных цветах замените белый текст кнопок на тёмный.
4. Подложите под текст, который лежит на фотографиях, сплошную или полупрозрачную плашку.
5. Проверьте все состояния: наведение, фокус, посещённую ссылку, выбранный элемент, ошибку и текст-подсказку.
6. Сохраните подходящие пары как дизайн-токены или настройки темы, чтобы новые страницы наследовали их, а не изобретали заново.

Дизайн с учётом дальтонизма: почему одного цвета недостаточно

Контраст и цвет — разные проблемы. По данным Colour Blind Awareness (откроется в новой вкладке), нарушение цветового зрения, чаще всего красно-зелёное, есть примерно у каждого 12-го мужчины и у каждой 200-й женщины. WCAG 1.4.1 (откроется в новой вкладке) (уровень A) требует, чтобы цвет не был единственным визуальным способом передать информацию, поэтому дополняйте его текстом, значками, узорами или подчёркиванием.

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

Чтобы увидеть проблему своими глазами, используйте эмуляцию нарушений зрения в Chrome DevTools; симулятор есть и в Colour Contrast Analyser. Контраст помогает и здесь: коэффициент измеряет светлоту, а не тон, поэтому два цвета с высоким коэффициентом остаются различимыми, даже если их оттенки кажутся похожими. Как слабовидящие люди и люди с другими нарушениями настраивают свои устройства, рассказывает статья «Как люди с инвалидностью пользуются сайтами».

Достаточно ли режимов высокого контраста и переключателей контраста?

Нет. Контрастные темы операционной системы и переключатели контраста на странице помогают тем, кто знает, что ему нужно больше контраста, и включает его. Но WCAG оценивает вашу страницу в состоянии по умолчанию, поэтому цвета, которые каждый посетитель видит первыми, всё равно должны проходить проверку. Переключатель — дополнительная возможность для тех, кому нужно больше, а не исправление цветов, которые не проходят.

Некоторые люди с инвалидностью пользуются контрастными темами Windows, которые заменяют ваши цвета своими. Стоит протестировать сайт с включённой темой: значки, сделанные фоновыми изображениями, могут исчезнуть, а стили фокуса, нарисованные только тенью (box-shadow), — пропасть. Медиазапрос CSS prefers-contrast также позволяет предложить более контрастную версию тем, кто запросил её в системных настройках.

В нашем собственном виджете есть настройка контраста и профиль для дальтоников, и некоторым посетителям они полезны. Но мы скажем вам то же самое: если основной текст у вас #999999 на белом, меняйте CSS. Виджет даёт посетителю, которому нужно больше контраста, способ его получить. Цвета по умолчанию, которые не проходят проверку, он не исправляет, и об этом сказано в справочнике по WCAG в нашей документации.