Цветовая палитра проекта: как выбрать и не потерять контраст

Рабочая палитра — это не пять красивых HEX-кодов, а договор о ролях и допустимых сочетаниях. Начните с нейтральных фона, поверхности и текста, затем назначьте ссылку, главное действие, границу и системные состояния. Для каждой роли запишите, на каких фонах она разрешена, какие состояния имеет и каким признаком дублируется смысл. После этого измерьте реальные пары: обычный текст должен достигать 4,5:1, крупный — 3:1, а значимые части контролов и графики — 3:1. Не округляйте пограничные результаты.

Сначала опишите характер без названий цветов

Соберите три–пять прилагательных о проекте: спокойный, точный, тёплый, собранный, сигнальный. Затем переведите их в наблюдаемые отношения. «Спокойный» может означать большие нейтральные поля и редкие акценты; «точный» — стабильные пары текста и поверхности; «сигнальный» — один цвет действия, который не расходуется на декор. Такой перевод полезнее фразы «нам нужен более премиальный синий», потому что позволяет сравнить два экрана по функции, а не по личной ассоциации.

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

Шаблон ролей цвета

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

Постройте матрицу разрешённых пар

Создайте таблицу, где строки — foreground-роли, а столбцы — background-роли. В каждой ячейке храните фактическое отношение контраста, назначение и статус PASS, FAIL или NOT USED. Не измеряйте цвет «сам по себе»: отношение существует только между двумя значениями. Если текст иногда лежит поверх фотографии, это не одна пара. Нужны подложка, контролируемая зона кадра или алгоритм, который гарантирует фон; иначе результат меняется от изображения к изображению.

Запрещённая пара так же важна, как разрешённая. Например, secondary ink может работать на paper raised, но не на тёмной фотографии; inverse text — на shell, но не на coral; coral — как небольшая линия, но не как фон длинного абзаца. Запишите запрет в токенах или документации рядом с образцами. Тогда разработчику не приходится угадывать, а дизайнер видит, что новый экран нарушает контракт до релиза.

Текстовый контраст: считайте по назначению

Для обычного текста уровень AA требует не менее 4,5:1. Крупный текст может проходить при 3:1, но нельзя назначать ему статус «крупный» только из-за маркетингового желания сохранить бледный оттенок: учитываются фактический размер и насыщенность по определению WCAG. Не округляйте 4,499 до 4,5. Сохраняйте исходные значения цвета и версию вычислителя, чтобы проверку можно было повторить после изменения токена.

Проверяйте не только абзац на чистом фоне. Включите placeholder, подпись поля, ошибку, disabled-состояние, выбранную вкладку, visited-ссылку, подпись изображения, данные графика и текст поверх action. Не все неактивные элементы обязаны иметь тот же порог, однако снижение контраста не должно делать активный контроль похожим на отключённый. Если вторичная информация нужна для принятия решения, слово «вторичная» не разрешает делать её нечитаемой.

Нетекстовый контраст: найдите части, несущие функцию

Критерий 1.4.11 относится к визуальной информации, необходимой для распознавания компонента, его состояния и значимого графического объекта. Проверьте границу поля, если без неё поле нельзя найти; контур иконки, если она единственный видимый триггер; выбранную точку графика; кольцо фокуса; маркер переключателя. Минимум 3:1 оценивается относительно соседних цветов. Декоративная линия, не нужная для понимания, может быть мягче, но её нельзя потом использовать как единственный индикатор выбора.

Разберите каждый control на слои. У кнопки есть фон, текст, граница, иконка и focus ring. У поля — поверхность, подпись, введённое значение, placeholder, граница, сообщение и индикатор ошибки. Один удачный контраст текста не делает весь компонент доступным. Составьте снимки покоя, наведения, клавиатурного фокуса, нажатия, недоступности, ошибки и успеха. Сравнивайте соседние состояния попарно и проверяйте, какой видимый признак сообщает изменение.

Не передавайте смысл только оттенком

Если обязательное поле становится только красным, часть людей не увидит различие. Добавьте текстовое сообщение, понятную иконку и программную связь с полем. Если выбранная линия графика только синяя, дайте ей отличимый штрих, маркер или прямую подпись. Если ссылка в абзаце отличается только оттенком, используйте подчёркивание или другой устойчивый признак в нужном контексте. Это не запрет цвета; это отказ возлагать на hue всю смысловую работу.

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

Пример: редакционная палитра без избытка акцента

Представьте тёплый светлый canvas, чуть более светлую поверхность публикации, глубокий графитовый текст, приглушённо-синюю ссылку и коралловое главное действие. Золото может существовать как редкий редакционный штрих, если не маскируется под кнопку и не несёт системное предупреждение. Сначала измеряются графит на обоих светлых фонах, ссылка на каждом фоне, inverse text на тёмной панели и текст на коралловой кнопке. Затем проверяются фокус, ошибки и disabled.

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

Проверьте реальные условия, а не только идеальный макет

• Яркий дневной свет и сниженная яркость экрана: остаются ли текст и фокус различимыми?

• Мобильная ширина: не превращается ли мелкая подпись в единственный носитель важного условия?

• Длинный русский заголовок: сохраняется ли роль цвета при переносах на три строки?

• Реальные ошибки формы: видны ли и цвет, и текст, и связь с конкретным полем?

• Высокая контрастность ОС и forced colors: не исчезает ли состояние полностью?

• Распечатка или PDF: не сливаются ли связанные данные после преобразования пространства?

Отдельно зафиксируйте цветовое пространство исходников и целевого вывода. CSS Color 4 допускает расширенные пространства, но валидное значение может оказаться вне гаммы устройства. Для широкой гаммы предусмотрите проверенный sRGB fallback и сравнение на целевых экранах. Не обещайте точное совпадение некалиброванного телефона, офисного монитора и печати. Цель системы — предсказуемое отношение ролей, а не физически идентичный фотометрический результат в любой среде.

Как оформить результат для команды

Сохраните токены с семантическими именами: color.canvas, color.surface, color.ink.primary, color.link.default, color.action.default, color.border.focus, color.status.error. Рядом поместите матрицу пар, дату проверки, инструмент, значение контраста и примеры состояний. Не называйте токен blue-500 в интерфейсном контракте, если его назначение — ссылка: при смене палитры имя станет ложным. Primitive-уровень может хранить шкалу, а component-уровень должен ссылаться на роль.

Изменение палитры проходит как маленькая миграция. Автор предложения указывает затронутые пары; автоматическая проверка пересчитывает значения; дизайнер просматривает ключевые экраны; команда проверяет фокус, ошибки и графику. Если новая пара провалилась, решение не откладывается до «полировки»: меняется токен или область использования. Документируйте исключение только тогда, когда информация действительно декоративна и это можно доказать без цвета.

Контрольный тест перед передачей

• Все используемые цвета назначены семантическим ролям, а не существуют только как свотчи.

• Для каждого текста известны фактический фон, размер и проверенное отношение.

• Значимые границы, иконки, focus ring и графические объекты проверены на 3:1.

• Ошибки, успехи, выбор и ссылки имеют видимый признак помимо цвета.

• Пограничные значения не округлены, а запрещённые пары явно записаны.

• На реальном контенте проверены покой, наведение, фокус, нажатие, недоступность и ошибка.

• Для расширенного gamut есть целевое пространство, fallback и устройство проверки.

Практика на одном экране

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

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

• построить смысловой центр кадра

• перенести палитру в style bible серии

• разобрать цвет референса без копирования поверхности

• сохранить авторское решение при работе с AI