Цвет в вебе: палитра, контраст и доступность

Цвет — не украшение, а инструмент смысла и доступности. Слабый контраст — это причина №1 провалов доступности: он есть на 83% сайтов.

«Цвет может помочь донести смысл, но никогда не должен быть единственным способом его донести». — WCAG

Палитру не собирают из «красивых» цветов наугад. Базовая структура: один акцентный цвет (для действий), набор нейтралей (фон, текст, границы) и пара статусных (успех, ошибка). Меньше цветов — собраннее интерфейс.

Контраст по WCAG

С июня 2025 года в ЕС действует European Accessibility Act — доступность стала юридическим требованием, а не пожеланием. Главный измеримый критерий — контраст текста с фоном:

Не кодируйте смысл только цветом

«Поле с ошибкой — красное» не работает для дальтоников. Цвет всегда дублируют иконкой, текстом или подписью.

  СМЫСЛ НЕ ТОЛЬКО ЦВЕТОМ
  ----------------------
  ПЛОХО:               ХОРОШО:
  [ поле ] (красное)   [ поле ] (красное)
                       (X) Неверный email
  дальтоник не видит   иконка + текст видны всем

/* Статусы: цвет + всегда есть иконка/текст рядом в разметке */
:root {
  --color-text:    #111827;  /* на белом фоне = 16:1, отлично */
  --color-action:  #2563EB;  /* на белом = 4.6:1, проходит AA */
  --color-error:   #B91C1C;
  --color-success: #15803D;
}
/* Фокус виден всем — не убирать outline! */
.btn:focus-visible {
  outline: 3px solid var(--color-action);
  outline-offset: 2px;
}

Разбор глубже: доступность цвета как обязанность, а не опция

Сдвиг последних лет принципиален: доступность из «хорошего тона» превратилась в юридическое требование. С вступлением в силу European Accessibility Act в июне 2025 года и устойчивым ростом числа исков по доступности в США сайты, игнорирующие контраст и навигацию, рискуют не только репутацией, но и деньгами. При этом контраст текста — самый частый и самый легко проверяемый дефект: по регулярным аудитам он встречается на абсолютном большинстве сайтов. Хорошая новость в том, что это и самая измеримая проблема — есть точный числовой критерий и инструменты проверки.

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

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

Стоит упомянуть и тёмную тему как вопрос доступности и комфорта. Всё больше пользователей предпочитают тёмный интерфейс — кому-то так комфортнее для глаз, особенно ночью, кому-то это помогает при светочувствительности. Медиазапрос prefers-color-scheme позволяет уважать системный выбор пользователя автоматически. Но тёмная тема — не просто «инвертировать цвета»: чистый белый текст на чистом чёрном даёт слишком резкий контраст и эффект ореола, поэтому берут не #000 и не #FFF, а слегка смягчённые тона. И контраст в тёмной теме проверяют отдельно — пара цветов, проходящая на светлом фоне, может проваливаться на тёмном. Именно здесь снова выручают семантические токены: тёмная тема собирается переопределением смыслового слоя, а проверку контраста проводят для обеих тем.

Как делают ПЛОХО

Серый текст #AAA на белом — контраст 2:1, нечитаемо на солнце и для слабовидящих. Смысл кодируют только цветом. Убирают outline у фокуса «ради красоты» — клавиатурная навигация ломается.

Как делают ХОРОШО

Проверяют контраст (цель AA: 4.5:1 для текста). Статусы дублируют иконкой и подписью. Видимый фокус сохранён. Палитра ограничена: акцент + нейтрали + статусы.

Чек-лист

• Контраст текста ≥ 4.5:1 (крупного ≥ 3:1).
• Смысл не передаётся одним лишь цветом.
• Видимое состояние фокуса не убрано.
• Палитра ограничена: 1 акцент + нейтрали + статусы.
• Контраст проверен инструментом (WebAIM, Stark).

Итог. Цвет несёт смысл, но не в одиночку. Контраст 4.5:1, дубль смысла иконкой/текстом и видимый фокус делают палитру доступной и по закону, и по совести.