Два цвета — отношение контраста, соответствие AA и AAA для обычного и крупного текста и ближайший проходящий оттенок. Считается прямо в браузере.
5,45:1
Обычный текст: цена и срок известны до разговора.
Крупный заголовок
Контраст — это отношение яркости текста к яркости фона. У чёрного на белом оно максимальное, 21:1; у светло-серого на белом — около 1,5:1, и такой текст человек с обычным зрением на солнце уже не прочитает, а человек со слабым — не прочитает никогда. WCAG 2.1 задаёт порог: 4,5:1 для обычного текста и 3:1 для крупного (от 18 pt, или от 14 pt полужирным) — это уровень AA. Уровень AAA строже: 7:1 и 4,5:1 соответственно.
Считать это на глаз нельзя. Восприятие цвета нелинейно: два оттенка, которые кажутся одинаково тёмными, дают разный контраст на одном и том же фоне. Поэтому формула из спецификации переводит каждый канал в линейную яркость и только потом сравнивает — то же самое делает браузерный инспектор и любой аудит доступности.
Чаще всего порог не проходят три вещи: подписи под полями формы, сноски мелким кеглем и белый текст на фирменном цвете. Последнее особенно обидно: цвет бренда трогать не хочется, а он и не всегда виноват — иногда достаточно увеличить кегль до крупного, и порог становится 3:1.
Этот инструмент ничего не отправляет на сервер: цвета остаются в вашем браузере, расчёт идёт там же. Формула здесь ровно та же, что в блоке доступности моего экспресс-аудита, — так что число из утилиты и число из отчёта не разойдутся.
Что проверка не покажет: полупрозрачность поверх картинки, тень под текстом и цвета, которые подставляет скрипт. Контраст текста на фотографии измеряется только по конкретной точке фона, и на разных участках фотографии он разный — это тот случай, когда решение принимает человек, а не формула.
Для обычного текста — 4,5:1, для крупного — 3:1. Это уровень AA, к которому отсылают и WCAG 2.1, и российские требования к доступности сайтов. Уровень AAA (7:1) разумно держать для основного текста статей, но требовать его от всей вёрстки не нужно.
От 18 pt (примерно 24 px) обычного начертания или от 14 pt (примерно 18,7 px) полужирного. Для такого текста порог ниже — 3:1: крупные буквы читаются легче при том же контрасте.
Не обязательно менять палитру. Рабочие пути: сделать текст на этом цвете крупнее, поменять местами фон и текст, затемнить фирменный цвет только для текста, оставив исходный для плашек и графики. Подсказка с ближайшим проходящим оттенком в этом инструменте — как раз про последний вариант.
Контраст — один из полутора десятков пунктов, которые я смотрю в аудите. Проверю заодно разметку, скорость, формы и видимость в ИИ-ответах.