Как выбрать цветовую палитру с учётом требований доступности

Доступная палитра — это набор цветов, который остаётся читаемым и понятным для максимально широкого круга людей: с ослабленным зрением, дальтонизмом, на старых экранах и при ярком солнце. Главный ориентир при выборе — контраст между текстом и фоном: для основного текста он должен быть не ниже 4,5:1 по стандарту WCAG 2.x уровня AA, для крупного текста — не ниже 3:1. Если вы начнёте с проверки контраста, а не с подбора «красивых» оттенков, вы избежите большинства переделок.

Ниже разберём, что именно требуют стандарты, как строить палитру так, чтобы она проходила проверки без мучительных компромиссов, какие инструменты использовать и где чаще всего ошибаются даже опытные команды.

Что означает «доступность цвета» на практике

Цвет влияет на доступность через три разных механизма, и путать их не стоит:

• Контраст. Насколько текст или значок отличается от фона по яркости. Это измеримый параметр, у него есть нормативные пороги.
• Цветовосприятие. Примерно 8% мужчин и около 0,5% женщин имеют ту или иную форму дальтонизма. Для них красный и зелёный могут выглядеть почти одинаково, а различие между синим и фиолетовым — исчезать.
• Информативность. Если смысл передаётся только цветом («красное поле — ошибка, зелёное — успех»), часть пользователей этот смысл потеряет.

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

Нормативная база: WCAG и уровни соответствия

Основной международный стандарт — Web Content Accessibility Guidelines (WCAG), разработанный консорциумом W3C. Он применяется к сайтам и приложениям, но те же принципы разумно переносить на презентации, интерфейсы устройств и печатные материалы. Стандарт имеет уровни: A (базовый), AA (стандартный, его чаще всего требуют регуляторы и заказчики) и AAA (усиленный).

Для выбора палитры важнее всего критерий 1.4.3 «Контраст (минимальный)» уровня AA. Его требования в пересчёте на коэффициент контрастности:

Элемент	Уровень AA	Уровень AAA
Обычный текст (примерно до 18 pt или до 14 pt жирного)	не ниже 4,5:1	не ниже 7:1
Крупный текст (от ~18 pt обычного или от ~14 pt жирного)	не ниже 3:1	не ниже 4,5:1
Графика и элементы интерфейса (иконки, поля ввода, индикаторы)	не ниже 3:1	не нормируется отдельно
Декоративные элементы и логотипы	требований нет	требований нет

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

Отдельно отметим критерий 1.4.11 «Нетекстовый контраст»: границы полей ввода, чекбоксы, слайдеры и иконки, несущие смысл, тоже должны иметь контраст не ниже 3:1 к соседним цветам. Об этом часто забывают, проверяя только текст.

С чего начать: порядок построения доступной палитры

Рабочий подход выглядит как последовательность шагов, а не как перебор оттенков вслепую:

1. Определите нейтральную шкалу. Возьмите 8–10 ступеней серого (или тонированного нейтрального) от почти белого до почти чёрного. Эта шкала станет фоном и основным текстом — на неё ляжет большая часть интерфейса.
2. Задайте пару «текст/фон» с запасом. Основная комбинация должна давать минимум 4,5:1, лучше 7:1 и выше. Запас нужен, потому что реальные условия (яркость экрана, освещение, прозрачность) снижают фактический контраст.
3. Добавьте акцентные цвета поверх шкалы. Один основной акцент для действий и ссылок, один-два дополнительных для статусов. Каждый акцент проверьте в роли текста на белом и на тёмном фоне.
4. Постройте семантические пары. Для успеха, ошибки, предупреждения и информации зафиксируйте готовые сочетания «цвет текста + допустимый фон», которые уже прошли проверку. Дизайнеры и разработчики должны брать эти пары, а не подбирать оттенки заново.
5. Проверьте палитру целиком. Прогоните все рабочие комбинации через контраст-чекер и симуляторы дальтонизма, затем посмотрите макеты в grayscale — обесцвеченный вариант мгновенно показывает, где контрада не хватает.

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

Контраст: как считать и какой запас оставлять

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

Практические ориентиры, которые помогают попадать в нормы без постоянных замеров:

• Тёмно-серый текст вроде #333333 на белом даёт большой запас — такие значения безопасны для основного текста.
• Чистый белый текст на чистом чёрном формально проходит, но многим пользователям с астигматизмом читать его тяжелее из-за «свечения»; мягкая пара вроде #EAEAEA на #121212 часто комфортнее.
• Прозрачность разрушает контраст непредсказуемым образом: текст с opacity 60% на светлом фоне почти наверняка провалит проверку. Задавайте приглушённый цвет явно, а не через альфа-канал.
• Текст поверх фотографий и градиентов нужно проверять в самой светлой и самой тёмной точке области, а не в среднем значении. Надёжное решение — подложка-затемнение или плашка.
• Тонкий шрифт визуально теряет контраст быстрее жирного: формально пройденная пара может плохо читаться при весе 300. При сомнениях повышайте вес или темните цвет.

Учёт дальтонизма и особенностей восприятия

Самая распространённая форма — протанопия и дейтеранопия, при которых плохо различаются красный и зелёный. Отсюда классическая ошибка: пара «красный — зелёный» как единственный способ показать «неверно — верно». Для части пользователей оба состояния выглядят одинаково.

Что делать вместо этого:

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

Полезный тест: переведите макет в градации серого. Если пользователь всё ещё понимает, что является заголовком, что — кнопкой, а что — предупреждением, палитра устойчива. Если структура «рассыпается», значит, вы слишком сильно полагаетесь на цветовой канал.

Тёмная тема и режимы отображения

Если продукт поддерживает тёмную тему, это отдельная палитра, а не инверсия светлой. Механическая инверсия ломает контрасты и семантику: цвета, рассчитанные на белый фон, на тёмном дают другие коэффициенты.

Правила для тёмной темы:

• Не используйте чистый чёрный (#000000) как фон и чистый белый как текст: сильный перепад яркости вызывает засветы и утомляет глаза. Комфортнее диапазон очень тёмного серого для фона и слегка приглушённого белого для текста.
• Акцентные цвета обычно требуется осветлить: насыщенный синий или красный, читаемый на белом, на тёмном фоне может не добрать контраст.
• Проверяйте каждую пару «текст/фон» в обеих темах отдельно и фиксируйте обе версии в дизайн-токенах.
• Помните про системные настройки: некоторые пользователи включают высококонтрастные режимы операционной системы, и ваш интерфейс должен корректно реагировать на них, а не конфликтовать.

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

Минимальный набор, которого хватает для полноценной работы:

• Контраст-чекеры. WebAIM Contrast Checker и аналогичные онлайн-инструменты показывают коэффициент для пары цветов и отмечают прохождение уровней AA и AAA. Встроенные плагины есть в Figma и других редакторах.
• Симуляторы цветовосприятия. Режимы протанопии/дейтеранопии в графических редакторах или расширения браузера позволяют посмотреть интерфейс глазами пользователя с дальтонизмом.
• Автоматические аудиты страниц. Lighthouse в Chrome DevTools и axe DevTools находят провалы контраста прямо на живой странице, включая динамические состояния.
• Генераторы шкал. Инструменты вроде Radix Colors или Leonardo помогают построить тональную шкалу с заранее гарантированными контрастами между ступенями.

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

Типичные ошибки и их последствия

• Проверка только финального макета. Если контраст контролировать в конце, переделки затрагивают всю систему стилей. Дешевле проверять пары на этапе создания токенов.
• Игнорирование состояний. Кнопка проходит проверку в покое, но её текст при наведении, нажатии или в отключённом состоянии меняется и проваливает норму. Проверяйте все интерактивные состояния.
• Серый текст «для второстепенности». Слишком светлый серый для подписей и метаданных — самый частый провал контраста. Второстепенность лучше передавать размером и весом, сохраняя минимальный контраст.
• Цвет как единственный носитель смысла. В формах и графиках это приводит к потере информации частью пользователей. Всегда добавляйте текстовый или символьный дубль.
• Брендовые цвета любой ценой. Фирменный оттенок иногда физически не может дать нужный контраст на белом. Решение — использовать его для крупных элементов и декора, а для текста завести более тёмную версию того же тона.
• Забытые графики и диаграммы. Линии на графике толщиной в пиксель с близкой светлотой неразличимы. Помогают разные типы линий, маркеры и прямые подписи рядов вместо общей легенды.

Сценарии: как действовать в разных ситуациях

Бренд требует светлый акцентный цвет. Используйте его для заливок кнопок с тёмным текстом, если пара проходит 4,5:1, либо увеличьте размер и вес текста, чтобы применить порог 3:1 для крупного. Для мелкого текста заведите отдельный тёмный вариант оттенка.

Нужно много категорий на диаграмме. Больше 6–7 различимых цветов — уже риск. Разбейте данные на несколько графиков, используйте паттерны заливки, прямые подписи и интерактивную подсветку ряда при наведении.

Проект с жёсткими сроками. Минимальный набор действий: проверить пары «основной текст/фон», «кнопки», «ссылки», «статусы форм» и прогнать ключевые экраны через симулятор дальтонизма. Это закрывает наиболее вероятные проблемы за час работы.

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

Чек-лист перед сдачей палитры

• Все пары «текст/фон» проходят минимум уровень AA, основные тексты — с запасом.

>Иконки, границы полей и индикаторы имеют контраст не ниже 3:1 к окружению.

• Смысл нигде не передаётся только цветом: есть текст, иконка или форма.
• Палитра проверена в симуляторах основных форм дальтонизма и в градациях серого.
• Тёмная тема собрана как самостоятельный набор проверенных пар.
• Зафиксированы все интерактивные состояния: наведение, нажатие, фокус, отключено.
• Текст поверх изображений и градиентов проверен в крайних точках, есть подложка при необходимости.

Что делать дальше

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

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