Коэффициент контраста и читаемый текст

Серый #767676 на белом имеет коэффициент контраста 4.54:1 и соответствует минимуму WCAG для основного текста; на шаг светлее, #777777, даёт 4.48:1 и не проходит.

Относительная яркость

Чтобы решить, читается ли текст, Web Content Accessibility Guidelines не используют тон или светлоту HSL. Они используют относительную яркость, число от 0 для чёрного до 1 для белого, которое отслеживает, сколько света цвет посылает в глаз. WCAG 2.2 определяет её в два шага. Сначала каждый канал превращают в число от 0 до 1, деля на 255 и затем отменяя кривую sRGB: если значение не больше 0.04045, его делят на 12.92; иначе вычисляют ((значение + 0.055) / 1.055) в степени 2.4. Затем три результата взвешивают и складывают: L = 0.2126 R + 0.7152 G + 0.0722 B.

Веса многое объясняют. На зелёный приходится больше 70% общей суммы, на синий едва 7%. Поэтому у чисто синего #0000ff яркость всего 0.0722, а у чисто жёлтого, красного плюс зелёного, 0.9278. Спецификация также хранит небольшую историю: до мая 2021 года порог был записан как 0.03928, скопированный из более старого документа. Его исправили на 0.04045, и WCAG отмечает, что на результаты это практически не влияет.

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

Коэффициент контраста сравнивает две яркости: (L1 + 0.05) / (L2 + 0.05), где L1 — более светлый цвет, а L2 — более тёмный. Число 0.05 означает немного рассеянного света, который всегда попадает в глаз, и оно не даёт отношению стать бесконечным для чёрного. Коэффициенты идут от 1:1, цвет против самого себя, до 21:1, чёрный против белого: (1 + 0.05) / (0 + 0.05) = 21. Для #767676 на белом яркость 0.1812, значит, отношение 1.05 / 0.2312 = 4.54.

Вот весь расчёт для синего #2273c3 из урока 2, rgb(34 115 195). После деления на 255 каналы равны 0.1333, 0.4510 и 0.7647. Все три выше 0.04045, поэтому каждый проходит через степенную формулу, давая 0.0160, 0.1714 и 0.5457. После взвешивания получается 0.0034 от красного, 0.1226 от зелёного и 0.0394 от синего, а сумма — яркость 0.1654. На белом отношение 1.05 / 0.2154 = 4.87, так что этот синий проходит AA для основного текста на белой странице. На чёрном оно 0.2154 / 0.05 = 4.31, чуть не хватает.

Пороги

WCAG 2.2 превращает отношение в индикаторы «Проходит» и «Не проходит». Критерий успеха 1.4.3 уровня AA требует минимум 4.5:1 для обычного текста и 3:1 для крупного текста. Крупным считается текст не меньше 18 пунктов или 14 пунктов полужирным; WCAG отмечает, что для обычных шрифтов основного текста это примерно 1.5 em и 1.2 em полужирным. Критерий 1.4.6 уровня AAA поднимает планку до 7:1 и 4.5:1. Критерий 1.4.11 требует 3:1 для тех частей кнопок, полей форм и значков, которые людям нужно видеть. Чисто красный #ff0000 на белом даёт 4.00:1, что нормально для крупного заголовка, но не проходит для основного текста. Синий #0000ff на белом даёт 8.59:1 и проходит везде.

Ещё один полезный факт следует из формулы. У цвета с яркостью около 0.179 одинаковый контраст и с белым, и с чёрным, около 4.58:1. Если цвет темнее, на нём лучше читается белый текст; если светлее, то чёрный. Панель под моделью показывает оба отношения и называет лучший выбор.