WCAG контраст цветов: доступность веб-сайтов

Введение

Доступность веб-сайта — это не «приятная опция для узкой аудитории», а требование закона и здравого смысла. По данным ВОЗ, около 2,2 миллиарда человек в мире имеют нарушение зрения — от лёгкой близорукости до полной слепоты. Для многих из них сайт с плохим контрастом буквально недоступен. Стандарт WCAG (Web Content Accessibility Guidelines) определяет, каким должен быть контраст между текстом и фоном, чтобы информация была читаемой. В этой статье разберём требования WCAG, формулу расчёта контраста, уровни соответствия и инструменты проверки. Для быстрой проверки двух цветов используйте нашинструмент проверки контраста.

Что такое WCAG

WCAG — это международный стандарт доступности веб-контента, который разрабатывается консорциумом W3C. Текущая версия — WCAG 2.1, на подходе WCAG 2.2 и 3.0. Стандарт состоит из четырёх принципов: контент должен быть воспринимаемым, управляемым, понятным и надёжным. Контраст цветов относится к первому принципу — воспринимаемости.

WCAG определяет три уровня соответствия: A (минимальный), AA (средний, основной стандарт) и AAA (максимальный). Большинство законов о доступности — включая Section 508 в США и Европейский акт доступности — требуют уровня AA. Уровень AAA используется редко: он слишком строг для большинства дизайнов.

Уровень	Обычный текст	Крупный текст	UI-компоненты
A	нет требования	нет требования	нет требования
AA	4.5:1	3:1	3:1
AAA	7:1	4.5:1	нет требования

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

WCAG 2.1 определяет «крупный» как 18pt (24px) для обычного начертания и 14pt (18.66px) для жирного. Всё, что меньше, считается обычным текстом и требует контраста 4.5:1.

UI-компоненты и графика

С версии WCAG 2.1 требование 3:1 распространяется не только на текст, но и на значимые элементы интерфейса: иконки, границы инпутов, индикаторы фокуса. Это значит, что серая иконка на белом фоне может оказаться недоступной, даже если кажется «видимой».

Формула расчёта контраста

Контраст в WCAG — это отношение яркостей двух цветов. Яркость вычисляется через относительную светимость (relative luminance) с учётом гамма-коррекции. Формула для одного цвета в RGB:

function luminance(r, g, b) {
  const toLinear = (c) => {
    c /= 255;
    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  };
  const R = toLinear(r);
  const G = toLinear(g);
  const B = toLinear(b);
  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
}

function contrastRatio(c1, c2) {
  const l1 = luminance(c1.r, c1.g, c1.b);
  const l2 = luminance(c2.r, c2.g, c2.b);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

Коэффициенты 0.2126, 0.7152, 0.0722 отражают чувствительность глаза к красному, зелёному и синему — зелёный глаз видит лучше всего. Поэтому чисто зелёный на белом всегда контрастнее чисто красного той же светлоты.

Контраст 1:1 означает, что цвета одинаковы по яркости. 21:1 — это контраст чёрного и белого. Веб-дизайн обычно работает в диапазоне 4.5:1 — 15:1.

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

Есть несколько способов. Самый простой — нашинструмент проверки контраста: вводите два цвета и получаете коэффициент с указанием, какие уровни WCAG пройдены. Для пакетной проверки целого сайта используются другие инструменты:

axe DevTools — браузерное расширение для комплексного аудита доступности.
WAVE — онлайн-сервис и расширение, подсвечивает проблемы контраста и не только.
Lighthouse — встроенный в Chrome аудит, считает средний контраст страницы.
Stark — плагин для Figma и Sketch, проверяет палитру ещё на этапе макета.

Типичные проблемные места

Серый текст на белом

Серый (#999) на белом — излюбленный приём для второстепенного текста. Но #999 даёт контраст всего 2.85:1 — это ниже AA. Минимально допустимый серый для обычного текста на белом — #767676 (4.54:1).

/* Плохо — контраст 2.85:1 */
.muted { color: #999999; }

/* Хорошо — контраст 4.54:1, проходит AA */
.muted { color: #767676; }

/* Идеально — контраст 7:1, проходит AAA */
.muted { color: #595959; }

Placeholder в инпутах

Браузеры по умолчанию ставят placeholder слишком светлым. WCAG не требует контраста для placeholder, но если пользователь должен его читать — проверьте. Часто placeholder улучшают до 4.5:1 или заменяют на label.

Цветные кнопки

Белый текст на цветной кнопке — частая ловушка. Жёлтый, салатовый, розовый фон требуют очень тёмного текста. Например, белый на #FFEB3B (жёлтый) даёт контраст 1.5:1 — критически мало. В этом случае текст лучше делать чёрным.

Ссылки в тексте

Ссылка должна выделяться не только цветом, но и подчёркиванием. Если подчёркивания нет, контраст ссылки с окружающим текстом должен быть не менее 3:1 — иначе ссылку не отличить от обычного текста.

Иконки и границы

Границы инпутов, иконки, чекбоксы должны иметь контраст с фоном не менее 3:1. Светло-серая граница инпута на белом (#E0E0E0) даёт контраст 1.4:1 — не проходит. Минимально допустимый — #949494.

Контраст в тёмной теме

В тёмной теме те же правила действуют зеркально: текст должен быть светлым, фон — тёмным. Распространённая ошибка — слишком светлый фон (#1A1A1A с белым текстом) даёт контраст 16:1, что слишком резко для глаз. Лучше использовать чуть более тёмный фон и не чисто белый текст:

/* Тёмная тема — мягкий контраст */
--bg-dark: #1f2937;        /* контраст с #E5E7EB = 12.6:1 */
--text-dark: #e5e7eb;     /* AAA проходит */

Не забывайте про цветные акценты: они тоже должны пройти проверку на тёмном фоне. Часто брендовый цвет, который работает на белом, на тёмном приходится осветлять.

Дальтоники: не только контраст

Контраст — не единственная проблема. Около 8% мужчин и 0,5% женщин имеют нарушения цветового зрения. Для них красный текст на зелёном фоне выглядит одинаково тёмным, даже если формальный контраст высокий.

WCAG требует: цвет не должен быть единственным способом передачи информации. Это значит:

Ошибка в форме подсвечивается не только красным, но и иконкой и текстом сообщения.
Ссылки в тексте подчёркиваются, а не только меняют цвет.
Статусы (успех/ошибка/предупреждение) подписываются текстом или иконкой.

Проверить, как интерфейс видят люди с дальтонизмом, можно в DevTools Chrome — вкладка Rendering, опция «Emulate vision deficiencies».

Контраст и брендинг

Часто дизайнер выбирает брендовый цвет, который «выглядит круто», но проваливает WCAG. Это не повод отказываться от цвета — это повод строить шкалу светлот. Если основной брендовый цвет #4FACFE даёт белый-на-синем контраст 2.3:1, используйте для текста более тёмный оттенок шкалы — #1E5F9E (контраст 7.2:1).

/* Шкала брендового цвета */
--brand-400: #4facfe;  /* для фонов, иконок */
--brand-500: #2d8fee;  /* для крупных элементов */
--brand-700: #1e5f9e;  /* для текста на белом */

Подробнее про построение шкал — в статьях проHSL игенерацию палитр.

Юридические последствия

Доступность — это не только этика, но и закон. В США действует ADA (Americans with Disabilities Act), и компании проигрывают иски из-за недоступных сайтов. В Европе с 2025 года действует European Accessibility Act, обязывающий большинство коммерческих сайтов соответствовать WCAG 2.1 AA. В России прямого закона о веб-доступности пока нет, но государственные сайты обязаны следовать ГОСТ Р 52872-2012, который во многом повторяет WCAG.

Контраст и SEO

Прямой связи между контрастом и позициями в поиске нет, но есть косвенная. Yandex и Google учитывают поведенческие факторы: если пользователь не может прочитать текст, он уходит с сайта, и время сессии падает. Это сигнал для поисковика, что сайт не удовлетворяет запрос. Кроме того, поисковые роботы читают текст независимо от контраста, но если текст «невидим» для пользователя — это может быть расценено как скрытый текст, что нарушает правила.

Практический чек-лист

Все тексты на основном фоне имеют контраст минимум 4.5:1.
Крупные заголовки — минимум 3:1.
Границы инпутов, иконки, чекбоксы — минимум 3:1.
Ссылки в тексте подчёркнуты или контрастируют с окружающим текстом минимум 3:1.
Цвет не единственный способ передачи информации — есть иконки или текстовые подписи.
Проверена тёмная тема.
Проверен вид в режиме дальтонизма (DevTools).
Регулярный аудит через axe или Lighthouse.

Заключение

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