Коэффициент контрастности цвета на проверенных примерах

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

WCAG 2.2 определяет коэффициент формулой (L1 + 0,05) / (L2 + 0,05). L1 — относительная яркость более светлого цвета, L2 — более тёмного. Более светлое значение всегда находится в числителе, поэтому результат не зависит от того, какой цвет назвали текстом. При перестановке переднего плана и фона коэффициент той же пары не меняется.

контраст = (Lсветлее + 0,05) / (Lтемнее + 0,05)
минимум = 1:1
максимум = 21:1

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

Как каналы sRGB превращаются в относительную яркость

Для непрозрачного цвета sRGB берут красный, зелёный и синий каналы. Каждый восьмибитный канал нормализуют из диапазона 0–255 в 0–1, линеаризуют передаточной функцией sRGB и затем объединяют. WCAG задаёт веса относительной яркости: 0,2126 для красного, 0,7152 для зелёного и 0,0722 для синего. Поэтому зелёный канал влияет на числовую яркость намного сильнее синего.

const linear = value => {
  const channel = value / 255;
  return channel <= 0.04045
    ? channel / 12.92
    : ((channel + 0.055) / 1.055) ** 2.4;
};

const luminance = (red, green, blue) =>
  0.2126 * linear(red) +
  0.7152 * linear(green) +
  0.0722 * linear(blue);

• Разберите итоговые каналы sRGB: не считайте по названию цвета или зрительной оценке.
• Линеаризуйте каждый канал до применения весов яркости.
• Вычислите обе яркости, поместите более светлую в L1 и сохраните достаточную точность.
• Округляйте подпись для человека, но сравнивайте с порогом неокруглённый результат.
• При прозрачности или изображении сначала определите эффективный отрисованный фон.

Пороги AA и AAA зависят от вида текста

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

• AA, обычный текст: 4,5:1 или выше.
• AA, крупный текст: 3:1 или выше.
• AAA, обычный текст: 7:1 или выше.
• AAA, крупный текст: 4,5:1 или выше.

WCAG называет крупным текст не меньше 18 пунктов либо не меньше 14 пунктов при жирном начертании, с эквивалентными оговорками для шрифтов CJK. CSS-пиксели и пункты нельзя просто считать одинаковыми единицами: в стандартном справочном пересчёте 18 pt соответствует 24 CSS px, а 14 pt — примерно 18,67 CSS px. Нужно проверить вес, заданный размер и реальную роль текста, а не угадывать их по скриншоту.

Проверенные пары и граница округления

Ниже приведены расчёты для непрозрачных шестизначных цветов sRGB по формуле относительной яркости WCAG 2.2. Результат относится к обычному, а не крупному тексту. Показаны четыре знака после запятой, чтобы пограничные значения оставались заметны.

#767676 на белом проходит порог 4,5:1, а немного более светлый #777777 — нет. При показе одного знака после запятой оба результата могут выглядеть как 4,5:1, однако пороги WCAG не округляют перед проверкой. Значение 4,4781:1 остаётся ниже 4,5:1. Надёжный инструмент сравнивает число полной точности и округляет только видимую человеку подпись.

Прозрачность, градиенты, изображения и состояния

У цвета с alpha нет одного коэффициента, пока он не скомпонован с известным фоном. Например, чёрный с непрозрачностью 50% станет средним серым на белом, но даст другой результат на светло-голубой поверхности. Проверяйте эффективный отрисованный цвет переднего плана относительно эффективного фона, а не исходный полупрозрачный токен. Opacity родителя также может одновременно изменить текст и поверхность.

• Для полупрозрачного текста выполните композицию со всеми фонами, на которые он реально попадает.
• Для градиента найдите участок с наименьшим контрастом под всей областью текста.
• Для фотографии или видео проверьте характерные и худшие кадры; сплошной scrim делает результат детерминированнее.
• Отдельно тестируйте обычное, hover, focus, selected, error и другие важные состояния, если их цвета различаются.
• Не используйте сглаженный краевой пиксель буквы как заявленный цвет текста; начинайте с заданных цветов переднего плана и фона.

Исключения и требования за пределами этого коэффициента

У критерия минимального контраста текста есть явные исключения. Текст в неактивном элементе интерфейса, чисто декоративный или невидимый текст, случайная надпись внутри изображения с другим значимым содержимым, а также текст логотипа или названия бренда не получают того же требования по критерию 1.4.3. Исключение узкое: обычный брендированный текст статьи не становится логотипом только из-за фирменного цвета.

Контраст текста — не вся проверка цвета. Границы элементов интерфейса и смысловая графика рассматриваются требованиями к нетекстовому контрасту. Ссылки, ошибки, диаграммы и статусы не должны передавать смысл только оттенком, если цвет — единственный способ понять информацию. Управление с клавиатуры, видимый фокус, увеличение, reflow, подписи, семантика и альтернативный текст проверяются отдельно.

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

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

• Зафиксируйте итоговые передний план и фон именно в проверяемом состоянии интерфейса.
• Разрешите CSS-переменные, именованные цвета, alpha, наследование, оверлеи и смешивание до расчёта.
• Преобразуйте эффективные каналы sRGB в относительную яркость с полной точностью.
• Вычислите (L1 + 0,05) / (L2 + 0,05), поставив более светлую яркость первой.
• Классифицируйте содержимое как обычный текст, крупный текст или другой тип с отдельным критерием.
• Сравните неокруглённый результат с 4,5, 3, 7 или 4,5 в зависимости от случая.
• Проверьте все существенно отличающиеся состояния и участок с минимальным контрастом на переменном фоне.
• Запишите цвета, коэффициент, класс содержимого, порог, результат и дату, чтобы другой специалист повторил проверку.
• Продолжите проверками нетекстового контраста, взаимодействия, семантики, клавиатуры, масштабирования и реального удобства.

Color Atlas разделяет детерминированные части: сохранённые значения sRGB, рассчитанную относительную яркость, точный коэффициент и подписи порогов. Такая структура делает результат воспроизводимым и позволит следующей статье сравнивать несколько цветов текста на одном фоне без выдуманных утверждений и обещаний, что одно число сертифицирует весь интерфейс.