Slop Colors · бесплатно, в вашем браузере

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

Серый текст на белом выглядит изящно, пока его никто не может прочитать. Введите два цвета, и Slop Colors покажет коэффициент WCAG, какие уровни пройдены и ближайший цвет текста, который проходит.

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

Как это сделать

Прокрутите до блока «Проверка контраста (WCAG 2)» и введите цвет текста и цвет фона в формате HEX, RGB, HSL или OKLCH.
Посмотрите коэффициент и пять результатов: AA и AAA для обычного текста, AA и AAA для крупного текста, а также элементы интерфейса и графика.
Посмотрите образец: крупный текст и абзац в ваших двух цветах.
Если AA для обычного текста не пройден, нажмите «Исправить цвет текста»: цвет текста сохранит оттенок и станет ровно настолько светлее или темнее, чтобы пройти проверку.
Нажмите «Поменять местами», чтобы проверить цвета в обратном порядке.

Ваши файлы остаются на этом устройстве: Slop Colors работает в браузере, без отправки, без учётной записи и без водяных знаков.

Вопросы

Какие коэффициенты требует WCAG?

Уровень AA требует 4,5:1 для обычного текста и 3:1 для крупного (24 px или 18,66 px жирным), а также для элементов интерфейса и графики. Уровень AAA требует 7:1 и 4,5:1.

Почему показано 4,47, а не 4,48?

Коэффициент округляется вниз, как его показывает проверка WebAIM, поэтому пара с 4,499 никогда не будет показана как прошедшая порог 4,5.

Можно ли проверить цвет с экрана?

В Chrome и Edge кнопка «Выбрать с экрана» берёт любой пиксель на экране. Затем используйте его как цвет текста или фона на панели.

Что-нибудь отправляется?

Нет. Цвета проверяет сама страница в вашем браузере; ничего никуда не передаётся.