Цвет обсуждают чаще других элементов дизайна и почти всегда на уровне ощущений: этот успокаивает, тот раздражает. В работе такой разговор мало что даёт. Цвет в интерфейсе решает конкретные задачи — расставляет иерархию, обозначает состояние, выделяет действие, — и оценивать его стоит по тому, справляется он с ними или нет. Разбираем, что мы учитываем, когда собираем палитру для сайта.
Осторожнее с «универсальными значениями»
Списки вроде «синий — надёжность, зелёный — экология, красный — срочность» встречаются в каждой второй статье о дизайне. Проблема в том, что они описывают культурную привычку, а не свойство самого цвета, и привычка эта различается по странам, отраслям и возрастным группам. Белый в европейской традиции связан с чистотой, в ряде азиатских культур — с трауром. Зелёный в интерфейсе банка означает не природу, а успешную операцию.
Гораздо сильнее «врождённых значений» работает отраслевой контекст: аудитория переносит на сайт ожидания от других сайтов той же тематики. Поэтому перед выбором палитры мы смотрим на цветовые решения ближайших конкурентов — не чтобы повторить, а чтобы понять, что читается как норма, а что как исключение. Отклоняться от нормы полезно осознанно, а не по случайности.
Что цвет делает в интерфейсе
У цвета в работающем интерфейсе несколько обязанностей, и их стоит разделять.
- Иерархия. Тёмный текст, серый вспомогательный, ещё светлее подписи — так видно, что читать в первую очередь.
- Акцент. Один цвет отвечает за действие: кнопка, ссылка, активный элемент. Если акцентных цветов два-три, акцента нет.
- Статус. Успех, ошибка, предупреждение, информация — четыре состояния, которые встречаются почти в любой форме.
- Разделение. Фоновые оттенки и границы отделяют блоки друг от друга без лишних линий.
- Узнаваемость. Фирменный цвет связывает сайт с остальными материалами компании.
Ошибки начинаются там, где обязанности смешиваются: фирменный цвет одновременно назначают акцентом, цветом заголовков и фоном половины блоков. После этого выделить кнопку становится нечем.
Роли цветов в системе
Мы описываем палитру ролями, а не оттенками. Роль объясняет, где цвет применяется, и не даёт разработчику подобрать «похожий» тон по своему усмотрению.
| Роль | Что обозначает | Где применяется | На что смотрим |
|---|---|---|---|
| Фон страницы | Основа, на которой всё лежит | Подложка страницы и карточек | Не чисто белый и не чисто чёрный: так меньше устают глаза |
| Основной текст | Читаемое содержимое | Абзацы, заголовки, таблицы | Контраст с фоном не ниже 4,5:1 |
| Вспомогательный текст | Подписи, даты, пояснения | Метаданные, подсказки к полям | Ослабляем аккуратно: 4,5:1 действует и здесь |
| Акцент | Главное действие | Кнопки, ссылки, активные вкладки | Один цвет на весь сайт, плюс оттенки для наведения и нажатия |
| Успех | Операция выполнена | Уведомления, статусы заказа | Дублируем значком и текстом |
| Ошибка | Действие не выполнено | Поля формы, сообщения | Всегда сопровождаем пояснением, что исправить |
| Предупреждение | Требуется внимание | Сроки, ограничения, остатки | Жёлтые оттенки плохо читаются на белом, темним |
| Нейтральные оттенки | Структура страницы | Границы, разделители, отключённые элементы | Хватает четырёх-пяти ступеней серого |
Схемы сочетаний
Классические схемы помогают на старте, когда нужно быстро получить рабочий набор оттенков.
- Монохромная. Один тон в разных светлотах. Спокойно и почти без риска, но акцент приходится выделять контрастом светлоты, а не цветом.
- Комплементарная. Основной цвет плюс противоположный на круге. Даёт заметный акцент, требует осторожности: два насыщенных дополнительных цвета рядом рябят.
- Аналоговая. Соседние тона. Мягкое сочетание для оформления, слабое для акцентов.
- Триадная. Три равноудалённых тона. Живое решение, но для сайта обычно избыточное: третий цвет некуда применить.
На практике мы почти всегда приходим к схеме «нейтральная база плюс один акцент», а фирменные цвета распределяем по ролям. Схема сама по себе не гарантирует результата: любую пару нужно проверять на контраст и смотреть, как она ведёт себя на мелких элементах.
Контраст и доступность
Контраст — единственная характеристика цвета, которую можно измерить, и она же чаще всего проваливается. Рекомендации WCAG уровня AA задают понятные ориентиры: для основного текста отношение яркостей не ниже 4,5:1, для крупного текста и значимых графических элементов — 3:1.
Типичные места, где контраст теряется:
- Серый вспомогательный текст, осветлённый «для лёгкости».
- Белые надписи на светлом фирменном цвете — особенно на жёлтом и салатовом.
- Текст поверх фотографии без затемняющей подложки.
- Подсказки внутри полей формы вместо подписей над ними.
- Границы полей и переключателей, различимые только на хорошем мониторе.
Проверяем это не глазами, а инструментом, и обязательно на телефоне при дневном свете. Экран смартфона на улице показывает совсем не ту картинку, что монитор в переговорной.
Не кодировать смысл одним цветом
Около восьми процентов мужчин имеют ту или иную форму нарушения цветовосприятия, чаще всего затрагивающую различение красного и зелёного. Для интерфейса это означает простое правило: цвет может усиливать сообщение, но не должен быть единственным его носителем.
- Ошибочное поле подсвечиваем цветом и подписываем текстом ошибки.
- Статусы в таблице сопровождаем словом или значком, а не одной цветной точкой.
- На графиках подписываем линии и различаем их начертанием, а не только оттенком.
- Обязательные поля помечаем символом, а не красной рамкой.
- Ссылки в тексте оставляем подчёркнутыми: цвет ссылки на пёстром фоне заметен не всем.
Быстрая проверка: перевести макет в оттенки серого. Если после этого непонятно, где кнопка и какая строка таблицы проблемная, цветом закодировано слишком много.
Цвет кнопки и миф про красную кнопку
Совет «сделайте кнопку красной, и заявок станет больше» кочует из статьи в статью. Работает не сам цвет, а разница между кнопкой и окружением. Красная кнопка выигрывала в тестах, где вся страница была синей, и проигрывала там, где красного и без неё хватало.
Мы исходим из другого: акцентный цвет не должен встречаться на странице больше нигде. Если фирменный цвет уже занял шапку, подвал и заголовки, для кнопки берём производный оттенок, заметно отличающийся по светлоте. Второстепенные действия — «Сбросить», «Отмена» — оформляем нейтрально, иначе рядом оказываются две одинаково заметные кнопки, и человек нажимает не ту.
Тёмная тема
Тёмная тема — это не инверсия светлой. Белый текст на чёрном фоне при полной насыщенности даёт эффект дрожания контуров, поэтому фон делают тёмно-серым, а текст — не чисто белым. Насыщенные фирменные цвета на тёмном фоне выглядят ярче, чем задумано, и их приглушают.
Ещё одна особенность: в светлой теме глубину показывают тенью, в тёмной тень не видна, и слои различают светлотой — чем ближе поверхность, тем она светлее. Если тёмная тема в планах, роли в палитре сразу задают двумя наборами значений, иначе её добавление превращается в переверстку.
Как мы собираем палитру на проекте
- Разбираем задачи страниц и список состояний, которые нужно показывать.
- Берём фирменные цвета и распределяем их по ролям, а не по блокам.
- Строим нейтральный ряд: фон, поверхности, границы, четыре-пять ступеней серого для текста и разделителей.
- Назначаем акцент и производные оттенки для наведения, нажатия и отключённого состояния.
- Добавляем четыре системных цвета — успех, ошибка, предупреждение, информация.
- Проверяем все пары «текст на фоне» на контраст и правим значения, а не подписи.
- Смотрим макет в оттенках серого и на телефоне при дневном свете.
- Фиксируем палитру переменными в коде, чтобы значения не расползались по проекту.
Такой порядок занимает немного времени, зато снимает большую часть последующих споров: обсуждать приходится не «нравится или нет», а соответствие роли и измеримый контраст.
Цвет работает тогда, когда встроен в общую логику интерфейса, а не подобран отдельно от неё. Мы начинаем с задач пользователя и сценариев, а палитру собираем под них: дизайн и проектирование интерфейсов помогают получить систему цветов, которую можно расширять без переделки сайта. Расскажите о проекте — разберём и предложим решение.
