Проверка контраста WCAG: AA и AAA для текста
Этот WCAG-чекер контраста вычисляет коэффициент контраста между цветом переднего плана и цветом фона, затем проверяет его на соответствие требованиям AA или AAA для обычного или крупного текста. Живой предпросмотр показывает текст на его фоне, помогая оценить читаемость. Пороги: 4.5:1 и 3:1 для AA, и 7:1 и 4.5:1 для AAA.
Этот WCAG-чекер контраста вычисляет коэффициент контраста между цветом переднего плана и цветом фона. Он оценивает результат по порогам WCAG AA и AAA для обычного и крупного текста и предоставляет живой предпросмотр, чтобы можно было увидеть текст на его фоне. Используйте его для проверки цветового контраста и получения ясного результата при оценке читаемости.
Выберите, оценивать ли цвета по критериям AA или AAA, и является ли текст обычным или крупным. Для AA требуемый коэффициент контраста — 4.5:1 для обычного текста и 3:1 для крупного текста. Для AAA пороги — 7:1 для обычного текста и 4.5:1 для крупного текста. Чекер сообщает, как коэффициент соотносится с выбранным требованием.
Цвета переднего плана и фона играют разные роли в предпросмотре: передний план — цвет текста, а фон — цвет позади него. Проверка пары помогает оценить их контраст вместе, а не судить каждый цвет изолированно. Живой предпросмотр предлагает быструю визуальную проверку наряду с коэффициентом и оценкой.
Чекер работает полностью в вашем браузере, а ваш ввод обрабатывается на вашем устройстве; никакие данные не отправляются на сервер. Он работает офлайн после загрузки страницы и бесплатен. Разработчики, дизайнеры и DevOps-инженеры могут использовать его для проверки цветовых комбинаций по критериям WCAG и выявления проблем контраста перед обменом или поставкой интерфейса.
Шаг 1: Введите цвета переднего плана и фона, которые хотите проверить. Это два цвета, которые сравнивает чекер.
Шаг 2: Выберите критерии для оценки. Чекер оценивает контраст по порогам AA или AAA для обычного или крупного текста.
Шаг 3: Просмотрите коэффициент контраста и оценку. Результат показывает, соответствуют ли выбранные цвета выбранным критериям.
Шаг 4: Проверьте живой предпросмотр. Вид текста на его фоне помогает оценить читаемость с первого взгляда.
Пример использования: Проверьте, соответствует ли комбинация цветов переднего плана и фона требуемому порогу контраста WCAG, перед использованием в интерфейсе.
Пример использования: Поймайте непроходящую цветовую комбинацию до того, как она попадёт к ревьюеру или пользователю, чтобы оценить её раньше.
Пример использования: Получите результат «пройден/не пройден» с причиной, а не полагайтесь только на коэффициент контраста.
Пример использования: Используйте живой предпросмотр, чтобы оценить, как текст выглядит на фоне, проверяя его контраст.
Пример использования: Проверяйте обычный и крупный текст по критериям AA или AAA, когда нужно оценить разные требования к тексту.
Пример использования: Проверьте предлагаемую цветовую комбинацию на соответствие порогам, которым должен следовать ваш проект.