Почему не стоит использовать брендовый цвет для кнопок

Опасность брендовых цветов в UI

Многие дизайнеры автоматически используют фирменный цвет для кнопок CTA (призыва к действию). Казалось бы, логично — так интерфейс выглядит «в стиле бренда». Но на практике это может ухудшить юзабилити, снизить конверсию и даже раздражать пользователей.

Давайте разберёмся, почему фирменный цвет — плохой выбор для кнопок и чем его заменить.

Текст на кнопках становится нечитаемым

Многие бренды выбирают цвета, основываясь на эстетике, а не на удобстве. Например, оранжевый Home Depot выглядит ярко и броско, но если сделать кнопку такого же цвета, контраст с белым текстом будет недостаточным (3.0 вместо минимально допустимых 4.5 по стандартам доступности WCAG).

Что происходит?

Пользователи с ослабленным зрением не видят надписи.
Даже у людей с нормальным зрением текст может «сливаться» с фоном.

Вывод: если цвет бренда — светлый или неконтрастный, кнопки в таком оттенке будут работать плохо.

Красные кнопки пугают пользователей

Красный в интерфейсах — это не просто цвет. Это сигнал опасности. Обычно он используется для:

Кнопок удаления данных.
Предупреждающих сообщений.

Что будет, если ваш брендовый цвет — красный?

Пользователи могут случайно нажать «Удалить», думая, что это обычная кнопка.
И наоборот — будут бояться нажимать на CTA, потому что красный подсознательно ассоциируется с риском.

Вывод: если бренд использует красный, лучше не красить в него кнопки — это создаёт путаницу.

Кнопки теряются среди других элементов

Если фирменный цвет используется везде (заголовки, иконки, фоны), кнопки CTA перестают выделяться. Пользователи просто не замечают их среди визуального шума.

Решение:

Используйте контрастный цвет для кнопок (например, синий).
Убедитесь, что другие элементы не «перетягивают» внимание.

Синие кнопки работают лучше — и вот почему

Исследования показывают: синие кнопки дают максимальную конверсию. Почему?

✅ Привычка. С первых дней интернета ссылки были синими — пользователи ожидают, что на такой элемент можно нажать.

✅ Доверие. Синий ассоциируется с надёжностью (источник). А клик по кнопке — это всегда небольшой риск («куда меня приведёт эта кнопка?»).

✅ Доступность. Люди с дальтонизмом (а это 8% мужчин!) плохо различают красный и зелёный, но синий видят хорошо.

Пример:
Посмотрите, как видят кнопки люди с протанопией (форма дальтонизма). Синяя остаётся синей, а остальные цвета «плывут».

Что делать, если бренд требует «фирменных» кнопок?

Добавьте синий в палитру.
Можно использовать оттенки: royal blue, navy, indigo — они хорошо работают на светлом фоне.
Используйте фирменный цвет в других элементах.

Заголовки
Иконки
Активные состояния

Проверьте контраст.
Даже если кнопка не синяя, убедитесь, что текст на ней читается (минимум 4.5:1).

Миф: «Без фирменных кнопок интерфейс будет некрасивым»

На самом деле:

Кнопки — это функциональный элемент, а не декоративный.
Пользователи ценят удобство больше, чем «красоту в стиле бренда».

Вывод:
Сначала юзабилити, потом брендинг.

Итог

Фирменный цвет на кнопках = риск.
Синий — безопасный и эффективный вариант.
Проверяйте контраст и доступность.

Попробуйте A/B-тест: сравните конверсию у «брендовых» и синих кнопок. Результаты вас удивят! 🚀