Дизайнер показывает макет: воздушный светло-серый текст на белом фоне, тонкие рамки полей, изящные подписи. На его мониторе при идеальном освещении это выглядит стильно. А ваш реальный покупатель смотрит на сайт с телефона под солнцем, в очках, с возрастным ухудшением зрения — и не может прочитать цену, найти поле ввода и понять, куда нажать. И молча уходит к конкуренту, у которого просто читаемо.
Эта статья — о контрасте и читаемости интернет-магазина для слабовидящих покупателей: что такое коэффициент контрастности, какие пороги задаёт WCAG, почему модный светло-серый вредит продажам и как сделать основной сайт на 1С-Битрикс доступным, не жертвуя дизайном. Доступность — это не благотворительность, а расширение аудитории и рост конверсии. Смежные UX-темы закрывает аудит и оптимизация 1С.
Коротко
- Контрастность — измеримое отношение яркости текста к фону; для обычного текста ориентир не ниже 4.5:1.
- Модный светло-серый текст на белом — частая причина нечитаемости для слабовидящих и на солнце.
- Контраст нужен не только тексту, но и полям, иконкам, кнопкам и состоянию фокуса (не ниже 3:1).
- Делайте доступным основной сайт, а не отдельную «версию для слабовидящих» — это удобнее всем.
Почему это касается вашего магазина
Соблазн отмахнуться: «слабовидящих мало, это не про наш бизнес». На деле проблемы со зрением — это огромная и растущая доля аудитории: возрастная дальнозоркость, катаракта, дальтонизм, банальная усталость глаз и просто чтение с телефона на ярком солнце. Все эти люди сталкиваются с одним и тем же — нечитаемым текстом.
И это не про «особых» пользователей, а про всех: контраст, который спасает слабовидящего, заодно делает сайт читаемым для обычного покупателя в неидеальных условиях. Нечитаемый магазин теряет заказы молча — человек не жалуется, он просто не покупает. Поэтому контраст и читаемость — вопрос конверсии, а не только этики.
Что такое контрастность
Контрастность — это отношение яркости текста к яркости фона, выраженное числом. Шкала идёт от 1:1 (текст и фон одного цвета, ничего не видно) до 21:1 (чистый чёрный на чистом белом, максимум). Чем выше число, тем легче различить текст.
Ключевое: это не субъективное «мне кажется, нормально», а измеримый параметр. Стандарт WCAG задаёт формулу расчёта по яркости цветов, и любой инструмент — пипетка в браузере, контраст-чекер — выдаёт конкретное число. Поэтому спор «читаемо или нет» решается не вкусом, а замером: коэффициент либо выше порога, либо нет. Это делает доступность управляемой инженерной задачей, а не предметом дизайнерских дискуссий.
Пороги контраста по WCAG
Международный стандарт доступности WCAG задаёт конкретные пороги, на которые ориентируются во всём мире. Их удобно держать под рукой таблицей.
| Элемент | Минимум (AA) | Повышенный (AAA) |
|---|---|---|
| Обычный текст | 4.5:1 | 7:1 |
| Крупный текст (от ~18–24px) | 3:1 | 4.5:1 |
| Иконки, границы, элементы UI | 3:1 | — |
| Состояние фокуса | 3:1 | — |
Практичный ориентир для магазина — уровень AA: обычный текст не ниже 4.5:1, крупный и нетекстовые элементы не ниже 3:1. Это разумный баланс между строгостью и реалистичностью дизайна. Крупный текст мягче, потому что толстые большие буквы различимы и при меньшем контрасте. Начните с достижения AA по всему сайту — это уже закрывает подавляющую часть проблем.
Беда модного светло-серого
Самая частая причина проваленного контраста — эстетика «воздушности». Светло-серый текст на белом фоне, бледные подписи, тонкие второстепенные надписи выглядят современно и минималистично на макете. Но контраст такого текста часто падает до 2–3:1 — ниже порога читаемости.
Проблема в том, что дизайнер смотрит на макет в идеальных условиях: качественный монитор, ровное освещение, острое зрение. Покупатель — нет. На дешёвом телефоне, под солнцем, с уставшими или возрастными глазами бледно-серый текст просто исчезает. То, что задумано как «стильно и легко», на практике оборачивается «не могу прочитать цену». Модный светло-серый — не про красоту, а про недосмотр.
Контраст нетекстовых элементов
Распространённое заблуждение — что контраст касается только текста. На деле слабовидящему покупателю нужно различать и интерфейс: где заканчивается поле ввода, где граница кнопки, что означает иконка. Если поле обведено едва заметной светло-серой рамкой, человек его просто не найдёт.
Стандарт задаёт для таких элементов порог 3:1. Это касается:
- Границ полей ввода. Форма оформления бесполезна, если не видно, куда вводить.
- Иконок, несущих смысл. Значки корзины, избранного, статусов должны различаться.
- Границ и фона кнопок. Кнопка действия обязана выделяться из окружения.
- Элементов графиков и индикаторов. Полосы наличия, статусы заказа, диаграммы.
Особенно критично это на шаге оформления: невидимое поле ввода — прямая потеря заказа с товаром уже в корзине.
Читаемость: размер, интервал, шрифт
Контраст — необходимое, но не единственное условие. Даже контрастный текст трудно читать, если он мелкий, набран узким шрифтом или плотно сжат. Читаемость складывается из нескольких факторов.
- Размер. Базовый текст не мельче ~16px; мелкие подписи и «звёздочки» — частая беда.
- Межстрочный интервал. Слишком плотные строки сливаются; комфортный интервал облегчает чтение.
- Длина строки. Слишком длинные строки трудно отслеживать глазом.
- Шрифт. Простые читаемые начертания лучше декоративных и сверхтонких.
- Выравнивание. Текст по левому краю читается легче, чем растянутый по ширине с рваными пробелами.
Эти параметры важны для всех, но для слабовидящих критичны. Хорошая типографика — часть доступности, а не отдельная от неё эстетика.
Не полагайтесь на один цвет
Отдельная ловушка — передавать смысл только цветом. «Зелёное — в наличии, красное — нет», «красным выделены ошибки». Для покупателя с дальтонизмом (а это заметная доля мужчин) красный и зелёный могут выглядеть одинаково, и вся информация теряется.
Правило простое: цвет должен дублироваться другим признаком — текстом, иконкой, узором, подписью. «В наличии» подкрепляют словом или галочкой, ошибку в форме — не только красной рамкой, но и текстом сообщения рядом с полем. Тогда информация доходит независимо от восприятия цвета. Это не усложняет интерфейс, а делает его надёжнее для всех.
Масштабирование и увеличение
Слабовидящие часто увеличивают страницу — браузером или системным зумом. Доступный сайт это выдерживает: при увеличении до 200% текст становится крупнее, ничего не обрезается, не наезжает и не требует горизонтальной прокрутки. Плохо свёрстанный магазин при зуме разваливается — блоки наезжают, кнопки уезжают за экран.
Ключ к этому — «резиновая» вёрстка на относительных единицах и гибких сетках вместо жёстких пикселей. Тогда интерфейс адаптируется к масштабу так же, как к разным экранам. По сути, поддержка масштабирования и качественная адаптивность — одна и та же дисциплина: сайт, который хорошо тянется под размеры экранов, обычно хорошо переживает и увеличение.
Состояния: фокус, наведение, ошибка
Доступность — это не только статичная картинка, но и то, как элементы реагируют. Важные состояния должны быть заметны:
- Фокус. Когда покупатель ходит по элементам с клавиатуры, текущий элемент должен ярко выделяться рамкой фокуса — не убирайте её ради эстетики.
- Наведение. Интерактивные элементы реагируют на курсор, показывая, что на них можно нажать.
- Ошибка. Проблема в форме подсвечивается и текстом, и цветом рядом с полем, а не только сменой оттенка.
- Активность. Нажатое, выбранное, загружающееся состояние видно однозначно.
Особенно часто «в жертву красоте» приносят рамку фокуса — а для человека, который не пользуется мышью, это единственный ориентир, где он находится. Убрать её — значит сделать оформление недоступным с клавиатуры.
Как проверить магазин
Проверка доступности сочетает автоматику и ручной прогон.
- Контраст-чекеры. Инструменты и расширения браузера мгновенно считают коэффициент любого текста.
- Аудиты доступности. Встроенные в браузер аудиты находят массовые проблемы по всему сайту.
- Реальное устройство. Проверьте каталог, карточку, корзину и оформление на телефоне при разном освещении.
- Зум и клавиатура. Увеличьте до 200%, пройдите оформление только с клавиатуры — всё ли видно и доступно.
Автоматика ловит цифры контраста и грубые ошибки, но живую читаемость и удобство лучше видно при ручной проверке ключевых сценариев на устройстве. Оптимально — сочетать оба подхода.
Реализация в 1С-Битрикс
На 1С-Битрикс доступность живёт в шаблоне сайта и его стилях, а не в отдельном «модуле для слабовидящих». Подход правильный — делать доступным основной сайт: задать в CSS контрастные цвета текста и элементов, читаемые размеры и интервалы, заметные состояния фокуса, резиновую вёрстку под масштабирование.
Практично закрепить доступность на уровне дизайн-системы: палитра с проверенными на контраст парами «текст/фон», единые токены размеров и отступов, компоненты полей и кнопок с заложенными состояниями. Тогда доступность не переделывают на каждой странице, а получают по умолчанию. Чтобы такие правки выкатывались безопасно и не ломали продакшен, помогает выстроенный процесс релизов — о нём в статье про CI/CD и деплой для 1С-Битрикс, а стабильность под нагрузкой обеспечивает правильная инфраструктура на BitrixVM. Отдельная «версия для слабовидящих» устарела: она урезана и всё равно не покрывает потребностей.
Частые ошибки
- Модный светло-серый текст. Контраст ниже порога ради «воздушности» — цену и подписи не прочитать.
- Бледные кнопки и поля. Главная кнопка и границы ввода сливаются с фоном, покупатель их не находит.
- Смысл только цветом. «В наличии/нет» и ошибки различаются лишь оттенком — недоступно дальтоникам.
- Убрали рамку фокуса. Оформление становится недоступным с клавиатуры ради эстетики.
- Вёрстка ломается при зуме. При увеличении блоки наезжают и уезжают за экран.
- Отдельная «версия для слабовидящих». Урезанная спецверсия вместо доступного основного сайта.
- Мелкий текст. Базовый шрифт и подписи слишком малы для комфортного чтения.
Чек-лист и вывод
- Проверьте контраст. Обычный текст ≥ 4.5:1, крупный и элементы UI ≥ 3:1 по всему сайту.
- Усильте ключевое. Цена, кнопка действия, поля оформления — контрастнее всего.
- Дублируйте цвет. Наличие, статусы и ошибки — не только оттенком, но и текстом или иконкой.
- Сохраните фокус. Заметная рамка фокуса и понятные состояния элементов.
- Поддержите зум. Резиновая вёрстка выдерживает увеличение до 200% без обрезки.
- Проверьте на устройстве. Ключевые сценарии на телефоне при разном освещении и с клавиатуры.
- Закрепите в дизайн-системе. Контраст и читаемость по умолчанию, а не переделка на каждой странице.
Контраст и читаемость — не про соответствие галочке в стандарте, а про то, чтобы покупатель мог прочитать цену, найти кнопку и оформить заказ независимо от зрения и условий. Модный светло-серый и невидимые поля молча теряют заказы, а достаточный контраст и качественная типографика их возвращают.
Главный вывод: делайте доступным основной сайт, а не отдельную ущербную версию. Достаточный контраст, читаемые шрифты, заметный фокус и поддержка масштабирования удобны всем покупателям, расширяют вашу аудиторию и заодно улучшают общий UX. Доступность — это не про ограничения дизайна, а про то, чтобы дизайн работал на продажи для всех.
