Проверка цветового контраста WCAG 2.2

WCAG 2.2 Color Contrast Checker измеряет коэффициент контраста между цветом текста и цветом фона и показывает, проходит ли пара уровни AA и AAA для текста (КУ 1.4.3 и 1.4.6) и требования к компонентам UI и графическим объектам (КУ 1.4.11). Инструмент принимает HEX, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() и имена цветов CSS, показывает пару как текст и как элемент управления и предлагает ближайший доступный цвет, если пара не проходит.

1. 1.Введите или выберите цвет текста и цвет фона.
2. 2.Посмотрите коэффициент и строку «пройдено/не пройдено» для каждого критерия WCAG 2.2.
3. 3.Проверьте превью обычного текста, крупного текста и элемента управления.
4. 4.Если проверка не пройдена, выберите «Изменить цвет текста» или «Изменить фон» до AA или AAA, сравните исходный и предложенный цвета и нажмите «Применить».
5. 5.Скопируйте сводку результата или объявления CSS.

Каждый цвет переводится в sRGB, а его относительная яркость считается по формуле WCAG (порог линеаризации 0.04045). Коэффициент равен (L1 + 0.05) / (L2 + 0.05). Он показывается с округлением до двух знаков, но каждое решение «пройдено/не пройдено» принимается по неокруглённому значению, поэтому 4.499:1 не проходит AA, даже если отображается как 4.50:1. Полупрозрачный цвет текста смешивается с фоном, а полупрозрачный фон — с подложкой (по умолчанию белой) по каждому каналу sRGB, как это делают браузеры. Цвета вне sRGB, например насыщенные значения Display P3 или OKLCH, обрезаются до sRGB перед измерением, и инструмент сообщает об этом.

Инструмент измеряет одну пару цветов. Он не оценивает рендеринг шрифтов, текст поверх изображений или градиентов и другие критерии WCAG; для проверки всей страницы используйте Web Accessibility Checker. В WCAG 2.2 крупный текст — это не менее 18 пунктов или 14 пунктов полужирным (около 24px или 18,66px полужирным). Цвета обрабатываются в браузере, а последняя пара сохраняется только в локальном хранилище этого браузера.