Почему цвета вашего интерфейса выглядят по-джуниорски: 6 исправлений с точными кодами
Шесть цветовых ошибок, из-за которых интерфейс выглядит по-джуниорски, и сеньорное решение для каждой с точными кодами: один акцент, цвет плюс иконка плюс слова, тонированные области, более тёмный акцентный текст, тёмный текст на жёлтом и свой оттенок для каждого состояния.
Джуниорский цвет редко выглядит как конфликт. Это шесть мелких привычек: слишком много акцентов, цвет, который в одиночку несёт смысл, заливки полной яркости повсюду, светлый брендовый цвет в тексте, белый на жёлтом и один оттенок на все состояния. Сеньорный цвет выглядит спокойно, потому что для каждой из этих привычек есть правило. Вот все шесть, с кодами.
1. Один акцент, для действия
Красный
Зелёный
Янтарный
Фиолетовый
Нейтральный
Нейтральный
Нейтральный
Акцент #6440E0
Когда у каждого элемента свой цвет, цвет перестаёт что-либо значить. Взгляду не за что зацепиться, а настоящее действие конкурирует с декором.
Выберите один акцент и тратьте его только на то, с чем можно взаимодействовать: главная кнопка, выбранная вкладка, ссылка. Всё остальное делайте нейтральным. Если можно указать на цветной элемент и сказать «это не нажимается», уберите у него цвет. Правило 60-30-10 говорит о том же в пропорциях: акцент это маленькие десять.
2. Цвет, иконка и слова
✕ Джуниор: красная рамка и больше ничего
Введите адрес полностью, например sam@mail.com.
✓ Сеньор: цвет, иконка и слова
✕ Джуниор: какое поле с ошибкой?
Введите адрес полностью, например sam@mail.com.
✓ Сеньор: всё по-прежнему очевидно
Около 8 процентов мужчин северноевропейского происхождения плохо различают красный и зелёный, это привычное «1 из 12 мужчин». Для них, а также для всех, кто смотрит в телефон на солнце, красная рамка это серая рамка.
Поэтому у состояния должно быть три сигнала: цвет, иконка впереди и слова, говорящие, что делать. Это WCAG 1.4.1, использование цвета: цвет может поддерживать сообщение, но не быть единственным способом его передать. Полная палитра ошибок есть в нашей статье про цвет сообщений об ошибках.
3. Тонируйте большие области
Перейдите на Pro за $4
Офлайн-карты, без рекламы и общий доступ к поездкам.
Обновить✕ Джуниор: вся карточка полным цветом
Перейдите на Pro за $4
Офлайн-карты, без рекламы и общий доступ к поездкам.
Обновить✓ Сеньор: тон на фоне и полный цвет на кнопке
Большой блок цвета полной яркости кричит и расходует ваш акцент. Тогда кнопке внутри нечем выделиться, ведь всё вокруг уже того же цвета.
Тонируйте большую область, а полный цвет оставьте для того, что работает. Здесь карточка лежит на #E6DDFF, бледной ступени того же фиолетового, а кнопка полного #6440E0. Тот же приём подходит для баннеров, выбранных строк и выделенных секций. Как построить ступени тона из одного оттенка, показано в нашей статье о брендовых цветовых палитрах.
4. Затемняйте акцентный текст
Светло-фиолетовый на белом
Тёмно-фиолетовый на белом
Светлый брендовый цвет хорош как заливка и слаб как текст. #9A79FC выглядит дружелюбно на кнопке и разваливается как ссылка 14 px на белом. Решение сохраняет оттенок и снижает светлоту: #6440E0 это тот же фиолетовый, но достаточно глубокий, чтобы читаться.
Для тех, кому нужно защищать решение: #9A79FC на белом даёт 3,22 к 1, это ниже 4,5 к 1, которые WCAG требует для текста, а #6440E0 даёт 6,27 к 1. Числа и способы проверки объяснены в нашей статье о доступном цветовом контрасте.
Храните две версии каждого брендового цвета: яркую для заливок и иллюстраций и более глубокую для текста и тонких иконок.
5. Тёмный текст на жёлтом
Белый на жёлтом
Тёмный на жёлтом
Жёлтый и другие светлые цвета по природе яркие, поэтому у белого на них почти нет разницы в яркости. Белый на #FED480 это 1,41 к 1. Почти чёрный вроде #161513 на том же жёлтом это 12,99 к 1.
Правило работает для любой светлой заливки: бледно-жёлтой, мятной, небесно-голубой, персиковой. Если фон светлый, текст тёмный. Дизайнеру, привыкшему к белому на брендовом цвете, это кажется наоборот, но это один из самых быстрых способов сделать кнопку профессиональной.
6. Свой оттенок для каждого состояния
По умолчанию
Нажата
Неактивна
Кнопка, которая выглядит одинаково в покое и при нажатии, не даёт обратной связи, а неактивная кнопка того же цвета, что и активная, выглядит сломанной. Дайте каждому состоянию свой тон одного оттенка: #6440E0 по умолчанию, #4422B2 при нажатии и бледный тон вроде #E6DDFF с читаемой подписью #9A79FC в неактивном состоянии.
Неактивное это единственное состояние, где низкий контраст допустим, и WCAG делает для него исключение, но подпись всё равно должна быть достаточно разборчивой, чтобы люди понимали, что сделает кнопка. Тот же набор из трёх тонов работает для ссылок, вкладок и переключателей.
Шесть решений в одной таблице
| Джуниор | Сеньор | Значение |
|---|---|---|
| Много акцентов | Один акцент, для действия | #6440E0 на единственном, что нужно нажать |
| Только цвет | Цвет, иконка и слова | Никогда не единственный сигнал |
| Области полным цветом | Тонированные области | #E6DDFF на фоне, #6440E0 на кнопке |
| Светлый брендовый цвет в тексте | Более тёмный акцентный текст | #6440E0, а не #9A79FC |
| Белый на жёлтом | Тёмный текст на жёлтом | #161513 на #FED480 |
| Один оттенок на все состояния | Свой оттенок для состояния | #6440E0, #4422B2, #E6DDFF с подписью #9A79FC |
FAQ
Из-за чего цветовая палитра UI выглядит любительской?
Слишком много акцентов, цвет как единственный носитель смысла, заливки полной яркости на больших областях и светлые брендовые цвета в тексте. Исправление этих четырёх вещей обычно важнее, чем смена самой палитры.
Сколько акцентных цветов должно быть в UI?
Один. Используйте его только для того, что можно нажать или с чем можно взаимодействовать, а всё остальное оставьте нейтральным. Статусные цвета, например красный для ошибок, это отдельная история, и они всегда идут с иконкой и словами.
Какой цвет текста ставить на жёлтый фон?
Тёмный. #161513 на #FED480 даёт около 13 к 1, а белый на том же жёлтом около 1,4 к 1. То же относится к любому светлому фону.
Как сделать светлый брендовый цвет читаемым в тексте?
Сохраните оттенок и понизьте светлоту. #9A79FC даёт около 3,2 к 1 на белом, а #6440E0, тот же фиолетовый, около 6,3 к 1.
Какого цвета должна быть нажатая кнопка?
Более тёмного тона основного цвета, например #4422B2 относительно #6440E0. Это даёт людям обратную связь, что нажатие засчитано, без смены оттенка.
Должны ли неактивные кнопки соответствовать требованиям контраста?
WCAG освобождает неактивные элементы от минимального контраста, но подпись должна оставаться разборчивой, чтобы люди понимали, что делает кнопка.
Источники
- WCAG 2.2, 1.4.3 Contrast (Minimum) (4,5 к 1 для текста, неактивные компоненты исключены) и 1.4.1 Use of Color.
- Коэффициенты рассчитаны по формуле относительной яркости WCAG: #9A79FC на #FFFFFF 3,22 к 1, #6440E0 на #FFFFFF 6,27 к 1 (оба с оттенком около 254 градусов), #FFFFFF на #FED480 1,41 к 1, #161513 на #FED480 12,99 к 1.
- Красно-зелёная цветовая слепота затрагивает около 8 процентов мужчин северноевропейского происхождения по данным National Eye Institute.
- Оттенки состояний (#4422B2 при нажатии, #E6DDFF с подписью #9A79FC в неактивном состоянии) это наша собственная палитра. Цвета фильтров в разделе 1 приведены для примера.
- Впервые опубликовано как карусель в UX Brainy.
Want a palette that guides the eye across your whole product? Our team designs and builds UI and design systems with color decided once.
Get Started
