Контраст текста и фона в карточке товара: почему красивое не всегда читаемое
Опубликовано: 06.07.2026
Светло-серый шрифт на белом фоне выглядит элегантно. До тех пор, пока не приходится читать его с экрана телефона под ярким солнцем. В карточке товара такая комбинация превращает характеристики в угадайку — покупатель щурится, увеличивает масштаб, раздражается и уходит к конкуренту, у которого текст просто чёрный по белому.
Проблема контраста в карточках товаров — не вопрос эстетики. Это вопрос конверсии. Если человек не может за три секунды найти цену, вес или состав, он не будет вникать. Он закроет вкладку.
Где именно ломается контраст
Типичные слабые места карточки товара хорошо знакомы любому, кто хоть раз заполнял шаблон на маркетплейсе.
- Блок характеристик. Здесь обычно много мелкого текста. Стремление вписать всё в ограниченное пространство приводит к уменьшению кегля и выбору бледного цвета, чтобы визуально «не перегружать».
- Описание в абзацах. Сплошной текст на сероватом фоне — классика. Выглядит мягко и «дизайнерски», но читается с трудом.
- Бейджи и плашки. Белый текст на ярком, но недостаточно тёмном фоне. «Новинка» или «Хит продаж» иногда приходится вчитываться, чтобы различить буквы.
- Цена и старая цена. Перечёркнутая сумма часто делается слишком светлой, и вместо чёткого сигнала о скидке получается пятно.
Во всех этих случаях дизайнер или продавец руководствуется визуальным ощущением, а не физической читаемостью. Глазу кажется достаточно — но глаз сидит в тёмном кабинете перед калиброванным монитором. А покупатель — в автобусе, с включённой автояркостью. Для мобильной проверки пригодится материал «шрифт для карточки товара».
Как измерить контраст без приборов
Существует стандарт доступности WCAG, который оперирует числовым соотношением контраста. Для обычного текста норма — 4.5:1, для крупного (от 18 пунктов и больше) — 3:1. Эти цифры можно проверить в бесплатных онлайн-калькуляторах: загружаешь скриншот карточки или вводишь коды цветов — и получаешь результат.
На практике достаточно запомнить несколько ориентиров:
- Чистый чёрный (#000000) на чистом белом (#FFFFFF) даёт максимальный контраст 21:1. Это эталон, но на экране мобильного устройства сплошной чёрный может казаться грубым.
- Тёмно-серый (#333333) на белом — контраст около 12.6:1. Читается отлично, выглядит мягче.
- Средне-серый (#767676) на белом — около 4.5:1. Это граница. Для мелкого текста уже рискованно.
- Светло-серый (#AAAAAA) на белом — около 2.8:1. Для основного текста неприемлемо, для декоративных элементов — можно.
Если нет возможности проверять каждый элемент, простое правило: основной текст в карточке товара должен быть заметно темнее, чем кажется достаточным. Лучше перестараться в сторону тёмного, чем недобрать.
Цветной фон: ловушка брендирования
Когда у бренда есть фирменный цвет, возникает соблазн использовать его как фон для части карточки. Тёмно-синий, бордовый, изумрудный — всё это может работать, но только при грамотном подборе цвета текста.
Частая ошибка — ставить белый текст на средний по яркости фирменный фон. Белый на тёмно-синем читается нормально. Белый на стандартном синем (#3366CC) — уже с напряжением. Проблема в том, что «фирменный синий» редко разрабатывался с учётом читаемости по нему текста. Его выбирали для логотипа, кнопок, плашек — а не как подложку под абзацы.
Решение простое: если фон цветной и не очень тёмный, текст на нём лучше сделать не белым, а тёмным. Тёмно-серый текст на светло-голубом фоне читается лучше, чем белый текст на том же светло-голубом. Контраст работает в обе стороны.
Шрифт как фактор контраста
Цвет — не единственная переменная. Начертание шрифта напрямую влияет на то, при каком уровне цветового контраста текст остаётся читаемым.
Тонкие и лёгкие начертания требуют бо́льшего цветового контраста, чем жирные. Утончённые штрихи просто теряются при слабом различии с фоном. Если в карточке используется лёгкое начертание, цвет текста должен быть максимально тёмным — иначе буквы распадаются на отдельные элементы.
С другой стороны, жирные и сверхжирные начертания прощают более слабый контраст. Но это не повод экспериментировать: жирный светло-серый текст на белом фоне читается лучше, чем тонкий светло-серый, но всё равно хуже, чем просто тёмный.
Для карточки товара оптимальный выбор — обычное или полужирное начертание без экстремумов. Шрифты без засечек с прямыми формами работают надёжнее, чем антиквенные с засечками — на маленьких размерах засечки создают визуальный шум, который усугубляет проблемы контраста.
Практические комбинации, которые работают
| Элемент карточки | Фон | Текст | Почему это работает |
|---|---|---|---|
| Название товара | Белый | #1A1A1A, полужирный | Высокий контраст, крупный кегль — считывается мгновенно |
| Характеристики | Белый или светло-серый (#F5F5F5) | #333333, обычный | Достаточный контраст даже на сером фоне, не утомляет при чтении списка |
| Описание | Белый | #2D2D2D, обычный, 14–15px | Тёмнее, чем кажется нужным — именно это и обеспечивает комфортное чтение абзаца |
| Старая цена | Белый | #999999, перечёркнутый | Низкий контраст здесь уместен — цена вторична, не должна конкурировать с текущей |
| Текущая цена | Белый | #000000 или брендовый тёмный, bold, крупный | Максимальная заметность |
| Бейдж «Скидка» | Красный (#CC0000 и темнее) | Белый, bold | Контраст выше 4.5:1 при условии достаточно тёмного красного |
Мобильная проверка — финальный фильтр
Все рассуждения о контрасте бессмысленны, если не проверить карточку на реальном устройстве. Не на десктопном браузере в режиме эмулятора, а именно на телефоне. При включённой автояркости. Днём у окна.
Что смотреть: можно ли прочитать состав продукта, не увеличивая страницу? Различимы ли цифры цены? Понятен ли текст на бейдже? Если хотя бы на один вопрос ответ отрицательный — контраст недостаточен, и цвет текста нужно темнить до тех пор, пока проблема не исчезнет.
Ещё один надёжный приём — сфотографировать экран телефона с расстояния вытянутой руки и посмотреть на фото. То, что не читается на снимке, не прочитает и покупатель в спешке.
Когда слабый контраст оправдан
Не всё в карточке должно быть максимально контрастным. Второстепенные элементы — артикул, юридические пометки, технические метки — специально делают малозаметными. Они нужны для поисковиков и технических требований, но не должны отвлекать от главного: названия, цены, ключевых характеристик и кнопки покупки.
Иерархия контраста работает так же, как иерархия размеров: самое важное — самое тёмное и крупное, второстепенное — светлее и мельче. Проблемы начинаются, когда продавец путает приоритеты и делает, например, артикул более читаемым, чем состав продукта.
Контраст текста и фона в карточке товара — не творческое решение, а инженерное. Есть чёткие границы, за которыми текст перестаёт выполнять свою функцию. Лучше скучная, но идеально читаемая карточка, чем красивая, но требующая усилий для разбора. Покупатель не должен работать, чтобы прочитать — это работа продавца сделать текст различимым.