Проверка контраста WCAG — коэффициент AA/AAA
Выберите цвет текста и фона, чтобы увидеть коэффициент контраста WCAG и результат AA/AAA для обычного и крупного текста. Шаги: выберите или введите HEX, нажмите Проверить, прочитайте коэффициент и значки, поменяйте местами или попробуйте подсказки. Пример: #767676 на #ffffff ≈ 4,54:1 — AA для обычного текста проходит, AAA для обычного — нет. Цвета остаются в браузере.
Как это работает
Задайте текст и фон через палитру или ввод HEX. Страница переводит sRGB в относительную яркость, вычисляет коэффициент контраста и показывает Проходит/Не проходит для AA и AAA (обычный и крупный текст). Можно поменять цвета местами, скопировать сводку или применить подсказку при низком контрасте.
Правила, которые стоит знать
Контраст WCAG основан на относительной яркости, а не только на оттенке. Сверьтесь с правилами, если коэффициент кажется неожиданным.
- Относительная яркость L вычисляется из каналов sRGB после кривой линеаризации WCAG. Коэффициент = (Lсветлее + 0,05) / (Lтемнее + 0,05).
- Пороги: AA обычный текст 4,5:1, AA крупный 3:1, AAA обычный 7:1, AAA крупный 4,5:1. Один коэффициент питает все четыре значка.
- Поддерживается только непрозрачный sRGB HEX (#RGB или #RRGGBB). Неверный HEX — ошибка; одинаковый передний план и фон дают 1:1 и провал на всех уровнях.
- Конфиденциальность: цвета обрабатываются локально во вкладке — на сервер ничего не отправляется.
Пример
Загрузите пример: передний план #767676 на фоне #ffffff даёт около 4,54:1. AA обычный текст — проходит (≥4,5:1), AA крупный — проходит (≥3:1), AAA обычный — не проходит (≥7:1), AAA крупный — проходит (≥4,5:1). Поменяйте цвета местами, чтобы увидеть изменение коэффициента.
Когда пригодится
- UI-дизайн: проверьте основной текст и подписи на фоне бренда перед сдачей макета.
- Кнопки и чипы: белый на цветном или наоборот — соответствие AA для обычного или крупного текста.
- Тёмная тема: поменяйте светлые/тёмные поверхности и убедитесь, что второстепенный текст держит 4,5:1 или 3:1 для крупного.
Frequently asked questions
Какие пороги контраста в WCAG?
AA для обычного текста — не менее 4,5:1; AA для крупного (18 pt обычный или 14 pt жирный) — 3:1; AAA для обычного — 7:1; AAA для крупного — 4,5:1. На этой странице показаны все четыре значка сразу.
Что считается крупным текстом?
Крупный текст читается легче, поэтому допускается меньший контраст. WCAG считает текст крупным при ≥18 pt обычном или ≥14 pt жирном. В предпросмотре — строка крупного и обычного текста для сравнения.
Отправляются ли мои цвета на сервер?
Нет. Расчёт выполняется полностью в браузере — значения цветов не загружаются.
Как пользоваться подсказками по цветам?
Если пара ниже 4,5:1, инструмент может предложить более светлый или тёмный передний план или фон для AA обычного текста. Это стартовые варианты со смешением к белому/чёрному, а не финальная палитра бренда.
Как это связано с токенами цветов бренда?
Используйте эту страницу для проверки любой пары текст/фон. Для полной палитры бренда с семантическими токенами откройте инструмент brand color token pack; цвета с фото можно взять через извлечение цветов из изображения.
Related tools
Вопросы и отзывы
Что-то неясно, сломано или отсутствует? Напишите сообщение ниже — мы читаем каждую заметку об этих инструментах.