Контраст текста и фона: как правильно измерять и улучшать

Контраст между текстом и фоном — один из немногих параметров дизайна, который можно проверить числом. Достаточно вычислить коэффициент контрастности двух цветов: если он ниже нормы, часть пользователей будет плохо различать текст независимо от того, насколько «красиво» выглядит макет. Главный ориентир здесь — рекомендации WCAG: для обычного текста целевой минимум составляет 4,5:1, для крупного — 3:1. В этой статье разберём, что означает этот коэффициент, как его правильно измерять в разных ситуациях и какие практические приёмы помогают поднять контраст без разрушения визуального стиля.

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

Коэффициент контрастности (contrast ratio) показывает, во сколько раз отличаются яркости двух цветов. Значение лежит в диапазоне от 1:1 (цвета идентичны) до 21:1 (чёрный на белом). Формула основана не на «яркости» из палитры дизайнера, а на относительной светимости цвета с учётом особенностей человеческого восприятия: зелёный канал влияет на воспринимаемую яркость сильнее, чем синий.

Из этого следуют два важных вывода. Во-первых, два цвета могут выглядеть одинаково тёмными или светлыми на глаз, но иметь заметно разную светимость — поэтому оценка «на глазок» ненадёжна. Во-вторых, контраст зависит только от пары цветов, а не от размера шрифта напрямую: размер влияет лишь на то, какая норма к нему применяется.

Нормы WCAG: какие значения считать достаточными

Рекомендации WCAG 2.x задают три уровня соответствия. Для повседневной веб-разработки ориентируются на уровень AA:

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

Требования не распространяются на декоративные элементы, логотипы и неактивные (disabled) элементы управления. Однако это не значит, что disabled-кнопки можно делать полностью нечитаемыми: пользователь всё равно должен понимать, что написано на кнопке и почему она недоступна.

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

Как измерять контраст: инструменты и типичные ошибки

Измерить коэффициент можно несколькими способами, и у каждого есть своя зона применения:

• Онлайн-калькуляторы и расширения браузера — самый быстрый путь для проверки пары цветов. Вы вводите HEX-значения или пипеткой берёте цвет со страницы.
• Инструменты разработчика в браузере — во многих современных браузерах инспектор показывает коэффициент контрастности прямо рядом со свойством color и подсвечивает нарушения.
• Автоматические аудиторы доступности — сканируют страницу целиком и находят все пары «текст/фон», включая те, о которых вы забыли.
• Проверка дизайн-макета — некоторые графические редакторы и плагины умеют считать контраст прямо в макете, что позволяет поймать проблему до вёрстки.

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

Вторая частая ошибка — игнорирование состояний. Кнопка может иметь нормальный контраст в покое, но проваливать его в состоянии hover, focus или pressed, где цвета меняются. Проверяйте все интерактивные состояния, особенно рамку фокуса: её контраст к окружению тоже важен, чтобы пользователь видел, какой элемент активен.

Пошаговый порядок проверки страницы

1. Составьте список всех пар «текст + фон»: основной текст, вторичный текст, ссылки, кнопки, подписи, плейсхолдеры, текст на изображениях.
2. Для каждой пары определите фактический итоговый цвет фона с учётом прозрачности и наложений, а не значение из дизайн-токена.
3. Измерьте коэффициент инструментом и сравните с нормой: 4,5:1 для обычного текста, 3:1 для крупного и графики.
4. Проверьте состояния hover, focus, active и disabled для интерактивных элементов.
5. Исправьте проблемные пары и повторите замер — после изменения одного цвета часто ломается соседняя пара.

Как улучшить контраст, не ломая дизайн

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

• Меняйте светимость, а не оттенок. Сдвиг цвета по оси «темнее/светлее» даёт больший прирост коэффициента, чем изменение тона. Брендовый синий можно оставить синим, просто сделав его глубже.
• Затемняйте фон под светлым текстом. Иногда проще добавить подложке лёгкое затемнение, чем осветлять текст: результат тот же, а восприятие бренда сохраняется.
• Увеличивайте размер шрифта там, где это уместно. Крупный текст имеет порог 3:1 вместо 4,5:1, поэтому заголовки проходят норму легче, чем мелкие подписи. Но злоупотреблять этим не стоит: искусственно укрупнять текст ради прохождения проверки — плохой путь.
• Добавляйте подложку под текст на изображениях. Полупрозрачная плашка, градиент от края фотографии или лёгкая тень дают предсказуемый фон и убирают зависимость от содержимого картинки.
• Пересматривайте «вторичные» стили. Серый текст-подпись чаще всего нарушает норму. Часто достаточно поднять его светимость на несколько процентов, чтобы пройти 4,5:1, сохранив визуальную иерархию за счёт размера.
• Используйте вес шрифта как вспомогательный сигнал. Иерархия строится комбинацией размера, насыщенности и цвета, поэтому контраст можно поднимать точечно, компенсируя это другими средствами.

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

Ограничения автоматических проверок

Автоматические инструменты полезны, но они видят не всё. Типичные слепые зоны:

• Текст поверх изображений и видео. Инструмент не знает, что окажется под надписью после загрузки реального фото.
• Динамический контент. Цвета, приходящие из API или темы пользователя, не попадают в статичный аудит.
• Текст в canvas, SVG и кастомных компонентах, который рендерится нестандартным способом.
• Реальные условия просмотра. Яркое солнце, дешёвый экран с низкой яркостью и возрастное снижение зрения ухудшают восприятие даже формально проходящего контраста. Именно поэтому запас выше минимума — разумная практика для критичного текста.

Поэтому автоматическую проверку стоит дополнять ручным просмотром ключевых экранов и, по возможности, тестированием с реальными пользователями, включая людей с ослабленным зрением.

Частые ошибки и их последствия

Ошибка	Почему возникает	Чем грозит
Бледно-серый вторичный текст	Стремление к «воздушному» дизайну	Подписи и метаданные нечитаемы для значительной части пользователей
Замер только основного фона	Игнорирование карточек, оверлеев, градиентов	Формально пройденный аудит при реальных нарушениях на странице
Проверка только состояния покоя	Hover и focus забыли на этапе макета	Пользователь теряет обратную связь при наведении и навигации с клавиатуры
Белый текст на фото без подложки	Расчёт на удачный кадр	Надпись исчезает на светлых участках изображения
Полупрозрачный текст вместо серого	Прозрачность кажется гибким инструментом	Итоговый цвет зависит от фона, контраст непредсказуем

Сценарии: что делать в конкретных ситуациях

Брендовый цвет не проходит норму для кнопки. Проверьте, действительно ли текст обязан быть белым. Часто помогает затемнение самой кнопки на один-два шага либо переход на тёмный текст на светлом варианте того же брендового цвета. Если менять ничего нельзя, увеличьте размер и жирность шрифта, чтобы попасть под порог 3:1 для крупного текста.

Нужен «приглушённый» вторичный текст. Подберите оттенок, проходящий ровно 4,5:1, и зафиксируйте его токеном. Визуальная иерархия сохраняется за счёт меньшего размера, а читаемость — за счёт корректного контраста.

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

Тёмная тема. Не переносите светлую тему зеркально. Чистый белый текст на чистом чёрном фоне создаёт избыточный контраст, вызывающий засветы и утомление; обычно комфортнее слегка приглушить оба конца шкалы, оставаясь выше минимальных норм.

С чего начать прямо сейчас

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