Палитру часто выбирают по красоте, а потом не могут выделить кнопку. Разбираем, как собрать схему, в которой у каждого цвета есть работа.
Коротко
- Цветов нужно мало, но с ролями.
- Акцент — только для действий.
- Контраст задан требованиями.
- Цветом нельзя передавать единственный смысл.
Какие роли нужны цветам
| Роль | Где применяется |
|---|---|
| Основной фон | Почти вся страница |
| Основной текст | Весь текст |
| Второстепенный текст | Подписи, сноски |
| Акцент | Кнопки и главные действия |
| Линии и границы | Разделители, рамки |
| Состояния | Ошибка, успех, предупреждение |
Палитра — это не набор красивых оттенков, а распределение ролей. Когда у каждого цвета есть работа, вопрос «каким сделать эту кнопку» не возникает: она акцентная, потому что это главное действие. Схема из пяти-шести цветов с ролями работает лучше, чем из двенадцати без них.
Как работает акцент
Правильно
- Акцент — только у главного действия
- Одно главное действие на экран
- Второстепенные кнопки без акцента
- Акцент не используется в оформлении
Не работает
- Акцентом выделено пять элементов
- Акцент в фоне блоков
- Две кнопки одинаковой яркости
- Акцент совпадает с цветом ошибки
Последняя строка правой колонки создаёт настоящие проблемы. Если кнопка заявки того же цвета, что сообщения об ошибке, посетитель воспринимает её как предупреждение: цвета состояний стоит держать отдельно от акцентного. Про кнопки — в статье про путь до заявки.
Требования к контрасту
| Что | Требование WCAG 2.2 |
|---|---|
| Обычный текст | Не менее 4,5:1 |
| Крупный текст | Не менее 3:1 |
| Крупным считается | От 18 пунктов или 14 пунктов полужирного |
| Элементы интерфейса и их состояния | Не менее 3:1 к соседним цветам |
| Графика, нужная для понимания | Не менее 3:1 |
| Не требуется | Неактивные элементы, оформление, логотипы |
Четвёртая строка про интерфейс задевает то, о чём обычно не думают: границы полей ввода, переключатели и иконки тоже должны быть различимы. Светло-серая рамка поля на белом фоне выглядит аккуратно и не видна на телефоне под солнцем.
Цвет как единственный смысл
| Так не стоит | Как исправить |
|---|---|
| Ошибка только красной рамкой | Добавить текст ошибки |
| Обязательные поля только цветом | Пометить словом или знаком |
| Статусы заказа только цветом | Подписать |
| Ссылки только цветом в тексте | Добавить подчёркивание |
| График только цветами | Подписи рядом с линиями |
Это не только про людей с нарушениями цветового зрения. Цвет теряется при печати, на плохом экране, под солнцем и при экономном режиме экрана: дублирование смысла словом или знаком делает интерфейс понятным во всех этих случаях. Про графики — в статье про визуализацию данных.
Как собрать схему
Взять фирменный цвет, если он есть
От него отталкиваться.
Выбрать фон и цвет текста
С проверкой контраста.
Подобрать акцент
Заметный на фоне.
Добавить нейтральные оттенки
Для линий и второстепенного.
Задать цвета состояний
Отдельно от акцента.
Проверить всё на контраст
Каждую пару.
Первый шаг избавляет от лишней работы. Если у компании есть фирменный цвет, палитра строится вокруг него — иначе сайт будет выглядеть чужим рядом с визитками и вывеской. Если фирменного цвета нет, это отдельная задача, и решать её в макете сайта неудобно.
Как проверить схему
| Проверка | Что показывает |
|---|---|
| Проверщик контраста по парам | Соответствие требованиям |
| Распечатать в чёрно-белом | Различимы ли элементы без цвета |
| Посмотреть на телефоне на улице | Реальные условия |
| Найти главное действие на экране | Работает ли акцент |
| Показать человеку с дальтонизмом | Или имитацией в браузере |
Вторая проверка бесплатна и находит больше всего проблем. Чёрно-белая распечатка сразу показывает, где смысл держится только на цвете, а где различия остаются видны — и это ровно то, что нужно проверить.
Частые вопросы
Сколько цветов нужно в схеме?
Пять-шесть, но с ролями: фон, основной текст, второстепенный текст, акцент, линии и цвета состояний. Роли важнее количества.
Для чего нужен акцентный цвет?
Только для главного действия. Если акцентом выделено пять элементов, не выделено ничего, а совпадение акцента с цветом ошибки заставляет читать кнопку как предупреждение.
Какой контраст требуется по WCAG 2.2?
Не менее 4,5:1 для обычного текста, не менее 3:1 для крупного (от 18 пунктов или 14 полужирного) и не менее 3:1 для элементов интерфейса и значимой графики.
Почему нельзя передавать смысл только цветом?
Цвет теряется при печати, на плохом экране и под солнцем, а не только у людей с нарушениями цветового зрения. Смысл дублируют словом или знаком.
Сделаем сайт, который приносит заявки
Спроектируем структуру под запросы, соберём и запустим — с учётом SEO с первого дня.
Обсудить разработку
