Проверка контраста цветов: как убедиться, что текст читается на фоне

Возьмите HEX-коды текста и фона, посчитайте коэффициент контраста по формуле (L1+0,05)/(L2+0,05), где L — относительная яркость цвета, и сравните с порогом 4,5:1 для обычного текста или 3:1 для крупного. Если значение ниже, затемните текст или осветлите фон и пересчитайте. Проверку можно делать в любом калькуляторе контраста, но исходные коды берите точные, из макета или стилей, а не подобранные на глаз.

Что показывает коэффициент контраста и откуда берётся число

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

Относительная яркость учитывает гамма-коррекцию sRGB, поэтому простого среднего по каналам недостаточно. Каждый канал делят на 255: при значении не больше 0,03928 делят на 12,92, иначе возводят в степень 2,4. Затем складывают 0,2126·R + 0,7152·G + 0,0722·B. Зелёный канал весит больше всех, поэтому зелёный текст на белом обычно темнее, чем кажется.

Белый #FFFFFF даёт яркость 1,0, чёрный #000000 — 0. Серый #777777 на белом даёт около 4,48:1, а чёрный на белом — ровно 21:1. Это и есть те числа, с которыми вы сравниваете порог.

Какой порог считается достаточным для текста

Ориентир — рекомендации WCAG 2.2, критерии 1.4.3 и 1.4.6. Уровень AA требует 4,5:1 для обычного текста и 3:1 для крупного. Уровень AAA поднимает планку до 7:1 для обычного и 4,5:1 для крупного. Порог 3:1 для границ и элементов интерфейса — отдельное требование, оно не заменяет правило для текста.

Если сайт обязан соответствовать AA, значение 4,48:1 формально не проходит, даже если визуально разница почти незаметна. Практика проще: держите запас. Для основного текста ориентируйтесь на 7:1 — тогда мелкий кегль, сглаживание шрифта и неидеальный экран не съедят читаемость.

Как размер и начертание шрифта меняют требование

Крупный текст по WCAG — от 18 pt (примерно 24 px) или от 14 pt (примерно 18,66 px), если начертание полужирное. Для такого текста порог AA снижается до 3:1. Один и тот же серый #777777 на белом подходит для заголовка 24 px и не подходит для абзаца 16 px.

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

Как измерить контраст на практике

Действуйте по шагам и записывайте результат каждого.

1. Возьмите точные HEX-коды текста и фона из макета, CSS или палитры проекта. Не берите цвет пипеткой с фотографии экрана — там уже искажения.
2. Подставьте пару в калькулятор контраста, например WebAIM Contrast Checker, и запишите полученное отношение.
3. Сравните с порогом для своего кегля: 4,5:1 обычный, 3:1 крупный.
4. Если не проходит, меняйте один параметр за раз — сначала текст, потом фон — и пересчитывайте, чтобы видеть вклад каждого шага.

Почему проверка на реальном устройстве всё равно нужна

Калькулятор считает по номинальным значениям sRGB, а экран может искажать цвет: яркость подсветки, цветовой профиль, режим чтения меняют восприятие. Откройте страницу на телефоне при ярком солнце и в тёмной комнате — читаемость будет разной при одном и том же коэффициенте.

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