Что разберём
1Шестнадцать цветов там, где хватает девяти
Каждый цвет по отдельности выбран разумно. Вместе они делают экран пёстрым и непредсказуемым.
Слева — экран, где цвет подбирали для каждого места отдельно. Справа — тот же экран, собранный из палитры с ролями.
На глаз: 16 цветов
По палитре: 9 цветов
Что выдаёт цвет, подобранный на глаз
- Почти одинаковые цвета. Синий кнопки, синий ссылки и синий бейджа отличаются на пару единиц. Глаз видит «примерно синий», а в макете это три разных значения.
- Один смысл — разные цвета. Дата набрана одним серым, состав заказа — другим. Оба вторичный текст, а выглядят по-разному.
- Каждое новое место — новый цвет. Под следующий блок снова подбирают «чуть светлее», и палитра растёт.
2Палитра с ролями
Палитра — короткий список цветов, из которых собирается весь интерфейс. У каждого цвета одна роль.
Роль отвечает на вопрос «зачем этот цвет здесь». Девяти ролей экрану заказов хватает:
| Цвет | Роль | Где на экране |
|---|---|---|
| #FFFFFF | Фон | Карточки заказов, поле поиска |
| #F4F6F8 | Поверхность | Фон страницы и шапки |
| #DCE1E6 | Разделитель | Рамки карточек, линии |
| #808A94 | Граница поля | Рамка поля поиска |
| #1B1F24 | Основной текст | Заголовок, номер заказа, сумма |
| #5B6570 | Вторичный текст | Дата, состав заказа, подсказка в поле |
| #1D5FD1 | Действие | Кнопка, ссылка, бейдж «Новинка» |
| #C23030 | Ошибка | Статус «Отменён», текст ошибки в форме |
| #1E7B3A | Успех | Статус «Оплачен» |
Белый текст на кнопке — тот же белый фона. Отдельной строкой в палитре он не нужен, но в роли записан: «текст на действии». Об этом подробнее — в уроке Middle.
3Оттенок для поверхности и оттенок для текста
Один и тот же «синий» не годится везде. Для текста нужен тёмный оттенок, для фона — светлый.
Светлый синий хорош как подложка выбранного пункта, но текстом на белом его почти не прочитать.
Тёмный синий хорош для ссылки и кнопки, но фоном под текстом он слишком тяжёл.
Поэтому у цвета со смыслом обычно два оттенка: для текста и для поверхности.
| Как использован | Образец | Контраст |
|---|---|---|
| Тёмный синий, текст на белом | Изменить адрес | 5,81 : 1 — читается |
| Светлый синий, текст на белом | Изменить адрес | 2,43 : 1 — не читается |
| Светлый синий, фон под основным текстом | Курьер, завтра | 14,31 : 1 — читается |
| Тёмный красный, текст на белом | Неверный номер карты | 5,58 : 1 — читается |
| Светлый красный, текст на белом | Неверный номер карты | 2,66 : 1 — не читается |
| Светлый красный фон, основной текст | Оплата не прошла | 14,36 : 1 — читается |
4Как найти дубли
Дубль — цвет, у которого та же роль, что у соседа, а разница почти не видна.
Ниже все шестнадцать цветов экрана «на глаз». Семь из них можно убрать: они повторяют роль другого цвета.
Остальные девять остаются, хотя два из них меняют роль.
Нажимайте на цвета, которые убрали бы: в разборе будет, чем их заменить.
- #FFFFFFкарточки
- #F6F7F9фон страницы
- #F4F6F8фон поля
- #E3E7EBрамка карточек
- #DCE1E6рамка поля
- #9AA4AEдата
- #808A94подсказка в поле
- #6B7580состав заказа
- #5B6570причина отмены
- #333A42заголовок
- #1B1F24номер и сумма
- #1D5FD1кнопка
- #2A6FE0ссылка
- #3B7CF0бейдж
- #C23030отменён
- #1E7B3Aоплачен
- #FFFFFF — фон карточек.Остаётся. Роль «фон»: на нём лежит всё содержимое.
- #F6F7F9 — фон страницы.Убрать. Почти не отличается от #F4F6F8, а роль та же — поверхность под карточками. Оставьте один.
- #F4F6F8 — фон поля поиска.Остаётся. Он становится поверхностью: фоном страницы и шапки. А поле поиска получает белый фон и заметную рамку.
- #E3E7EB — рамка карточек.Убрать. Дубль #DCE1E6: оба — тонкая линия, которая отделяет блоки. Один цвет на роль «разделитель».
- #DCE1E6 — рамка поля.Остаётся, но меняет место. Это разделитель: рамки карточек и линии. Для рамки поля он слишком бледный — поле сливается с фоном.
- #9AA4AE — дата.Убрать. Дата — вторичный текст, как и состав заказа. К тому же этот серый на белом почти не читается: контраст 2,53 : 1. Берите вторичный текст #5B6570.
- #808A94 — подсказка в поле.Остаётся, но меняет роль. Как текст он слишком бледный, а как рамка поля — в самый раз: поле видно на белом фоне. Подсказка в поле становится вторичным текстом.
- #6B7580 — состав заказа.Убрать. Дубль #5B6570: оба — вторичный текст, разницу глазом не видно.
- #5B6570 — причина отмены.Остаётся. Роль «вторичный текст»: дата, состав заказа, подсказка в поле, причина отмены.
- #333A42 — заголовок экрана.Убрать. Рядом с #1B1F24 он выглядит тем же чёрным. Заголовок выделяют размером и весом, а цвет у него — основной текст.
- #1B1F24 — номер и сумма заказа.Остаётся. Роль «основной текст».
- #1D5FD1 — кнопка.Остаётся. Роль «действие»: кнопка, ссылка и всё, на что можно нажать.
- #2A6FE0 — ссылка.Убрать. Ссылка — тоже действие. Два почти одинаковых синих заставляют гадать, есть ли между ними разница.
- #3B7CF0 — бейдж и полоска «в пути».Убрать. Третий синий. Бейдж берёт цвет действия, а статус «в пути» получает слово вместо полоски. К тому же белый на этом синем даёт только 3,94 : 1.
- #C23030 — полоска «отменён».Остаётся. Роль «ошибка». Но статус теперь пишется словом, а красный только помогает.
- #1E7B3A — полоска «оплачен».Остаётся. Роль «успех». Как и красный, он теперь рядом со словом.
Все семь найдены. Из шестнадцати цветов осталось девять. Два из оставшихся поменяли место: светлый серый ушёл с рамки поля на разделители, средний — с подсказки на рамку поля.
Как искать дубли на своём экране
- Выпишите все цвета и где каждый встречается.
- Сгруппируйте по ролям: фоны, линии, текст, действия, статусы.
- Внутри группы сравните соседей. Если два цвета рядом не отличить с первого взгляда, а роль у них одна, оставьте один.
- Проверьте, что оставшиеся различимы. Основной и вторичный текст, фон и поверхность должны отличаться заметно, иначе роли сливаются.
5Статус не только цветом
Если статус передан одним цветом, часть людей его не увидит.
Красный и зелёный из палитры магазина почти одинаковой яркости: контраст между ними 1,05 : 1.
Когда цвет не различается — из-за особенностей зрения, яркого солнца на экране или чёрно-белой печати, — полоски «оплачен» и «отменён» становятся одинаковыми.
Включите «Без цвета» и сравните две карточки.
Только цветом
Словом и значком
Почему не только цветом
Нарушения цветового зрения — не редкость. По данным британской организации Colour Blind Awareness, они есть примерно у одного из двенадцати мужчин и одной из двухсот женщин. Чаще всего путаются красный и зелёный.
Правило WCAG 1.4.1 так и сформулировано: цвет не должен быть единственным способом передать информацию.
6Какая роль у цвета
Цвет выбирают по роли места: сначала роль, потом цвет из палитры.
Заливка кнопки «Оформить заказ».
ДействиеНа кнопку нажимают — значит, это цвет действия.
Текст «Неверный номер карты» под полем.
СтатусЭто ошибка. Цвет ошибки помогает её заметить, а смысл несут слова.
Фон карточки заказа.
ФонНа нём лежит содержимое карточки.
Тонкая линия между строками в списке заказов.
ГраницаРазделитель. Его задача — отделить строки, поэтому он светлый и не спорит с содержимым.
Сумма заказа «3 480 ₽».
ТекстОсновной текст. Сумму выделяют размером и весом, отдельный цвет ей не нужен.
Ссылка «Изменить адрес».
ДействиеПо ссылке тоже нажимают. Тот же цвет, что у кнопки: «похожий синий» здесь уже дубль.
Рамка поля «Телефон».
ГраницаРамка поля — граница, но заметнее разделителя: по ней человек находит, куда вводить.
Дата под заказом «12 сентября».
ТекстВторичный текст. Он светлее основного, но читается.
7Задание
Возьмите свой экран, выпишите все использованные цвета и сведите их к палитре с ролями. Приложите сравнение «до и после».
Часть 1 · Выписать цвета, 15 минут
- Выберите экран с разными элементами: текст, кнопки, поля, статусы.
- Сделайте копию и подпишите её «до».
- Выпишите каждый цвет и где он встречается. В Figma, если выделить фрейм, цвета всех слоёв собраны в правой панели в разделе Selection colors.
- Посчитайте, сколько всего цветов и сколько из них серых.
ЭКРАН: ______________________ Дата: __.__.____ «ДО» цветов на экране: __ из них серых: __ синих (или основного цвета): __ дубли (цвет → с каким совпадает по роли): ____________________ статусы только цветом: да / нет — где: ________________ ПАЛИТРА (цвет — роль — где) #______ — фон — ____________________ #______ — поверхность — ____________________ #______ — разделитель — ____________________ #______ — граница поля — ____________________ #______ — основной текст — ____________________ #______ — вторичный текст — ____________________ #______ — действие — ____________________ #______ — ошибка — ____________________ #______ — успех — ____________________ «ПОСЛЕ» все цвета из палитры: да / нет у каждого цвета есть роль: да / нет статусы названы словом: да / нет
Часть 2 · Собрать палитру, 20 минут
- Сгруппируйте цвета по ролям: фон, поверхность, линии, текст, действие, статусы.
- Внутри роли оставьте один цвет. Дубли замените на него.
- Проверьте оттенки: светлые — для фонов, тёмные — для текста и значков.
Часть 3 · Пересобрать экран, 40 минут
- Заведите цвета палитры стилями или переменными с именами ролей и привяжите к ним все слои.
- Статусы, переданные только цветом, дополните словом и значком.
- Положите «до» и «после» рядом и заполните часть «после» в шаблоне.
Что должно получиться
- Экраны «до» и «после» рядом.
- Палитра с ролями и местами на экране.
- Заполненный шаблон.
План работы: 15 минут на то, чтобы выписать цвета, 20 на палитру, 40 на пересборку. Всего — около полутора часов.
Частые сложности
- «У бренда пять фирменных цветов, все нужны». В интерфейсе у каждого из них должна быть роль. Фирменный цвет без роли уходит в иллюстрации и промо.
- «Серых не бывает меньше шести». Бывает и больше, если у каждого своя роль: фон, поверхность, разделитель, рамка поля, вторичный текст. Лишний серый — тот, чью роль не удаётся назвать.
- «Ссылка и кнопка разного синего, так задумано». Спросите, что должна понять разница. Если ответа нет, это один цвет.
- «В продукте уже есть палитра». Берите её. Задание учит держаться палитры, придумывать новую не нужно.
8Чек-лист и ошибки
Цвет собран в палитру, если
- Все цвета на экране из палитры
- У каждого цвета одна роль, и её можно назвать
- Одна роль — один цвет на всём экране
- Цвета одной группы заметно отличаются друг от друга
- Светлые оттенки — для фонов, тёмные — для текста и значков
- Статусы названы словом, цвет и значок помогают
- Новый цвет не появляется без новой роли
Что мешает
- Цвет на глаз. Три похожих синих и одиннадцать серых.
- Одна роль — разные цвета. Дата одним серым, состав заказа другим.
- Светлый оттенок текстом. Слово на белом почти не читается.
- Статус только цветом. Без цвета «оплачен» и «отменён» одинаковы.
- Цвет «под этот блок». Палитра растёт с каждым экраном.
9Три ступени темы
В этом уроке учимся собирать палитру с ролями. На следующих ступенях — проверять контраст и собирать тёмную тему, а потом описывать цветовую систему для команды.
| Ступень | Что нужно уметь | Как проверить результат |
|---|---|---|
| Junior — этот урок | Собрать палитру из ограниченного набора; дать каждому цвету роль; отличать оттенок для поверхности от оттенка для текста; находить дубли; не передавать статус одним цветом | Для каждого цвета на экране можно назвать его роль, цветов без роли не осталось |
| Middle | Мерить контраст текста, значков, границ и состояний; собирать тёмную тему на тех же ролях; не гасить неактивное одной прозрачностью | В таблице замеров нет пары ниже нормы ни в светлой теме, ни в тёмной |
| Senior | Описать цветовую систему: примитивы и роли, обе темы, таблица контраста, правило добавления нового цвета | Новый цвет в продукт другой дизайнер добавил по вашему правилу и без вас |
Что почитать дальше
- Refactoring UIРаздел «Working with Color», особенно «You need more colors than you think», «Define your shades up front» и «Greys don’t have to be grey». Первые две в сокращении открыты на сайте книги: 8–10 серых и по 5–10 оттенков на цвет, заданных заранее, — это палитра всей системы, а не одного экрана.
- Understanding Success Criterion 1.4.1: Use of ColorЧто считается «только цветом», а что уже нет: разница по светлоте от 3 : 1 засчитывается, а «зелёная рамка — верно, красная — ошибка» без слова или значка не проходит. Два примера и список техник, сами техники — на отдельных страницах.
- Types of Colour BlindnessВиды нарушений цветового зрения и какие пары при каждом путаются: красный с зелёным, коричневый с оранжевым, голубой с сиреневым. Там же статистика: 8 % мужчин и 0,5 % женщин. Справка британской благотворительной организации, про интерфейсы в ней ничего нет.
- Realtime ColorsПять цветов — текст, фон, основной, дополнительный и акцент — сразу раскладываются по живой странице, в светлой и тёмной теме. Ролей меньше, чем в уроке: нет серых и статусов, а ссылки инструмент красит акцентом, не цветом кнопки. Жёлтый значок контраста при 4,5–7 : 1 — не провал: это уже норма AA.