Как вы думаете, сколько времени нужно посетителю, чтобы составить мнение о вашем сайте? Всего 90 секунд. То есть за полторы минуты он решит, остаться ему или нажать на крестик. А теперь внимание: от 62 до 93% этого времени человек оценивает исключительно цвет. Не текст. Не логику аргументов. Не удобство навигации. Цвет. Пользователь еще не успел прочитать заголовок или изучить преимущества продукта, но уже решил, выглядит ли компания надежной, современной, заслуживающей доверия.
Причем относится это не только к главной странице. Цвет формирует восприятие на каждом digital-канале: сайтах, лендингах, в email-рассылках, баннерной рекламе, мобильных приложениях. Поменяли палитру в одном месте, значит изменили сигнал, который получает пользователь во всей воронке. Поэтому подбирать цветовую гамму стоит системно, а не «на глаз».
Причем относится это не только к главной странице. Цвет формирует восприятие на каждом digital-канале: сайтах, лендингах, в email-рассылках, баннерной рекламе, мобильных приложениях. Поменяли палитру в одном месте, значит изменили сигнал, который получает пользователь во всей воронке. Поэтому подбирать цветовую гамму стоит системно, а не «на глаз».
- Теория цвета для веб-дизайна: от физики до гармонии →
- Три параметра цвета: тон, насыщенность, яркость →
- Психология цвета: как разные цвета влияют на поведение пользователей →
- Как цвет влияет на конверсию сайта и лендинга →
- Цвет CTA-кнопок: как выбрать и протестировать →
- Цвет в email-маркетинге →
- Цвет в мобильных приложениях →
- Цвет в баннерной рекламе →
- Как проверить эффективность цвета на практике →
- Контраст и доступность →
- Ошибки при выборе цвета для сайта →
- Ответы на вопросы →
Теория цвета для веб-дизайна: от физики до гармонии
Давайте начнем с базы — с цветового круга. В разное время его описывали и Ньютон, и швейцарский художник Иоганнес Иттен. Веб-дизайнеры чаще всего опираются именно на круг Иттена.
В 1666 году Ньютон пропустил солнечный луч через призму и получил спектр. Разложил белый свет на составляющие и замкнул их в круг. Так и появился первый цветовой круг. А через два с лишним столетия Иоганнес Иттен, преподаватель Баухауса, доработал эту модель. Он выделил три первичных цвета (красный, желтый, синий), три вторичных (оранжевый, зеленый, фиолетовый) и шесть третичных. Получился тот самый круг из 12 секторов, который вы наверняка видели на уроках рисования в школе.
На практике работают три схемы сочетания цветов для сайта:
В 1666 году Ньютон пропустил солнечный луч через призму и получил спектр. Разложил белый свет на составляющие и замкнул их в круг. Так и появился первый цветовой круг. А через два с лишним столетия Иоганнес Иттен, преподаватель Баухауса, доработал эту модель. Он выделил три первичных цвета (красный, желтый, синий), три вторичных (оранжевый, зеленый, фиолетовый) и шесть третичных. Получился тот самый круг из 12 секторов, который вы наверняка видели на уроках рисования в школе.
На практике работают три схемы сочетания цветов для сайта:
Три параметра цвета: тон, насыщенность, яркость
Допустим, вы хотите оформить сайт в синем цвете. А в каком синем? Ведь на самом деле под этой формулировкой скрывается семейство из десятков оттенков, и каждый из них работает по-своему.
В начале XX века американский художник и преподаватель Альберт Манселл предложил описывать любой цвет через яркость, насыщенность и тон. Система прижилась, потому что оказалась удобной для всех, кто связан с полиграфией. И для веб-дизайнеров она полезна тем, что превращает абстрактное «мне нравится» в конкретные настройки, которые можно зафиксировать и воспроизвести.
Давайте разберемся, что скрывается за каждым параметром:
В начале XX века американский художник и преподаватель Альберт Манселл предложил описывать любой цвет через яркость, насыщенность и тон. Система прижилась, потому что оказалась удобной для всех, кто связан с полиграфией. И для веб-дизайнеров она полезна тем, что превращает абстрактное «мне нравится» в конкретные настройки, которые можно зафиксировать и воспроизвести.
Давайте разберемся, что скрывается за каждым параметром:
Это означает, что два элемента интерфейса могут быть «одним и тем же» синим по тону, но один будет ярким, а второй приглушенным и почти незаметным на белом фоне. Разница не в цвете как таковом, а в насыщенности и яркости.
Как применять на сайте:
Манселл дал нам язык, на котором можно описать цвет без субъективных оценок. Не «красивый синий» или «какой-то блеклый», а конкретные значения H, S, L или H, S, V в цветовом пикере. Запишите их в брендбук, передайте разработчику, и на всех страницах, во всех письмах и баннерах будет нужный оттенок.
Как применять на сайте:
- CTA-кнопка — нужна высокая насыщенность и контрастная яркость относительно фона. Бледная, малонасыщенная кнопка просто потеряется, глаз за нее не зацепится.
- Фоновые блоки и разделы — уместней низкая насыщенность и средняя или высокая яркость, иначе фон будет «кричать» и конкурировать с контентом.
- Текст — больше подойдет темный тон шрифта, минимальная насыщенность, низкая яркость на светлом фоне. Любые эксперименты с яркостью текста напрямую бьют по читаемости.
Манселл дал нам язык, на котором можно описать цвет без субъективных оценок. Не «красивый синий» или «какой-то блеклый», а конкретные значения H, S, L или H, S, V в цветовом пикере. Запишите их в брендбук, передайте разработчику, и на всех страницах, во всех письмах и баннерах будет нужный оттенок.
Психология цвета: как разные цвета влияют на поведение пользователей
За миллионы лет эволюции у нас закрепились вполне конкретные реакции на цвет. Например, желтый ассоциируется с солнечным светом и активностью, красный с опасностью или добычей. Мы не выбираем эти ассоциации, они уже вшиты в нервную систему. Добавьте еще сюда культурный код и факторы, которые формируются с детства, и получите сложную, но предсказуемую картину. Предсказуемую в том смысле, что вы можете ей управлять.
В работе я всегда отталкиваюсь от простой идеи: сначала цель коммуникации, потом цвет.
Таблица влияния цвета для разных сайтов:
В работе я всегда отталкиваюсь от простой идеи: сначала цель коммуникации, потом цвет.
Таблица влияния цвета для разных сайтов:
Обратите внимание, что психология цвета в веб-дизайне работает немного по-другому. Пользователь не рассматривает страницу, он сканирует ее. И цвет здесь выполняет роль маркера. Он говорит: «внимание», «это важно», «сюда нажать», «это надежно». Например, синий на странице оплаты снизит тревожность. Красный на таймере акции создаст ощущение дефицита. Зеленый на статусе «заказ оформлен» подаст сигнал о завершенности.
И еще один момент, который часто упускают. Важны не только цвета на сайтах, но и их сочетания с окружением. Один и тот же зеленый может быть «экологичным» на белом фоне и «тревожным» на красном. Поэтому всегда рассматривайте каждый цвет в системе, а не изолированно.
И еще один момент, который часто упускают. Важны не только цвета на сайтах, но и их сочетания с окружением. Один и тот же зеленый может быть «экологичным» на белом фоне и «тревожным» на красном. Поэтому всегда рассматривайте каждый цвет в системе, а не изолированно.
Как цвет влияет на конверсию сайта и лендинга
Сам цвет конверсию не повысит. Но он работает на доверие. А доверие в digital строится на опыте, экспертизе, авторитетности и надежности. В SEO это называют моделью E-E-A-T. Эти пункты закрываются не только контентом, кейсами, отзывами, но и правильно подобранной цветовой гаммой. Аккуратная, продуманная цветовая схема транслирует надежность и экспертность так же, как грамотный текст и внятная структура страницы. А хаотичная палитра с кричащими, не сочетающимися оттенками работает в обратную сторону, даже если контент на сайте написан профессионально.
Лендинг и интернет-магазин: разные задачи, разные акценты
Здесь важно разделить цели.
Лендинг создается для одного действия. Одна кнопка. Один призыв. Одна цель: регистрация, покупка или заявка. В этой модели цвет работает как финальный катализатор. Пользователь уже прогрет, он прочитал заголовок и преимущества. Осталось его только подтолкнуть к действию.
На лендингах цвет должен:
В интернет-магазине пользователь проходит цепочку из нескольких шагов: выбирает товар, сравнивает варианты, добавляет в корзину, оформляет покупку и оплачивает заказ. И на каждом этапе у цвета своя задача:
В интернет-магазине цвет выполняет еще и функцию навигации. Он группирует элементы, разделяет смысловые блоки и снижает когнитивную нагрузку. Пользователь не должен думать, куда нажать, чтобы куда-то перейти. Он должен это видеть.
Роль цвета в UX/UI:
Когда логика сохраняется на всех страницах, человек быстрее ориентируется в интерфейсе и совершает меньше ошибок. Последовательная цветовая система повышает удобство использования, а в конечном итоге и конверсию.
Лендинг создается для одного действия. Одна кнопка. Один призыв. Одна цель: регистрация, покупка или заявка. В этой модели цвет работает как финальный катализатор. Пользователь уже прогрет, он прочитал заголовок и преимущества. Осталось его только подтолкнуть к действию.
На лендингах цвет должен:
- контрастировать с фоном, чтобы кнопку невозможно было не заметить;
- соответствовать эмоциональному состоянию пользователя на этом этапе;
- поддерживать единую цветовую логику страницы, чтобы не возникало ощущения, что кнопка приклеена из другого проекта.
В интернет-магазине пользователь проходит цепочку из нескольких шагов: выбирает товар, сравнивает варианты, добавляет в корзину, оформляет покупку и оплачивает заказ. И на каждом этапе у цвета своя задача:
- Кнопка «добавить в корзину» должна быть заметной, но не агрессивной. Часто используют зеленый или синий.
- Кнопка «перейти к оформлению» может быть более яркой и контрастной, часто оранжевая или красная.
- Статусы и подсказки — зеленый для «в наличии», красный для «заканчивается», желтый для акций.
В интернет-магазине цвет выполняет еще и функцию навигации. Он группирует элементы, разделяет смысловые блоки и снижает когнитивную нагрузку. Пользователь не должен думать, куда нажать, чтобы куда-то перейти. Он должен это видеть.
Роль цвета в UX/UI:
- Группировать связанные элементы, например, все кнопки, ссылки, переключатели сделать в единой цветовой гамме.
- Создавать иерархию: главное действие — самый яркий и контрастный цвет, второстепенное — спокойный, третьестепенное — нейтральный.
- Снижать когнитивную нагрузку. Когда цвета системны и предсказуемы, пользователь не тратит время на расшифровку интерфейса, он уже знает, что синее кликабельно, серое недоступно, зеленое успешно.
Когда логика сохраняется на всех страницах, человек быстрее ориентируется в интерфейсе и совершает меньше ошибок. Последовательная цветовая система повышает удобство использования, а в конечном итоге и конверсию.
Цвет CTA-кнопок: как выбрать и протестировать
Понимаю, что вы хотели бы получить конкретную информацию, типа: «зеленая кнопка продает лучше всех». Или красная. Или оранжевая. Но не существует универсального «самого конверсионного цвета». И точка. Почему? Потому что кнопка не висит в вакууме. Она расположена внутри конкретного дизайна, рядом с конкретным фоном, предназначена для конкретной аудитории и конкретного продукта. И то, что сработало в одном проекте, в другом покажет противоположный результат.
Вот характерный пример: в одном кейсе зеленая кнопка вместо красной дала прирост конверсии на 21%. Казалось бы, вывод готов: красьте все в зеленый. Но в другом кейсе, с другой аудиторией и другим визуальным стилем, та же зеленая кнопка проиграла оранжевой. Разница в несколько процентов, но на больших объемах трафика это уже ощутимые деньги.
Думаете, причина в магии цвета? Вовсе нет. Результат всегда зависит от связки: аудитория, дизайн страницы, конкретный продукт и то, как кнопка выглядит на фоне всего остального.
Вот характерный пример: в одном кейсе зеленая кнопка вместо красной дала прирост конверсии на 21%. Казалось бы, вывод готов: красьте все в зеленый. Но в другом кейсе, с другой аудиторией и другим визуальным стилем, та же зеленая кнопка проиграла оранжевой. Разница в несколько процентов, но на больших объемах трафика это уже ощутимые деньги.
Думаете, причина в магии цвета? Вовсе нет. Результат всегда зависит от связки: аудитория, дизайн страницы, конкретный продукт и то, как кнопка выглядит на фоне всего остального.
Главный принцип — контраст
Это единственное универсальное правило, которое работает всегда: кнопка должна выделяться на фоне. Не просто отличаться по цвету, а быть еще и контрастной по яркости.
Здесь есть технический стандарт WCAG 2.2, который я рекомендую учитывать. Он определяет минимальный коэффициент контраста 4.5:1 для текста и 3:1 для крупных элементов, включая кнопки. Когда контраст достаточный, кнопка видна даже при плохом освещении, на старых мониторах, заметна людям с нарушением зрения. А если контраста недостаточно, пользователь тратит лишние доли секунды на поиск. И за эти доли секунды он может решить уйти к конкурентам.
Здесь есть технический стандарт WCAG 2.2, который я рекомендую учитывать. Он определяет минимальный коэффициент контраста 4.5:1 для текста и 3:1 для крупных элементов, включая кнопки. Когда контраст достаточный, кнопка видна даже при плохом освещении, на старых мониторах, заметна людям с нарушением зрения. А если контраста недостаточно, пользователь тратит лишние доли секунды на поиск. И за эти доли секунды он может решить уйти к конкурентам.
Как найти свой вариант
Единственный надежный способ выбрать цвет для вашей CTA-кнопки — провести A/B-тестирование.
Как это сделать по шагам:
Подробно прочитать про A/B-тестирование в маркетинге можно в отдельной статье.
Как это сделать по шагам:
- Формулируете гипотезу, например, оранжевая кнопка увеличит конверсию в заявку на 15% по сравнению с текущей синей.
- Выбираете метрики. Обычно оценивают CTR кнопки, конверсию в заявку или покупку, а для интернет-магазинов еще и средний чек.
- Меняете за раз один параметр, чтобы понять, что именно повлияло на результат.
- Определяете длительность тестирования, минимум 100–200 конверсий на каждый вариант, либо 1–2 полных бизнес-цикла (неделя для B2C, 2–4 недели для B2B с длинным циклом сделки).
- Анализируете результат, сравниваете итоговую конверсию и сегменты. Кнопка может показать разный результат на мобильных и десктопах, для нового и возвратного трафика.
Подробно прочитать про A/B-тестирование в маркетинге можно в отдельной статье.
Цвет в email-маркетинге
Многие думают, что в электронной переписке цвет не важен. Но это не так. Письмо в ящике конкурирует за внимание точно так же, как баннер в ленте или блок на сайте. И в email-рассылках работает по тем же законам, что и на лендинге. Но у вас здесь гораздо меньше инструментов и гораздо больше технических ограничений.
Как цвет влияет на открываемость и кликабельность
Даже подписавшись на рассылку, многие пользователи игнорируют письма, если они их не заинтересовали. Выделиться в списке входящих поможет иконка отправителя, прехедер, тема письма. Как только письмо будет открыто, в игру вступит и цвет.
Исследования email-маркетологов показывают, что цветные CTA-кнопки в письмах увеличивают кликабельность в среднем на 15–30% по сравнению с текстовыми ссылками. И это логично, поскольку кнопка визуально выделяется, ее сложно пропустить при беглом сканировании и не нужно вчитываться в текст.
Исследования email-маркетологов показывают, что цветные CTA-кнопки в письмах увеличивают кликабельность в среднем на 15–30% по сравнению с текстовыми ссылками. И это логично, поскольку кнопка визуально выделяется, ее сложно пропустить при беглом сканировании и не нужно вчитываться в текст.
Какой цвет лучше для CTA-кнопок в письмах
Email-маркетинг отличается от сайта. В почтовых клиентах изображения часто отключаются по умолчанию. И если сделаете CTA-кнопку в виде картинки, пользователь увидит серый квадрат и надпись «изображение заблокировано». Это катастрофа для конверсии.
Делайте кнопку на HTML и CSS, а не картинкой. Фоновый цвет, border-radius, padding работают без загрузки изображений. На всякий случай дублируйте текст кнопки ссылкой рядом. Если кнопка по какой-то причине не отобразится, текстовая ссылка «Перейти к заказу» спасет ситуацию. Кнопка не должна быть слишком узкой или длинной. На мобильном экране она должна занимать комфортную ширину, чтобы по ней можно было попасть пальцем. Ориентир: минимум 44 пикселя по высоте.
А вот с цветом работает тот же принцип, что и на сайтах: контраст к фону письма и к общей палитре. Если письмо выдержано в спокойных тонах, сработается яркая кнопка, например, оранжевая, красная, насыщенная синяя. Если письмо само по себе яркое, кнопка должна быть еще контрастнее. Универсального «лучшего цвета для email» нет. Есть контраст или его отсутствие.
Делайте кнопку на HTML и CSS, а не картинкой. Фоновый цвет, border-radius, padding работают без загрузки изображений. На всякий случай дублируйте текст кнопки ссылкой рядом. Если кнопка по какой-то причине не отобразится, текстовая ссылка «Перейти к заказу» спасет ситуацию. Кнопка не должна быть слишком узкой или длинной. На мобильном экране она должна занимать комфортную ширину, чтобы по ней можно было попасть пальцем. Ориентир: минимум 44 пикселя по высоте.
А вот с цветом работает тот же принцип, что и на сайтах: контраст к фону письма и к общей палитре. Если письмо выдержано в спокойных тонах, сработается яркая кнопка, например, оранжевая, красная, насыщенная синяя. Если письмо само по себе яркое, кнопка должна быть еще контрастнее. Универсального «лучшего цвета для email» нет. Есть контраст или его отсутствие.
Визуальная иерархия в длинных письмах
Если письмо состоит из трех-четырех предложений с призывом к действию, проблем с приоритетом не возникнет. Но рассылки, дайджесты, продуктовые письма часто бывают длинными. И тут без цветовой структуры пользователь может потеряться.
Какие помогут приемы:
Обратите внимание, что все больше пользователей используют темные темы в почтовых клиентах. Тут ваши цвета могут выглядеть иначе. Яркий оранжевый на темном фоне будет кричащим, а приглушенный синий можно и не увидеть. Тестируйте письма в обоих режимах или используйте универсальные цвета с хорошим контрастом на любом фоне.
Какие помогут приемы:
- Цветные разделители между блоками, например, тонкая линия или полоса в 2–3 пикселя акцентного цвета. Глаз увидит границу, мозг зафиксирует переход к новой теме.
- Цветной фон для ключевых блоков: важное предложение, акция, цитата. Блок сразу воспринимается как отдельная единица.
- Маленькие цветные плашки в едином стиле для статусов и меток: «Новинка», «Скидка», «Хит». Пользователь сканирует письмо и за секунду понимает, что где находится.
- Ограничение палитры в два цвета максимум на одно письмо. Один для фона и нейтральных элементов, второй для акцентов и CTA. Все остальное оттенки этих двух.
Обратите внимание, что все больше пользователей используют темные темы в почтовых клиентах. Тут ваши цвета могут выглядеть иначе. Яркий оранжевый на темном фоне будет кричащим, а приглушенный синий можно и не увидеть. Тестируйте письма в обоих режимах или используйте универсальные цвета с хорошим контрастом на любом фоне.
Цвет в мобильных приложениях
На маленьком экране меньше пространства, меньше времени на разглядывание, условия просмотра часто далеки от идеальных, солнце на улице, тусклый свет вечером. Поэтому цена ошибки в цвете более высокая.
Мобильное приложение не следует рассматривать как уменьшенную версию сайта. Это самостоятельный продукт со своими требованиями к цвету. Начинайте с контраста. Затем адаптируйте палитру под темную и светлую тему. И всегда тестируйте на реальных устройствах при разном освещении. Только так цвет станет настоящим помощником в навигации, а не источником раздражения для пользователя.
Рекомендации для мобильных приложений:
Мобильное приложение не следует рассматривать как уменьшенную версию сайта. Это самостоятельный продукт со своими требованиями к цвету. Начинайте с контраста. Затем адаптируйте палитру под темную и светлую тему. И всегда тестируйте на реальных устройствах при разном освещении. Только так цвет станет настоящим помощником в навигации, а не источником раздражения для пользователя.
Рекомендации для мобильных приложений:
Цвет в баннерной рекламе
Баннер — это не сайт и не письмо. Его можно сравнить с криком в шумной толпе. Вокруг десятки других криков: новостная лента, комментарии, прогноз погоды, реклама. И у вас есть полторы секунды, чтобы человек остановил взгляд. Если за это время вы не зацепили, он пролистал дальше. Второго шанса не будет.
Чтобы баннер выделялся, его цветовая схема должна спорить с окружением, а не сливаться с ним. Кажется, что все просто: темный баннер на светлом фоне и светлый на темном. Но в баннерной рекламе мы не знаем заранее, где именно покажется объявление. Это могут быть разные площадки, разные фоны, разное освещение. Поэтому я рекомендую использовать яркие, насыщенные цвета, которые гарантированно выделяются на любом фоне, например, оранжевый, ярко-синий, зеленый. Красный с осторожностью и дозировано.
Какие ошибки убивают эффективность баннеров:
Запомните, если ваш баннер не выделяется на площадке, вы платите за показы, которые никто не видит. Самый крутой креатив не работает, если его не замечают те, для кого он предназначен.
Чтобы баннер выделялся, его цветовая схема должна спорить с окружением, а не сливаться с ним. Кажется, что все просто: темный баннер на светлом фоне и светлый на темном. Но в баннерной рекламе мы не знаем заранее, где именно покажется объявление. Это могут быть разные площадки, разные фоны, разное освещение. Поэтому я рекомендую использовать яркие, насыщенные цвета, которые гарантированно выделяются на любом фоне, например, оранжевый, ярко-синий, зеленый. Красный с осторожностью и дозировано.
Какие ошибки убивают эффективность баннеров:
- мелкий текст на сложном фоне;
- логотип сверху, а не в правом нижнем углу;
- больше одного призыва в одном объявлении;
- статика вместо анимации, где она доступна;
- отсутствие единого стиля с посадочной страницей.
Запомните, если ваш баннер не выделяется на площадке, вы платите за показы, которые никто не видит. Самый крутой креатив не работает, если его не замечают те, для кого он предназначен.
Как проверить эффективность цвета на практике
Теорию мы разобрали. Теперь осталось собрать эти знания в систему, которую можно применить на практике.
Базовый принцип распределения цвета пришел из интерьерного дизайна. Но в веб-дизайне он работает ничуть не хуже. Все дело в пропорциях 60–30-10:
Базовый принцип распределения цвета пришел из интерьерного дизайна. Но в веб-дизайне он работает ничуть не хуже. Все дело в пропорциях 60–30-10:
Допустим, у вас интернет-магазин товаров для дома.
Что происходит? Пользователь заходит, видит чистый фон, легко ориентируется на сайте, сканирует товары, его глаз цепляется за оранжевые кнопки. Он понимает, куда нажать, и делает это быстрее.
Теперь представьте, что вы сделали оранжевый фон. Глаз устает, контент теряется, кнопку сложно заметить, возникает визуальный хаос, конверсия падает.
Проверить, соблюдается ли пропорция, можно быстро даже без специальных инструментов. Сделайте скриншот страницы и мысленно и оцените сразу на первый взгляд, какой цвет доминирует. Если акцентный цвет визуально спорит с основным фоном за внимание, пропорция нарушена, и ее следует пересобрать заново.
- Основной цвет (60%) — белый. Чистый фон, товары на нем читаются идеально.
- Дополнительный (30%) — серо-голубой. Карточки товаров, боковое меню, фильтры.
- Акцентный (10%) — оранжевый. Кнопка «в корзину», бейджи «хит» и «скидка».
Что происходит? Пользователь заходит, видит чистый фон, легко ориентируется на сайте, сканирует товары, его глаз цепляется за оранжевые кнопки. Он понимает, куда нажать, и делает это быстрее.
Теперь представьте, что вы сделали оранжевый фон. Глаз устает, контент теряется, кнопку сложно заметить, возникает визуальный хаос, конверсия падает.
Проверить, соблюдается ли пропорция, можно быстро даже без специальных инструментов. Сделайте скриншот страницы и мысленно и оцените сразу на первый взгляд, какой цвет доминирует. Если акцентный цвет визуально спорит с основным фоном за внимание, пропорция нарушена, и ее следует пересобрать заново.
Контраст и доступность
Еще один момент, на котором я хочу остановиться отдельно. Мы говорили о важности контраста для СТА-кнопок. Но это не менее актуально и для самого сайта. Выбирая цвет шрифта на сайте, не забывайте, что текст должен легко читаться.
Базовое правило: коэффициент контраста между текстом и фоном должен быть не ниже 4.5:1 для обычного текста и не ниже 3:1 для крупного, от 18 пунктов и выше. Это требование напрямую влияет на то, смогут ли люди со слабым зрением или дальтонизмом пользоваться сайтом.
Контраст удобно проверять специальными инструментами (Contrast Checker и пр.). Они дают точную цифру и сразу показывают, проходит пара цветов норму WCAG или нет. Это занимает пару минут, но избавляет от ситуации, когда красиво выглядящий на макете сайт оказывается неудобным или недоступным для реальных пользователей.
Базовое правило: коэффициент контраста между текстом и фоном должен быть не ниже 4.5:1 для обычного текста и не ниже 3:1 для крупного, от 18 пунктов и выше. Это требование напрямую влияет на то, смогут ли люди со слабым зрением или дальтонизмом пользоваться сайтом.
Контраст удобно проверять специальными инструментами (Contrast Checker и пр.). Они дают точную цифру и сразу показывают, проходит пара цветов норму WCAG или нет. Это занимает пару минут, но избавляет от ситуации, когда красиво выглядящий на макете сайт оказывается неудобным или недоступным для реальных пользователей.
Ошибки при выборе цвета для сайта
Насколько подробно мы бы ни разбирали вопрос, какой цвет выбрать для сайта, ошибки все равно неизбежны. Иначе не было бы в интернете столько сайтов, которые хочется закрыть в первые же секунды и забыть, как страшный сон.
Самые типичные ошибки при выборе палитры цветов для сайта:
Самые типичные ошибки при выборе палитры цветов для сайта:
Статья о культурных различиях восприятия цветов.
Цвета в digital-маркетинге нужны вовсе не для украшения. Они управляют поведением пользователя и работают на вас или против вас. Третьего не дано.
При выборе цвета дизайна сайта или мобильного приложения ориентируйтесь не на личные вкусы и даже не на визуальное удовлетворение. То, что вам кажется красиво и рационально, аудитории может «не зайти».
Обязательно проверяйте гипотезы, тестируйте контраст, уважайте физиологию человеческого глаза. Не бойтесь изменить цвет сайта, если падает конверсия. Собранная в систему палитра должна работать на конверсию так же исправно, как хороший заголовок, понятная структура оффера, грамотный текст, сильный продукт.
Всегда помните, что ваш сайт начинает общение с пользователем даже до того, как он прочитал первое слово. Позаботьтесь о том, чтобы этот разговор оказался эффективным.
Цвета в digital-маркетинге нужны вовсе не для украшения. Они управляют поведением пользователя и работают на вас или против вас. Третьего не дано.
При выборе цвета дизайна сайта или мобильного приложения ориентируйтесь не на личные вкусы и даже не на визуальное удовлетворение. То, что вам кажется красиво и рационально, аудитории может «не зайти».
Обязательно проверяйте гипотезы, тестируйте контраст, уважайте физиологию человеческого глаза. Не бойтесь изменить цвет сайта, если падает конверсия. Собранная в систему палитра должна работать на конверсию так же исправно, как хороший заголовок, понятная структура оффера, грамотный текст, сильный продукт.
Всегда помните, что ваш сайт начинает общение с пользователем даже до того, как он прочитал первое слово. Позаботьтесь о том, чтобы этот разговор оказался эффективным.
Ответы на вопросы
Какой цвет лучше всего подходит для веб-сайта?
Универсального цвета нет. Выбор зависит от ниши, аудитории и задачи сайта, а главным критерием остается контраст и удобство восприятия.
Универсального цвета нет. Выбор зависит от ниши, аудитории и задачи сайта, а главным критерием остается контраст и удобство восприятия.
Что такое правило 60–30–10 в веб-дизайне?
Это схема распределения цветов: 60% занимает основной цвет (обычно фон), 30% — дополнительный, а 10% — акцентный для кнопок и важных элементов.
Это схема распределения цветов: 60% занимает основной цвет (обычно фон), 30% — дополнительный, а 10% — акцентный для кнопок и важных элементов.
Какой цвет лучше использовать в рекламе?
Для быстрого привлечения внимания часто используют красный и оранжевый, а для формирования доверия — синий. Цвет должен соответствовать цели рекламного сообщения.
Для быстрого привлечения внимания часто используют красный и оранжевый, а для формирования доверия — синий. Цвет должен соответствовать цели рекламного сообщения.
Какие цвета лучше всего подходят для корпоративного сайта?
Наиболее распространены синий, серый, белый и приглушенные нейтральные оттенки. Они создают ощущение надежности и профессионализма.
Наиболее распространены синий, серый, белый и приглушенные нейтральные оттенки. Они создают ощущение надежности и профессионализма.
Как влияют разные цвета на восприятие бренда?
Теплые цвета делают бренд более энергичным и эмоциональным, холодные — спокойным и надежным, нейтральные помогают подчеркнуть экспертность и премиальность.
Теплые цвета делают бренд более энергичным и эмоциональным, холодные — спокойным и надежным, нейтральные помогают подчеркнуть экспертность и премиальность.
Какие факторы влияют на выбор цвета для кнопок и элементов?
Контрастность с фоном, хорошая читаемость текста, единая цветовая система интерфейса, особенности целевой аудитории.
Контрастность с фоном, хорошая читаемость текста, единая цветовая система интерфейса, особенности целевой аудитории.