Проверить контраст цветов по WCAG
Проверьте читаемость текста по WCAG.
Результат
Добавьте данные и выполните обработку. Результат появится здесь.
Как пользоваться
- Добавьте исходные данные в редактор.
- Введите цвет текста и фона в HEX.
- Проверьте результат и сохраните файл на устройство.
Пример
Чёрный текст на белой бумаге
Текст #000000, фон #ffffff.
Рассчитайте контраст.
Соотношение 21:1; проверка этой пары проходит пороги AA и AAA.
Форматы и ограничения
Сравните два цвета перед использованием в интерфейсе. Пример текста и числовой результат помогают подобрать читаемую комбинацию.
- На входе
- HEX 3 или 6 знаков
- Результат
- JSON
Соотношение контраста и результаты AA/AAA для обычного и крупного текста.
- Только непрозрачные цвета без alpha.
Проверяется только пара цветов. Это не полный аудит доступности страницы и не проверка шрифта или размеров интерфейса.
Обработка выполняется на вашем устройстве. Файлы и введённые данные не отправляются серверу; после обновления страницы редактор сбрасывается.
Обработка выполняется в памяти браузера. Файлы и текст не отправляются на сервер; сохраните результат до обновления страницы. Принимаются непрозрачные HEX из 3 или 6 знаков. Проверяется только пара цветов; это не полный аудит доступности сайта. Порог оценивается без округления.
Вопросы об инструменте
Можно ли оценить полупрозрачный текст?
Здесь принимаются только непрозрачные HEX-цвета. Сначала определите фактический итоговый цвет на фоне.
Подтверждает ли результат доступность всего сайта?
Нет. Он оценивает только контраст выбранной пары; остальные требования доступности отдельно не проверяются.
Какой контраст у чёрного текста на белом фоне?
Для #000000 и #FFFFFF соотношение равно 21:1. Перестановка цветов не меняет числовой результат.
Какие пороги используются для обычного текста?
Для уровня AA нужно не менее 4,5:1, для AAA — 7:1. Инструмент отдельно показывает прохождение каждого порога.
Какой текст считается крупным?
От 18 pt либо от 14 pt при полужирном начертании. Для него пороги ниже: 3:1 для AA и 4,5:1 для AAA; размеры нужно проверить в своём макете.
Почему округлённое число похоже на порог, но проверка не пройдена?
Соотношение на экране округляется до двух десятичных знаков, а сравнение с порогом использует неокруглённое значение. Например, близкое к 4,5 число может отображаться как 4,50, оставаясь ниже порога.