Проверка контрастности цветов

Не только вердикт, но и что поставить

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

Два счёта: действующая норма и то, как видит глаз

Коэффициент WCAG 2.1 — действующая норма, по ней проверяют сайты, и вердикты здесь даёт она: 4,5:1 для обычного текста, 3:1 для крупного, 7:1 для уровня AAA. Но у этой формулы есть известная слабость: на тёмных фонах она ошибается. Хрестоматийный случай — серый фон #777777: формула предпочитает на нём чёрный текст, хотя глаз читает белый заметно лучше.

Поэтому рядом справочно стоит Lc по APCA — перцептивному счёту, который готовится для WCAG 3. Когда два счёта расходятся, мы прямо пишем, в какую сторону врёт старая формула и что с этим делать. Ни одна русская проверялка второго счёта не показывает.

Рамки и иконки — отдельная строка

Контраст нужен не только тексту. Границам полей ввода, рамкам кнопок, иконкам и прочим нетекстовым элементам WCAG 1.4.11 требует 3:1 с соседним цветом. В вердикте это отдельная строка, а в предпросмотре стоят рамка и значок, покрашенные вашей парой.

Полупрозрачные цвета считаются честно

Кнопки и подписи сплошь красят в rgba, а проверялки такие записи отвергают или считают неверно. Мы складываем цвета так, как это делает браузер: фон с белой страницей, текст — с получившимся фоном, и считаем контраст того цвета, который видит глаз.

Любая запись цвета

На входе годится всё, что понимает CSS: HEX, rgb(), hsl(), hwb(), lab(), oklch(), имена цветов. Разбор общий с нашим конвертером цветов — один словарь и одна математика на оба инструмента. Крупный текст по WCAG — от 24 пикселей или от 18,66 пикселя жирного; в предпросмотре есть образцы обоих.

Что рядом

Перевести цвет в другую запись умеет конвертер цветов, снять палитру с картинки — палитра из изображения. Читается ли текст на переходе цветов, проверяет генератор градиентов.