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