На решение остаться на сайте у человека уходит около 3 секунд, и в эти секунды он не читает - он смотрит. Цвет и контраст в этот момент отвечают на 2 вопроса сразу: серьёзная ли это компания и понятно ли, куда нажимать. Ошибка в палитре обходится дороже ошибки в тексте, потому что до текста дело просто не доходит.
Ниже - шесть правил, которые мы применяем в каждом проекте, с таблицей соответствия фона и текста и способом проверить всё за 10 минут без специальных инструментов. Логика у нас одна: сайт, из которого не видно маршрута к обращению, мы переделываем, а не сдаём, и читаемость - первая часть этого маршрута.
I. Почему цвет решает больше, чем кажется
Цвет на сайте услуг выполняет три работы. Он показывает уровень: спокойная сдержанная палитра читается как компания с процессом, пёстрая - как частный мастер с объявления. Он ведёт взгляд: один яркий элемент на экране забирает внимание, пять ярких элементов не забирают ничего. И он отделяет главное от второстепенного - без этого человек читает сноску и пропускает цену.
Важное уточнение: на телефоне у большинства сайтов услуг больше половины визитов, а телефон часто с пониженной яркостью и не с идеальным экраном. Палитра, собранная на хорошем мониторе, регулярно рассыпается именно там - и владелец об этом не знает, потому что смотрит свой сайт с компьютера.
II. Правило трёх цветов
Рабочая палитра сайта услуг - это фон, текст и один акцент. Всё остальное - оттенки этих трёх. Дополнительные цвета допустимы только как служебные: зелёный для подтверждения и красный для ошибки в форме, и больше нигде.
- Фон. Один основной и один вторичный - чуть темнее или светлее, чтобы отделять блоки друг от друга без рамок и теней.
- Текст. Основной тон и приглушённый для подписей. Приглушать основной текст нельзя - только второстепенные подписи.
- Акцент. Ровно один цвет на кнопки и ключевые выделения. Если акцентов два, ни один не работает.
- Служебные. Успех и ошибка в формах. Эти цвета не участвуют в оформлении блоков.
- Нейтрали. 2-3 оттенка серого для границ, разделителей и неактивных состояний.
Самая частая ошибка - брать акцентным цветом то, что нравится владельцу, а не то, что заметно на его фоне. Проверка простая: уменьшите страницу до размера почтовой марки. Если акцентная кнопка всё ещё видна как пятно - цвет выбран верно.
III. Контраст текста и фона
| Элемент | Как должно быть | Частая ошибка |
|---|---|---|
| Основной текст | Максимальный контраст к фону | Серый текст на белом «для воздуха» |
| Подписи и сноски | Приглушённый, но читаемый | Слишком светлый - исчезает на солнце |
| Цена | Контраст как у заголовка | Цена подписью мелким серым |
| Текст на фото | Затемняющая подложка под текстом | Текст прямо на светлой фотографии |
| Поля формы | Явная граница и контрастный ввод | Поле без рамки, слитое с фоном |
| Неактивная кнопка | Видно, что она есть, но выключена | Полностью невидимая кнопка |
Отдельно про цену и телефон: это два элемента, которые нельзя приглушать никогда. Человек ищет их глазами быстрее всего, и если они сделаны «аккуратным серым», он тратит лишние секунды и часть людей эти секунды не тратит.
Текст поверх фотографии без подложки - причина примерно половины нечитаемых первых экранов, которые мы видим. Фотография меняется по яркости в разных местах, и заголовок, отлично читавшийся на макете, на телефоне попадает на светлое небо. Решение - полупрозрачная тёмная подложка под всем текстовым блоком, а не только под строкой.
IV. Акцентный цвет и кнопки
- Одна главная кнопка на экран. Всё остальное - вторичные кнопки контуром или ссылки.
- Заливка, а не обводка. Кнопка-контур на телефоне читается как декоративная рамка и нажимается заметно реже.
- Размер под палец. Высота кнопки от 44-48 точек, иначе по ней промахиваются.
- Текст по делу. «Рассчитать стоимость» работает лучше, чем «Отправить», потому что говорит, что будет дальше.
- Видимое состояние нажатия. Без отклика человек жмёт второй раз и отправляет заявку дважды.
Акцентный цвет должен встречаться на странице редко. Если им покрашены заголовки, иконки, рамки и кнопки одновременно, глаз перестаёт выделять кнопку из общего фона. Нормальная плотность - один-два акцентных элемента на экран.
Прототип главной страницы мы делаем бесплатно. До договора и без предоплаты вы видите, как будет выглядеть ваш сайт: первый экран, блоки, их порядок и логика заявки - включая палитру, контраст и то, где стоит главная кнопка. Нравится - работаем дальше, не нравится - расходимся, вы ничего не должны. Бесплатен именно прототип главной, а не весь дизайн, вёрстка и бесконечные правки.
V. Градиенты и подложки
Градиент - инструмент фона, а не украшение. Он уместен, когда нужно мягко отделить один блок от другого или подложить под текст поверх изображения. Правило у нас жёсткое: строго два цвета, близких по тону, и никогда сочетание фиолетового с розовым - оно мгновенно считывается как шаблон и снижает доверие к нише со средним и высоким чеком.
- Два цвета в градиенте, не больше. Три цвета выглядят как ошибка рендеринга.
- Градиент под текстом - только затемняющий, без цветных переливов.
- Кнопку градиентом не красят: заливка одним цветом заметнее и нажимается чаще.
- На больших площадях градиент даёт полосы на дешёвых экранах - лучше плоский фон.
- Тени - мягкие и редкие. Тень на каждом элементе превращает страницу в кучу карточек.
Так же мы работали с цветом в проекте редизайн сайта SkyFarm - это агротех, системы выращивания с искусственным интеллектом: контейнерные фермы, блок управления, приложение, семена и питание. На первом экране там контейнерная ферма и посыл «когда агрономия становится точной наукой», дальше крупные фото продукта и экран приложения, а интерфейс держится на плоских фонах и одной сквозной кнопке «Собрать свою ферму» - никаких цветных переливов, весь контраст отдан снимкам и цифрам. Ещё один ориентир по сдержанной палитре - ayvazzovsky.com, сайт салона сложного окрашивания в Москве: два адреса, онлайн-запись, видео работ мастеров, портфолио и команда. Там основную работу делают фотографии, а цвет интерфейса отступает и не спорит с ними. Такой же принцип - в ayvazzovsky.academy, онлайн-академии видеоуроков колористики с каталогом курсов, посадочными страницами уроков, личным кабинетом и промокодами.
VI. Проверка на реальных устройствах
- Откройте сайт на телефоне при яркости 30-40 процентов и прочитайте один абзац целиком.
- Выйдите с телефоном на улицу днём и попробуйте найти кнопку заявки за 3 секунды.
- Дайте страницу человеку старше 50 лет и попросите вслух назвать цену.
- Уменьшите страницу до 25 процентов масштаба: акцент должен остаться единственным заметным пятном.
- Проверьте форму: видны ли границы полей, виден ли введённый текст, заметно ли сообщение об отправке.
- Распечатайте страницу с прайсом - если получается чёрный лист, прайсу нужна светлая зона.
Эти шесть проверок занимают около 15 минут и находят больше проблем, чем спор о оттенках в макете. Если после них остаются сомнения, разумнее сначала починить читаемость и только потом вкладываться в трафик: платить за рекламу или за лиды с оплатой за результат и вести людей на нечитаемую страницу - самый дорогой способ проверить палитру.
По нашим условиям цвет и контраст не отдельная услуга, а часть проекта: сайт на React от 80 000 ₽, 1-2 недели от момента, когда собраны материалы, перенос с конструктора от 80 000 ₽. Контент считается отдельно: SEO-статья от 500 ₽, 200 статей в месяц - 100 000 ₽, прокачка блога от 75 000 ₽ в месяц. Позиции, трафик и количество обращений мы не гарантируем: по статьям первые показы видны после индексации, эффект накапливается с каждой партией. Подробнее - на странице разработка сайтов и SEO.
VII. Короткий итог
Шесть правил укладываются в одну фразу: три цвета, максимальный контраст основного текста, один акцент на экран, градиент из двух близких тонов, подложка под текстом на фото и проверка на настоящем телефоне. Цену и телефон не приглушать никогда, кнопку делать заливкой и от 44 точек высотой, служебные цвета оставить формам. Проверьте свой сайт по списку из шести пунктов - это 15 минут, и обычно они находят как минимум одну причину, по которой вы недосчитываетесь обращений. Что считать обращением, о котором стоит жалеть, лучше определить заранее - помогает понятие валидной заявки.
Наши работы
Сайты, которые студия уже запустила
Четыре проекта N3MIROFF, которые можно открыть прямо сейчас и посмотреть, как они работают.
Агротех с ИИ
SkyFarm ↗
Редизайн сайта систем выращивания: первый экран с контейнерной фермой, схема работы из трёх шагов, карусель продуктов и экран приложения.
Сайт салона
ayvazzovsky.com ↗
Салон сложного окрашивания в Москве: онлайн-запись, видео работ, портфолио и команда. Переехал с Тильды на свой хостинг.
Онлайн-академия
ayvazzovsky.academy ↗
Видеоуроки колористики: каталог, посадочные страницы уроков, личный кабинет и промокоды.
Event-агентство
navsegda-event.ru ↗
НАВСЕГДА: корпоративы и конференции - услуги, кейсы, этапы работы и расчёт мероприятия.
Витрина магазина
Monkey Market ↗
Премиальная витрина магазина кроссовок с заказом в Telegram.
Проверим читаемость вашего сайта до договора
Соберём бесплатный прототип главной страницы с рабочей палитрой и покажем, как он читается на телефоне.
Частые вопросы
Сколько цветов должно быть на сайте услуг?
Три рабочих: фон, текст и один акцент, плюс 2-3 нейтральных серых и служебные цвета для успеха и ошибки в форме. Если акцентов два, ни один не притягивает взгляд.
Почему серый текст на белом фоне - плохо?
Он выглядит аккуратно на хорошем мониторе и теряется на телефоне при яркости 30-40 процентов и на улице. Приглушать можно подписи и сноски, но не основной текст, цену и номер телефона.
Можно ли использовать градиенты?
Да, но строго из двух близких по тону цветов и только как фон или затемняющую подложку под текстом. Сочетание фиолетового с розовым лучше не брать - оно читается как шаблон и вредит восприятию цены.
Какой должна быть кнопка заявки?
Заливкой акцентным цветом, высотой от 44-48 точек, с текстом о результате вроде «Рассчитать стоимость» и видимым откликом на нажатие. Кнопка-контур на телефоне нажимается заметно реже.
Можно посмотреть палитру до заказа сайта?
Да, для этого мы бесплатно собираем прототип главной страницы: до договора и без предоплаты видно первый экран, блоки, цвета, контраст и маршрут к заявке. Не понравилось - расходимся, вы ничего не должны.
Обсудим цвет, контраст и маршрут к заявке
Оставьте заявку - посмотрим ваш сайт на телефоне и скажем прямо, что мешает людям дойти до обращения.
Получить целевые заявки → Telegram