Теория цвета

Что это такое

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

Почему это важно

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

Ключевые идеи

Цвет несёт состояние, поэтому ему нужен партнёр

Никогда не кодируйте смысл только оттенком. Дополните его текстом, иконкой или формой, и сигнал переживёт и дальтонизм, и монохромную распечатку.

Плохо        зелёная точка = прошло, красная точка = не прошло
Лучше        зелёная точка + «прошло»  /  красная точка + «не прошло»
Лучше всего  иконка галочки + «прошло»  /  иконка предупреждения + «не прошло»  (оттенок избыточен)

Стройте линейки, а не образцы

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

blue-50   поверхность
blue-200  граница
blue-600  база, иконки и заливки
blue-800  текст на blue-50

Четыре шага на оттенок для двух-трёх оттенков, которые вы действительно используете, лучше двадцати образцов, использованных по одному разу.

Проверяйте контраст, а не оценивайте на глаз

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

основной текст на поверхности   нужно высокое отношение   <- проверяйте каждую страницу
крупный заголовок               нужно меньшее отношение
подсказка и отключено           чаще всего провалы в продукте

Один акцент — для действия, и больше ни для чего

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

Смысл культурен и контекстуален

Красный означает опасность в одном контексте и удачу в другом. Проверьте, что цвет значит для аудитории, и никогда не полагайтесь только на условность, когда хватит слова.

Практика

Проведите аудит одной палитры

Возьмите цвета живого интерфейса и перечислите каждую пару текста на фоне, которая действительно выпускается. Проверьте каждое отношение и отметьте провалы.

Готово, когда: у вас есть письменный список непрошедших пар и значение замены для двух худших.

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

Найдите статус, который сейчас передаётся только оттенком. Добавьте слово или иконку и второй канал, например вес или форму.

Готово, когда: статус остаётся однозначным, когда вы смотрите на него без цвета, например в оттенках серого.

Частые ошибки

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

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

Визуальный дизайн (03-design-ux/10-visual-design) — прочитайте это первым; цвет — одно из его четырёх решений.
Контраст и выравнивание (03-design-ux/10-visual-design/02-contrast-and-alignment) — дисциплина контраста, которую продолжает эта глава.
Визуализация данных (03-design-ux/31-data-visualization) — цвет как канал данных, где правила ещё жёстче.
Доступность (WCAG / a11y) (02-frontend/11-accessibility-wcag-a11y) — формальные отношения и как их проверять.