Перейти к содержимому
ToolMug

↑ ↓ — перемещение, Enter — открыть, Esc — закрыть.

Проверка цветового контраста

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

Работает в браузере — введённые данные никуда не загружаются

Контрастность

4,54:1

  • AA обычный текст ≥ 4.5:1Соответствует
  • AA крупный текст ≥ 3:1Соответствует
  • AAA обычный текст ≥ 7:1Не соответствует
  • AAA крупный текст ≥ 4.5:1Соответствует

Крупный заголовок

Обычный текст 16 пикс. должен легко читаться.

Мелкий текст, подписи и сноски.

Кнопка

Ближайший цвет текста, соответствующий AAA: #595959 (7.00:1)

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

  1. Выберите цвета или введите их в формате hex, rgb(), hsl(), oklch() или названием.
  2. Посмотрите коэффициент и четыре результата WCAG в живом предпросмотре.
  3. Если проверка не пройдена, нажмите «Использовать этот цвет» рядом с предложенным вариантом.

Описание параметров

AA
Не менее 4,5:1 для обычного текста и 3:1 для крупного (18 pt / 24 px или 14 pt / около 18,7 px полужирного). Большинство норм и дизайн-систем требуют AA.
AAA
Не менее 7:1 для обычного текста и 4,5:1 для крупного, когда читаемость особенно важна.
Предложенный цвет
Оттенок и цветность сохраняются в пространстве OKLCH, а меняется только светлота, чтобы найти ближайший цвет, который проходит проверку.
Прозрачные цвета
Прозрачный цвет текста измеряется так, как он выглядит поверх выбранного фона.

Как вычисляется коэффициент контрастности

Каждый цвет переводится из sRGB в линейное пространство света, а затем в относительную яркость:

linear = c ÷ 12.92                      if c ≤ 0.04045
linear = ((c + 0.055) ÷ 1.055) ^ 2.4    otherwise   (c is 0–1)
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)

Зелёный вносит наибольший вклад, потому что глаз к нему наиболее чувствителен. Несколько результатов на белом фоне:

Цвет текста Коэффициент Результат
#000000 21 : 1 AAA
#0066cc 5,57 : 1 AA для обычного текста, не AAA для обычного текста
#767676 4,54 : 1 AA для обычного текста
#777777 4,48 : 1 Не проходит AA для обычного текста, проходит для крупного

Определения WCAG приведены в документе Understanding Success Criterion 1.4.3.

Часто задаваемые вопросы

Как рассчитывается контраст?

По формуле WCAG 2.x: (относительная яркость более светлого + 0,05) ÷ (относительная яркость более тёмного + 0,05). Результат от 1:1 до 21:1; чёрный на белом даёт 21:1.

Почему так часто упоминают #767676?

Это самый светлый серый, достигающий 4,5:1 на белом фоне (около 4,54:1), поэтому его часто используют как нижнюю границу для вторичного текста.

Нужно ли проверять значки и границы?

Да. Начиная с WCAG 2.1 элементы интерфейса и графика — границы кнопок, поля ввода и значки — должны иметь контраст не менее 3:1 с соседними цветами.

Конфиденциальность

Этот инструмент работает полностью в браузере. Ваши файлы и текст обрабатываются на вашем устройстве и никогда не загружаются на наши серверы.

Похожие инструменты