Сайт красивый, трафик идёт, а заявок мало. Проверили заголовки, оффер, кейсы — всё в порядке. А кнопку посмотреть не догадались.
Цвет кнопки — не эстетика. Это инструмент управления вниманием. Даже если на кнопке написан идеальный текст, неправильный цвет заставит пользователя её не заметить или не захотеть нажимать.
В этой статье — как цвет кнопки влияет на конверсию, какие цвета работают, а какие убивают заявки, и как протестировать свой вариант за 1 день.
Почему цвет кнопки вообще влияет на клики?
Человек сканирует сайт нелинейно. Глаз цепляется за три вещи:
Лица (люди, фото).
Крупный контрастный текст.
Яркие пятна, отличающиеся от фона.
Кнопка должна быть самым заметным элементом на странице (после заголовка). Если она сливается с фоном или с другими элементами — пользователь пролистывает мимо.
Пример:
На сером фоне кнопка светло-серая — не заметна.
На сером фоне кнопка оранжевая — видна мгновенно.
Разница в контрасте может дать +50% кликов без изменения текста или оффера.
5 ошибок в цвете кнопки, которые убивают конверсию
Ошибка №1. Кнопка сливается с фоном
Как выглядит:
Светло-голубая кнопка на голубом фоне. Серая кнопка на сером. Белая кнопка на белом.
Почему плохо:
Глаз не находит кнопку. Пользователь видит текст, картинки, но не понимает, куда нажимать. В лучшем случае ищет ссылку в тексте. В худшем — уходит.
Как исправить:
Кнопка должна быть самым контрастным элементом на странице. Если фон светлый — кнопка тёмная или яркая. Если фон тёмный — кнопка светлая или неоновая.
Ошибка №2. Кнопка такого же цвета, как и другие элементы
Как выглядит:
На странице есть ссылки, иконки, акценты одного цвета (например, синего). И кнопка тоже синяя.
Почему плохо:
Кнопка теряется среди других элементов. Пользователь может принять её за очередную ссылку и не придать значения.
Как исправить:
Сделайте цвет кнопки уникальным. Пусть на странице больше не будет элементов этого цвета (или их будет совсем мало). Это закрепит ассоциацию: «этот цвет = действие».
Ошибка №3. Кнопка не контрастирует с текстом
Как выглядит:
Белая кнопка на светлом фоне, но на кнопке белый текст — не читается. Или тёмная кнопка, и текст тёмный.
Почему плохо:
Человек видит кнопку, но не может прочитать, что на ней написано. Если текст нечитаем — кликать не будет (боится, что нажмёт не туда).
Как исправить:
Обеспечьте контраст между текстом и фоном кнопки по правилу 4.5:1 (стандарт WCAG). Самый простой способ: белый текст на тёмной кнопке или чёрный текст на очень светлой кнопке.
Красный цвет — цвет ошибки, стоп-сигнала, опасности. У многих вызывает подсознательное напряжение. Он работает для кнопок «Удалить», «Отменить», «Не сейчас», но не для позитивного действия.
Исследование: В одном A/B-тесте зелёная кнопка «Начать» обогнала красную на 30% кликов, потому что зелёный ассоциируется с «разрешено», «безопасно», «вперёд».
Как исправить:
Оставьте красный для деструктивных действий. Для позитивных используйте зелёный, синий, оранжевый, жёлтый (на тёмном фоне) или бирюзовый.
Ошибка №5. Кнопка меняет цвет при наведении незаметно
Как выглядит:
Кнопка была синяя, при наведении стала чуть-чуть другого оттенка синего. Разница почти не видна.
Почему плохо:
Пользователь не понимает, что кнопка интерактивна. Он может не решаться нажать, потому что «непонятно, нажимается ли это вообще».
Как исправить:
Сделайте изменение цвета при наведении (или hover на десктопе, и активное состояние на тач-устройствах) заметным: меняйте цвет на противоположный по тону, делайте темнее/светлее на 20–30%, добавляйте тень или обводку.
Какие цвета кнопок работают лучше всего (и почему)
Нет одного «волшебного» цвета, который подойдёт всем. Но есть проверенные сочетания.
Оранжевый
Где работает: на сайтах с услугами, лендингах, инфобизнесе.
Почему: ассоциируется с энергией, теплом, действием. При этом достаточно редкий на сайтах, поэтому выделяется.
Почему: ассоциируется с деньгами, ростом, безопасностью, разрешением.
С чем сочетать: белый, светло-серый, тёмно-зелёный фон.
Синий
Где работает: B2B, корпоративные сайты, IT, банки, консалтинг.
Почему: вызывает доверие, спокойствие. Но если на сайте много синего — кнопка может потеряться.
С чем сочетать: оранжевый, жёлтый (для акцента).
Жёлтый / Золотой
Где работает: акции, скидки, ограниченные предложения, премиум-услуги.
Почему: привлекает внимание, ассоциируется с выгодой. Но на белом фоне может быть нечитаем — нужна тёмная обводка или тень.
С чем сочетать: тёмно-синий, чёрный, фиолетовый фон.
Чёрный / Тёмно-серый
Где работает: люксовые бренды, минималистичный дизайн, креативные агентства.
Почему: выглядит дорого, премиум. Но на тёмном фоне не сработает.
С чем сочетать: белый фон, золотой текст.
Важно: цвет кнопки должен сочетаться с брендом, но при этом быть самым ярким элементом. Если ваш фирменный цвет — спокойный синий, а кнопка тоже синяя — она не выделится. Возьмите дополнительный цвет (комплиментарный) именно для кнопок.
Как протестировать цвет кнопки за 1 день (без сложных инструментов)
Вы можете не гадать, какой цвет лучше. Просто протестируйте.
Вариант 1. A/B-тест в рекламном кабинете
Запустите две одинаковые кампании с одним объявлением, но на разных посадочных страницах (или на одной, но с A/B-тестом в конструкторе).
Страница А: зелёная кнопка.
Страница Б: оранжевая кнопка.
Через 200–300 кликов (обычно 1–2 дня) посмотрите, где больше конверсий.
Вариант 2. Быстрый опрос
Сделайте скриншот вашего сайта с двумя вариантами кнопок.
Покажите 5–10 знакомым (или в тематическом чате) и спросите: «Какая кнопка больше привлекает внимание?», «На какую бы вы нажали первым делом?».
Вариант 3. Аналитика поведения (карты кликов)
Сервисы типа Hotjar, Яндекс.Метрика (Вебвизор) показывают, куда кликают пользователи. Если на вашу кнопку почти не кликают — возможно, проблема не только в цвете, но и в размере или расположении. Цвет — одна из первых гипотез.
Реальный кейс: как смена цвета кнопки подняла конверсию на 43%
Клиент: Интернет-магазин товаров для дома (средний чек 5000 ₽).
Исходные данные: На странице товара была синяя кнопка «Купить» на синем же фоне. Конверсия в корзину — 2,1%.
Гипотеза: Кнопка сливается с фоном и с другими синими элементами (скидки, навигация).
Что сделали: Поменяли цвет кнопки на оранжевый (дополнительный к синему). Текст остался тем же. Также чуть увеличили кнопку и добавили тень.
Результат через 5 дней:
Конверсия выросла до 3,0% (+43%). Дополнительные продажи за месяц: около 120 000 ₽. Вложения: 0 ₽ (просто правка в CSS).
Чек-лист по цвету кнопки
Проверьте свою кнопку прямо сейчас:
Кнопка заметно отличается от фона (высокий контраст).
На странице нет других элементов точно такого же цвета.
Текст на кнопке хорошо читается (контраст 4.5:1).
Цвет не вызывает негативных ассоциаций (красный — только для отмены).
При наведении (или тапе) цвет меняется заметно.
Размер кнопки достаточный (особенно на мобильных).
Если хотя бы один пункт не выполнен — вы теряете заявки.
Что делать, если вы не уверены в своём варианте?
Самый простой способ — заказать аудит конверсии сайта. Я смотрю не только цвет кнопки, но и расположение, текст, оффер, адаптивность. Часто проблема в связке: цвет плохой + кнопка мелкая + текст непонятный. Исправляем всё вместе — и конверсия растёт в 2–3 раза.
📩 Призыв к действию
Хотите узнать, почему ваша кнопка не кликается, и подобрать цвет, который реально работает?
Напишите мне «КНОПКА» в Telegram или через форму на сайте — я бесплатно проанализирую вашу кнопку (цвет, размер, контраст, текст) и пришлю 3 рекомендации, как увеличить клики.