цвет

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

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

Проверка контрастности цветов: TOEA применяет фиксированную формулу: Коэффициент = (L1 + 0.05) ÷ (L2 + 0.05). Цветовые вычисления выполняются локально в вашем браузере. Работает на 100% локально в вашем браузере, файлы на сервер не загружаются.

Категория
Инструменты на каждый день
Запуски
В вашем браузере
Стоимость
Бесплатно · без регистрации
Доступность
Готово к использованию
TOEA / ЦВЕТОВОЙ ДВИЖОК 01Только в браузере
ЛИСТ ВВОДА / 01

Значения цветов

Значения остаются на этом устройстве. После изменения входного значения выполните расчёт ещё раз.

ЛИСТ РЕЗУЛЬТАТОВ / 02

Коэффициент контрастности

17,74

Обычный текст AA
Pass
Обычный текст AAA
Pass
Крупный текст AA
Pass
Крупный текст AAA
Pass
Итог
AAA for normal and large text
Рабочая формулаКоэффициент = (L1 + 0.05) ÷ (L2 + 0.05)
ДОПУЩЕНИЯ / ПРОЧИТАЙТЕ ПЕРЕД ИСПОЛЬЗОВАНИЕМ
  1. Результаты представляют собой детерминированные математические преобразования sRGB; отображение зависит от вашего монитора и цветового профиля.
  2. Для ввода HEX поддерживается запись #RGB или #RRGGBB. Значения остаются в вашем браузере и не загружаются на сервер.

Какой текст считается крупным

WCAG определяет крупный текст как текст размером не менее 18 пунктов, примерно 24 CSS-пикселей, или 14 пунктов полужирным шрифтом, примерно 18.7 пикселя. Только для текста такого размера допускается более низкий порог 3:1; для основного текста, подписей и меток полей формы требуется 4.5:1 для AA. Коэффициенты варьируются от 1:1 для одинаковых цветов до 21:1 для чёрного на белом. Контуры кнопок, границы полей формы, индикаторы фокуса и значимые значки регулируются отдельным правилом для контраста нетекстовых элементов: он должен составлять 3:1 по отношению к соседним цветам.

Прозрачные цвета и исключения

Проверка работает с непрозрачными цветами. Для полупрозрачного текста или наложений вычислите фактический отображаемый цвет, смешав его с фоном в микшере цветов и используя непрозрачность как вес, а затем проверьте полученный цвет.

Отключённые элементы управления, чисто декоративные элементы и логотипы освобождены от требований к контрасту. Это не относится к тексту-заполнителю в поле формы, поэтому бледно-серые заполнители так часто не проходят проверку.

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

  1. Введите допустимые значения в формате #RGB или #RRGGBB и любой запрошенный процент.
  2. Запустите фиксированную операцию с цветом локально в браузере.
  3. Проверьте образцы цветов и скопируйте результат или значения палитры.

Конфиденциальность и ограничения

Значения цветов остаются на этом устройстве. Результат проверки контрастности — это математическая проверка, а не полная гарантия соответствия WCAG; необходимо также проверить контекст, отображение шрифтов, контраст нетекстовых элементов и состояния элементов пользовательского интерфейса.

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

Микшер цветовГенератор оттенка

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

Как работает проверка контрастности?

Она использует формулу Коэффициент = (L1 + 0.05) ÷ (L2 + 0.05).

Какие форматы HEX поддерживаются?

Используйте трёхзначную запись #RGB или шестизначную запись #RRGGBB в формате sRGB. Альфа-каналы и названия цветов не поддерживаются.

Гарантирует ли результат проверки соответствие требованиям доступности?

Нет. Это математическая проверка контрастности указанных цветов и пороговых значений для текста, а не полная гарантия соответствия требованиям.

Бесплатный инструмент · запусков: в вашем браузере · аккаунт не нужен