Контрастность для слабовидящих: нормы и проверка

«Серое на светло-сером выглядит стильно» — слышим почти на каждом дизайн-ревью. Проблема в том, что для пользователя с возрастной дальнозоркостью или лёгкой катарактой такой текст просто исчезает. Контраст — это не вкусовщина, у него есть измеримая норма, и она проверяется за пару минут.

01Что такое коэффициент контраста

Контраст в WCAG считается как отношение яркости двух цветов: текста и фона. Значение колеблется от 1:1 (когда цвета совпадают) до 21:1 (чёрный на белом). Чем выше число, тем легче прочитать текст.

Стандарт задаёт три порога:

• 3:1 — минимум для крупного текста (от 18 пт или 14 пт жирным) и для нетекстовых элементов: иконок, рамок полей, индикаторов фокуса.
• 4,5:1 — рабочий минимум для основного текста и интерфейса по уровню AA.
• 7:1 — повышенный уровень AAA: важен для медицинских, юридических, образовательных проектов и сайтов, где аудитория включает пожилых пользователей.

Эти числа не зависят от стиля бренда — это физика восприятия. Если ваш светло-серый ниже 4,5:1, его одинаково плохо видят и в Москва-Сити, и в дачном Wi-Fi на солнечной веранде.

02Почему слабовидящих больше, чем кажется

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

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

03Где обычно проваливается контраст

За годы аудитов сайтов малого бизнеса собирается похожий список проблемных мест.

• Плейсхолдеры в формах — почти всегда слишком светлые. Контраст плейсхолдера такой же норматив, как и у обычного текста.
• Подписи под полями и тексты «обязательное поле» — серым по белому в 2,5:1.
• Кнопки «второго уровня» — обводка светло-серым по белому, надпись еле видна.
• Хлебные крошки и метаданные — даты, теги, авторы статей.
• Цветной текст на цветном фоне — белая надпись на голубом или жёлтом фоне почти всегда вне нормы.
• Картинки с текстом — особенно баннеры с фото и наложенным заголовком без подложки.

04Чем измерять контраст

Инструментов много, для малого бизнеса достаточно трёх.

Браузерные расширения

WAVE и axe DevTools показывают список проблемных пар прямо на странице. Удобно для общего аудита.

DevTools Chrome

Встроенный пикер цвета в инспекторе показывает коэффициент контраста при выборе любого текста. Подходит для точечной проверки.

Онлайн-чекеры

Сервисы вроде WebAIM Contrast Checker считают коэффициент по двум hex-кодам. Удобно проверять палитру до запуска макета.

Лучше проверять контраст на этапе дизайна. Переделывать палитру готового сайта — дольше и дороже, чем заложить норму в макет с самого начала.

05Как починить, не сломав бренд

Брендбук редко требует именно тот оттенок серого, который не проходит по контрасту. Обычно есть пара рабочих приёмов.

• Затемните текст на 1–2 шага. Замените #999 на #555 — визуально это всё ещё серый, но контраст уже в норме.
• Сделайте фон чуть темнее или светлее. Иногда проще скорректировать фон, чем основной цвет текста.
• Добавьте подложку. Полупрозрачный слой под текстом на баннерах решает проблему фотофона.
• Уберите фирменный цвет из мелкого текста. Оставьте его для заголовков и крупных акцентов, где порог 3:1 проходит.
• Используйте жирность. Жирный шрифт от 14 пт читается по более мягкому порогу.

Если правок много, имеет смысл собрать их пачкой и обновить дизайн-систему сайта в рамках планового рефакторинга — например, при обновлении или редизайне сайта.

06Контраст и SEO

Прямой формулы «контраст влияет на позиции» нет. Но косвенная связь работает через поведенческие факторы: пользователь, который не может прочитать заголовок, быстрее уходит. Время на сайте падает, отказы растут, Яндекс это видит. Поэтому проверку контраста стоит закладывать в любой SEO-аудит наравне с техничкой и семантикой.

Официальная документация по теме — Справка Яндекс.Вебмастера.