Как выбрать цвета сайта: читаемость, акценты и проверка

Цветовая палитра должна помогать читать и различать действия. Утверждение «синий повышает доверие» не заменяет проверку конкретной страницы: один оттенок может быть заметным на светлом фоне и исчезать на фотографии. Выбирайте сочетания по роли, окружению и материалам бренда, а не по обещанному проценту роста продаж.

Для учебного сайта вымышленной студии керамики назначим светлый фон, тёмный основной текст и тёплый акцент. Дополнительно нужны состояния: ссылка, фокус, ошибка и недоступное действие. Запишите каждую пару «элемент — фон». Один и тот же акцент нельзя автоматически использовать для мелкого текста, большой кнопки и сообщения об ошибке.

Начните с фирменных материалов, если они есть. Палитра упаковки или презентации может потребовать адаптации к экрану: цвет, красивый на большой плашке, бывает слабым для тонкой подписи. Согласуйте с владельцем, какие элементы важны для узнаваемости, а какие можно изменить ради читаемости.

1. Соберите экран с заголовком, абзацем, ссылкой, кнопкой и подписью. Используйте тексты нужной длины.
2. Проверьте контраст каждой рабочей пары подходящим инструментом. Требования к тексту и границы применения объясняет руководство MDN о контрасте.
3. Для текста на фотографии проверьте несколько кадров, а не один удачный снимок. Подложка или отдельная текстовая область могут быть устойчивее смены цвета букв.
4. Сравните обычное состояние, наведение и клавиатурный фокус. При изменении кнопки подпись должна сохраняться.
5. Посмотрите страницу на телефоне в обычном масштабе. Декоративная гармония на большом мониторе не подтверждает читаемость мелкого текста.

На странице занятия тёплый акцент используем для фона кнопки, а подпись — тёмную. Рядом размещаем условия участия. Если такой же оттенок стоит у всех заголовков, иконок и границ, главное действие теряется. Уберите часть декоративных акцентов и сравните маршрут: что человек замечает после прочтения условий?

Для сообщения об ошибке добавьте текст, например «Укажите электронную почту», и свяжите его с нужным полем. Красная рамка без объяснения не сообщает способ исправления. Для статуса товара также нужны слова «В наличии» или другой подтверждённый статус: один цвет не передаёт смысл всем посетителям.

Согласуйте общие цвета проекта и индивидуальные настройки блоков. В Zero Block параметры элементов описаны в официальном руководстве. После смены общего правила проверьте страницы с особыми фонами: внутренние карточки могут продолжать использовать прежние локальные значения.

Опубликуйте тестовую страницу и пройдите её мышью, клавиатурой и пальцем. Убедитесь, что фокус заметен, ссылки отличаются от обычного текста, ошибки не скрываются за цветом, а изображение не ухудшает читаемость подписи. При увеличении текста проверьте, не появляется ли обрезка.

• Слишком много акцентов: назначьте один главный маршрут на участке страницы.
• Светлая подпись на светлом кадре: поменяйте фон текста или его расположение.
• Цвет сообщает статус без слов: добавьте название состояния.
• На другом блоке кнопка пропала: проверьте пару цветов на каждом фактическом фоне.
• Палитра выбрана по чужому сайту: проверьте её на своих фотографиях и содержании.

Сохраните значения исходной палитры перед заменой. Если новое сочетание снижает читаемость, верните рабочую пару и исправьте только проблемную роль. Дополнительно изучите индикатор фокуса и обозначение статусов. Для палитры рабочего проекта обратитесь в Perkova&Perkova с примерами материалов бренда.