Доступная цветовая палитра — основа инклюзивного интерфейса. Цвета должны обеспечивать достаточный контраст для текста и интерактивных элементов, а также быть различимы для людей с особенностями цветовосприятия. В этой статье рассмотрены шаги создания палитры с учётом WCAG.
Принципы доступной палитры
- Контраст — текст и важные элементы должны иметь коэффициент контрастности минимум 4.5:1 (AA) для обычного текста
- Не только цвет — не передавайте важную информацию только цветом (добавляйте иконки, подписи, паттерны)
- Различение — пары цветов должны быть различимы при различных формах дальтонизма
Выбор базового цвета
Начните с основного цвета бренда. Определите его в 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 с фоном ячейки.
Доступность и брендинг
Баланс между бренд-гайдлайнами и доступностью достигается через:
- Использование бренд-цветов для крупных элементов, не для мелкого текста
- Подбор контрастных оттенков из утверждённой палитры
- Документирование доступных сочетаний в бренд-буке