Как создать доступную цветовую палитру для сайта

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

Принципы доступной палитры

1. Контраст — текст и важные элементы должны иметь коэффициент контрастности минимум 4.5:1 (AA) для обычного текста
2. Не только цвет — не передавайте важную информацию только цветом (добавляйте иконки, подписи, паттерны)
3. Различение — пары цветов должны быть различимы при различных формах дальтонизма

Выбор базового цвета

Начните с основного цвета бренда. Определите его в HSL для удобной генерации оттенков:

:root {
  --primary-h: 220; /* Hue */
  --primary-s: 70%; /* Saturation */
  --primary-l: 50%; /* Lightness */
}

Оттенки получают изменением Lightness: 50, 60, 70 для светлых; 40, 30, 20 для тёмных.

Генерация палитры

Типичная палитра содержит 5–9 оттенков от светлого к тёмному:

Оттенок	Использование
50–100	Фоны, hover-состояния
200–400	Границы, вторичный текст
500–600	Основной цвет, кнопки
700–900	Текст, акценты на светлом фоне

Проверка контраста

Для каждого сочетания текст-фон проверяйте коэффициент контрастности. Типичные пары:

• Текст на белом: тёмно-серый (#374151 или темнее) для основного текста
• Текст на цветном фоне: белый или очень светлый на тёмных оттенках (500+)
• Ссылки: контраст минимум 4.5:1 с фоном, плюс визуальное отличие (подчёркивание при hover)

Инструменты

Color Contrast на rechecker.ru — проверка контраста по WCAG. Color Converter — конвертация HEX, RGB, HSL для подбора оттенков.

Цветовая слепота

Проверяйте палитру в режимах симуляции:

• Протанопия (красно-зелёная)
• Дейтеранопия (красно-зелёная)
• Тританопия (сине-жёлтая)

Chrome DevTools (Rendering → Emulate vision deficiencies) и специализированные плагины помогают оценить восприятие.

Тёмная тема

Для тёмной темы инвертируйте логику: светлый текст на тёмном фоне. Контраст 4.5:1 сохраняется. Проверяйте и светлую, и тёмную тему отдельно.

CSS-переменные

Структурируйте палитру через переменные:

:root {
  --color-text: #1f2937;
  --color-text-muted: #6b7280;
  --color-bg: #ffffff;
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
}

Контраст для состояний

Проверяйте не только обычное состояние, но и :hover, :focus, :active, :disabled. Disabled-элементы могут иметь пониженный контраст (минимум 3:1), но не должны быть невидимыми.

Документирование палитры

Создайте страницу или документ с примерами использования: основной текст, заголовки, ссылки, кнопки, ошибки, предупреждения. Укажите коэффициенты контраста для каждой пары.

Дополнительные материалы

Подробнее о требованиях WCAG к контрасту — в Контраст цветов по WCAG: требования и проверка доступности.

---

Семантические цвета

Помимо базовых оттенков, определите семантические цвета:

Семантика	Использование
success	Успешные действия, подтверждения
warning	Предупреждения
error	Ошибки, критические сообщения
info	Информационные подсказки

Каждый семантический цвет должен иметь достаточный контраст с фоном при использовании для текста или иконок.

Инструменты генерации

Для генерации палитр из базового цвета можно использовать:

• HSL-вращение: меняйте hue для аналоговых цветов
• Осветление/затемнение: меняйте lightness для оттенков
• Онлайн-генераторы: ввод цвета, вывод палитры с проверкой контраста

Цветовая слепота: практические советы

• Избегайте пар «красный-зелёный» как единственного различителя (добавляйте иконки, подписи)
• Синий и оранжевый обычно хорошо различаются при протанопии и дейтеранопии
• Проверяйте палитру в симуляторах (Chrome DevTools, Colorblindly)

Интеграция с дизайн-системой

Если проект использует дизайн-систему (Figma, Storybook), экспортируйте токены цветов в CSS-переменные. Документируйте контрастность для каждого токена в компонентной библиотеке.

Пример структуры токенов

:root {
  --color-text-primary: #1f2937;
  --color-text-secondary: #6b7280;
  --color-bg: #ffffff;
  --color-bg-muted: #f9fafb;
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-error: #dc2626;
  --color-success: #16a34a;
}

Работа с градиентами

Градиенты усложняют проверку контраста — он меняется по длине. Варианты:

• Проверять область с минимальным контрастом
• Использовать градиент только для фона, текст — на однотонном overlay
• Ограничить градиенты декоративными элементами

Палитра для форм

Для полей ввода, ошибок и подсказок определите отдельные цвета:

• Border default: нейтральный серый
• Border focus: акцентный цвет
• Border error: красный с достаточным контрастом
• Text error: красный, контраст с фоном 4.5:1
• Background error: светлый красный для подсветки поля

A/B тестирование цветов

При смене палитры проводите A/B тест. Контраст влияет на читаемость, время на странице и конверсию. Замеряйте метрики до и после изменений.

Экспорт в код

При использовании дизайн-инструментов (Figma, Sketch) экспортируйте цвета в формате, совместимом с вашим стеком: CSS-переменные, SCSS, Tailwind-конфиг, токены для дизайн-системы.

Контраст для иконок

Иконки, передающие смысл (успех, ошибка, предупреждение), должны иметь контраст минимум 3:1 с фоном. Декоративные иконки могут иметь меньший контраст. При сомнениях добавляйте текстовую подпись.

Палитра для таблиц

Чередование строк (zebra striping) улучшает читаемость. Контраст между строками должен быть достаточным, но не чрезмерным. Текст в ячейках — контраст 4.5:1 с фоном ячейки.

Доступность и брендинг

Баланс между бренд-гайдлайнами и доступностью достигается через:

• Использование бренд-цветов для крупных элементов, не для мелкого текста
• Подбор контрастных оттенков из утверждённой палитры
• Документирование доступных сочетаний в бренд-буке