Как выбрать читаемый цвет текста для любого фона

Начните с фона, который действительно увидит пользователь

Цветовой токен — только исходное значение. Для проверки нужен фон непосредственно под буквами после разрешения CSS-переменных, opacity, оверлеев, градиентов, изображений, режимов смешивания и состояния компонента. Карточка с объявленным белым цветом может находиться под полупрозрачным слоем и в итоге стать светло-голубой. Чёрный текст с alpha 70% после композиции уже не равен #000000. Проверка одних объявлений CSS способна дать точный ответ на неправильный вопрос.

• Зафиксируйте конкретный компонент, состояние, ширину экрана и тему.
• Приведите цвет текста и каждый слой под ним к итоговым отрисованным цветам.
• Запишите исходные токены вместе с эффективными передним планом и фоном.
• Повторите расчёт для hover, focus, selected, disabled, error, тёмной темы и адаптивных вариантов, если цвет меняется.
• Считайте градиент, фотографию, видео и узор диапазоном фонов, а не одним удобным образцом.

Сравнивайте коэффициенты, а не оттенки и ощущения

Коэффициент контрастности WCAG сравнивает относительную яркость более светлого отрисованного цвета с более тёмным. Диапазон начинается с 1:1 для одинаковой яркости и заканчивается 21:1 для чёрного на белом. Название оттенка, светлота HSL и личное впечатление не заменяют расчёт. Насыщенные синий и жёлтый могут иметь светлоту HSL 50%, но радикально отличаться по относительной яркости и требовать разных цветов текста.

Для обычного текста критерий успеха WCAG 2.2 1.4.3 требует минимум 4,5:1 на уровне AA. Для крупного текста в рамках этого критерия действует порог 3:1. Усиленный уровень AAA задаёт 7:1 для обычного и 4,5:1 для крупного текста. Сравнивайте с порогом неокруглённое значение, а округляйте только подпись для человека. Показанные 4,5:1 всё ещё могут означать провал, если полное число равно 4,48:1.

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

Проверенные варианты чёрного и белого текста

Чёрный и белый полезны как первые кандидаты: один из них всегда даёт высокий математический контраст на непрозрачном фоне sRGB. Но заменять их друг другом без расчёта нельзя. Таблица использует формулу относительной яркости WCAG 2.2, сравнивает числа полной точности и показывает четыре знака. «Лучше» означает больший коэффициент только из этих двух вариантов и не утверждает, что весь компонент выполнил все требования доступности.

Не ограничивайтесь автоматическим выбором чёрного или белого

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

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

const candidates = ["#17181C", "#4F46E5", "#FFFFFF"];
const threshold = 4.5;

const passing = candidates
  .map((foreground) => ({
    foreground,
    ratio: contrastRatio(foreground, background),
  }))
  .filter(({ ratio }) => ratio >= threshold)
  .sort((a, b) => b.ratio - a.ratio);

// Выбирайте из `passing` по роли; не округляйте число до фильтрации.

Прозрачность, градиенты и фотографии требуют диапазона

Цвета с alpha необходимо скомпоновать до расчёта яркости. CSS Color 4 определяет простую альфа-композицию отдельно для каждого канала. Эффективный цвет зависит и от полупрозрачного переднего плана, и от слоя под ним, поэтому у токена rgb(0 0 0 / 60%) нет самостоятельного коэффициента контрастности. Opacity родителя может изменить сразу текст и фон, а несколько прозрачных слоёв нужно разрешать в порядке их отрисовки.

• Скомпонуйте полупрозрачный текст с эффективным фоном и только затем сравнивайте получившиеся цвета.
• Соберите прозрачные оверлеи и фоны снизу вверх до проверки текста.
• Для градиента найдите минимальный коэффициент по всей области, которую занимает каждая строка текста.
• Для фотографий и видео проверьте характерные и худшие варианты либо добавьте непрозрачный или управляемый полупрозрачный scrim.
• По возможности фиксируйте художественное направление: результат одной hero-фотографии не переносится автоматически на следующую.

Размер текста меняет порог, но не способ измерения

WCAG определяет крупный текст по отрисованному размеру и насыщенности, а не по HTML-тегу заголовка или подписи в дизайн-макете. По критерию 1.4.3 крупному тексту достаточно 3:1 на уровне AA, но основному тексту обычно нужны 4,5:1. Нельзя считать текст крупным только потому, что он жирный, важный или визуально заметный. Проверяйте вычисленный размер шрифта и насыщенность конкретного элемента.

• По умолчанию используйте порог для обычного текста.
• Применяйте исключение для крупного текста только после проверки отрисованного размера и насыщенности.
• Перепроверяйте адаптивный вариант, если на узком экране шрифт уменьшается.
• Отдельно измеряйте placeholder, подсказку, ошибку, badge и текст кнопки, когда у них разные токены.
• У неактивных контролов, логотипов, декоративного и случайного текста есть узкие исключения; это не универсальная лазейка для дизайна.

Коэффициент текста также не сертифицирует иконки, индикаторы фокуса, границы полей, диаграммы и другую визуальную информацию. У критерия нетекстового контраста своя область и порог 3:1 для охваченных компонентов интерфейса и графических объектов. Важный смысл нельзя передавать только цветом. Клавиатурное управление, семантика, масштабирование, reflow и реальное удобство остаются отдельными проверками.

Повторяемый чек-лист выбора цвета текста

• Назовите компонент, локаль, тему, ширину экрана, состояние и точный стиль текста.
• Разрешите итоговый передний план и все слои фона, включая alpha и оверлеи.
• Классифицируйте содержимое и выберите применимый порог AA или AAA.
• Рассчитайте коэффициенты полной точности для каждого разрешённого цвета текста.
• Отбросьте варианты ниже порога до применения фирменных и иерархических предпочтений.
• Для переменного фона проверьте наименее выгодную область, занятую текстом.
• Проверьте адаптивные и интерактивные состояния, меняющие цвет, размер, насыщенность или изображение.
• Запишите исходные и эффективные цвета, коэффициент, порог, результат и дату проверки.
• Продолжите нетекстовым контрастом, нецветовыми подсказками, семантикой, клавиатурой, масштабированием и проверкой человеком.

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