Как выбрать цвета интернет-магазина и проверить контраст
Как распределить цвета по элементам магазина, проверить контраст текста и кнопок и показать ошибки без опоры только на цвет. Учебная палитра с расчётами.
Выбирайте цвета интернет-магазина по ролям: фон, текст, ссылки, основная кнопка, границы и состояния. Затем проверяйте контраст конкретных соседних цветов и понятность интерфейса без опоры только на оттенок. Универсального «продающего цвета» для всех товаров и аудиторий нет.
Фирменный стиль помогает сохранить узнаваемость, но не отменяет читаемость. Если брендовый оттенок плохо работает под мелким белым текстом, оставьте его для иллюстраций или декоративных элементов, а для кнопки найдите подходящий вариант и проверьте его.
Цвета нужны для конкретных задач
Покупатель должен прочитать цену, отличить ссылку от обычного текста, увидеть доступное действие и понять ошибку. Гармоничная палитра без этих свойств не решает задачи магазина. В то же время удачный контраст не доказывает, что все цвета уместны для бренда и товара.
Начните с ограничений: существующий логотип, фотографии, выбранный шаблон и каналы, в которых покупатель уже знает магазин. Затем выпишите реальные элементы карточки и оформления. Количество оттенков определяется их назначением, а не обязательной формулой вроде «ровно три цвета».
Не переносите общие психологические ассоциации в обещание продаж. Синий цвет не гарантирует доверия, красный — нажатий, зелёный — покупок. Влияние конкретного изменения можно оценивать только в условиях своего магазина, проверяя также доступность и отсутствие ошибок покупки.
Пропорция 60/30/10 для основного, дополнительного и акцентного цветов — необязательный композиционный ориентир. Она не заменяет проверку контраста и не задаёт правило, по которому любому магазину нужно перекрасить ровно такую долю экрана.
Составьте палитру по ролям
Для каждой роли задайте цвет и фон, на котором он используется. Одного значения «основной зелёный» недостаточно: белая надпись на нём и сам зелёный блок на белом фоне — две разные проверки.
| Роль | Что нужно различать | Где проверить |
|---|---|---|
| Основной текст | Текст и фон страницы или карточки | Название, цена, условия доставки |
| Вторичный текст | Пояснение остаётся читаемым | Единица измерения, подсказка поля |
| Ссылка | Переход заметен среди обычного текста | Описание товара и справка |
| Основная кнопка | Надпись и доступное действие | Добавление в корзину, подтверждение |
| Граница и фокус | Элемент и его состояние видны | Поле ввода, выбранный вариант, клавиатурный фокус |
| Ошибка или предупреждение | Смысл понятен без угадывания оттенка | Недоступный размер, неверный адрес |
Отдельно задайте наведение, нажатие, выбор и фокус клавиатуры. Не считайте их оформленными только потому, что обычная кнопка выглядит хорошо. Для выключенного элемента нужно также ясно объяснить причину недоступности, если иначе покупатель не понимает следующий шаг.
Как проверить контраст
В WCAG 2.2 для обычного текста на уровне AA установлен минимальный контраст 4,5:1, для крупного — 3:1. Крупным здесь считается текст не меньше 18 пунктов либо 14 пунктов полужирным; это примерно 24 и 18,7 CSS-пикселя. Если размер или насыщенность спорны, проверяйте по более строгому порогу обычного текста.
Для значимой визуальной информации активных элементов управления и их состояний применяется отдельный критерий нетекстового контраста 3:1 относительно соседних цветов. Он не означает, что любая декоративная линия обязана иметь такой контраст. У критериев есть исключения, в том числе для неактивных компонентов; это не причина делать важное пояснение нечитаемым.
Проверяйте точную пару цветов в инструменте контраста: цвет текста и фактический фон. Отношение рассчитывается по относительной яркости sRGB, а не по впечатлению «достаточно тёмный». Не округляйте пограничное значение вверх до проходного.
Полупрозрачность, градиент и фотография меняют фон. Для текста поверх изображения нужно проверить худший участок либо дать устойчивую непрозрачную подложку. Соответствие нескольких пар не является аудитом всей доступности сайта.
Учебная палитра и исправление кнопки
Ниже — предложенная учебная палитра, а не готовый фирменный стиль. Контраст рассчитан для непрозрачных цветов по формуле относительной яркости; значения показаны с округлением для чтения, решение о прохождении принято по исходному числу.
| Пара | Цвета | Контраст | Результат для обычного текста |
|---|---|---|---|
| Основной текст на странице | #17324D / #FFFFFF | 13,13:1 | Проходит 4,5:1 |
| Основной текст на светлой поверхности | #17324D / #F2F5F7 | 11,99:1 | Проходит |
| Белая надпись на основной кнопке | #FFFFFF / #075985 | 7,56:1 | Проходит |
| Текст ошибки на белом фоне | #B42318 / #FFFFFF | 6,57:1 | Проходит |
| Синий индикатор фокуса рядом с белым | #005FCC / #FFFFFF | 5,98:1 | Выше 3:1 для проверенной пары индикатора |
Предположим, раньше кнопка была светло-зелёной #9CB9A8 с белым текстом. Контраст около 2,12:1 не достигает даже порога 3:1. Замена фона кнопки на #075985 сохраняет белую надпись и даёт 7,56:1. Это устраняет конкретную проблему контраста; измеренного роста продаж из такого расчёта не следует.
Альтернатива — оставить светлую заливку, но выбрать тёмный текст и отдельно проверить различимость самой кнопки на соседнем фоне. Нельзя решить задачу надписи, автоматически объявив проверенными границы и все состояния элемента.
На своём сайте замените hex-значения фактическими цветами из настроек или вычисленных стилей. Повторите расчёт для обычного и выбранного состояния, наведения, ошибки и фокуса. При другой подложке результаты учебной таблицы больше не применимы.
Ошибки и выбор должны быть понятны без цвета
Красная рамка поля не объясняет, что исправить. Добавьте текст: «Укажите номер телефона в принятом формате» — с форматом, который действительно принимает ваша форма. Зелёный значок наличия дополняйте словами «В наличии», а выбранный вариант — подписью и устойчивым выделением.
Для ссылок в тексте используйте узнаваемое оформление, например подчёркивание, чтобы различие не зависело только от цвета. При выборе цвета самого товара покажите название оттенка и выбранное состояние: фотография образца не заменяет подтверждение того, какой вариант добавится в корзину.
Проверяйте интерфейс без цветовых подсказок: остаётся ли понятным, где ошибка, что выбрано и какое действие доступно. Моделирование особенностей зрения может помочь, но не заменяет проверку текста, контраста и работы с клавиатуры.
Проверьте палитру на страницах магазина
Пройдите главную, категорию, карточку, корзину и форму на телефоне и компьютере. Прочитайте мелкие подписи, выберите вариант, перейдите к оплате, вызовите ошибку обязательного поля и пройдите действия клавишей Tab. У фокуса должна быть заметная индикация на том фоне, где он появляется.
Запишите дефект точно: элемент, пара цветов, состояние и результат измерения. Так правка затронет нужную роль, а не случайно перекрасит все ссылки вместе с кнопками. Порядок фиксации и проверки таких проблем есть в UX-аудите магазина.
Если меняете палитру ради покупательского результата, сначала убедитесь, что покупка работает, и зафиксируйте исходные данные. Дальнейшая проверка гипотез описана в статье о повышении конверсии. Контраст — проверяемое свойство оформления; конверсия зависит от гораздо большего числа условий.