Создать аккаунт
Интерфейсы и CSSРаботает в браузере

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

Сравните цвет текста и фона, получите числовой коэффициент и проверьте соответствие уровням AA и AAA для текста.

  • HEX 3 или 6 символов
  • WCAG text thresholds
  • Живой preview
Онлайн-инструмент

Попробуйте инструмент

Добавьте данные, выберите нужные параметры и получите готовый результат.

Исходные данные

Результат

Пример текста

17.74:1

  • AA normal text: ✓
  • AA large text: ✓
  • AAA normal text: ✓

Ваши данные остаются здесь

Текст и выбранные файлы обрабатываются в текущем браузере и не отправляются на сервер для получения результата.

Проверено: 2026-07-17
01

Как пользоваться

  1. 1

    Введите цвет текста и цвет фона в HEX.

  2. 2

    Запустите расчёт коэффициента.

  3. 3

    Проверьте результаты AA и AAA для обычного и крупного текста.

02

Что умеет инструмент

  • Трёх- и шестизначные HEX-значения с символом # или без него.
  • Расчёт relative luminance и contrast ratio.
  • Проверка AA для обычного и крупного текста и AAA для обычного текста.
03

Когда пригодится

  • Проверка текста кнопки на выбранном фоне.
  • Подбор доступной пары цветов для интерфейса.
  • Быстрая проверка design token перед внедрением.
04

Что происходит внутри

Коэффициент 1:1 означает одинаковую яркость, максимальный контраст — 21:1.

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

05

Вопросы и ответы

Какой коэффициент нужен для обычного текста?

Для уровня AA обычно требуется не менее 4.5:1, а для AAA — 7:1.

Можно проверить прозрачный цвет?

Нет. Нужно указать итоговые непрозрачные HEX-цвета текста и фона.