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

Оценка контрастного соотношения текстов и фоновых цветов на основе руководства WCAG 2.1.

HEX/RGB/HSL
HEX/RGB/HSL
Все выполняется локально в вашем браузере.

Предпросмотр текста в реальном времени

Большой заголовок (18pt Bold / 24pt Regular)

Это предварительный просмотр стиля крупного заголовка.

Нормальный текст (до 18pt)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

18.6:1

WCAG 2.1 Статус соответствия

WCAG AA требования
Нормальный текст (4.5:1) PASS
Большой текст (3.0:1) PASS
WCAG AAA требования
Нормальный текст (7.0:1) PASS
Большой текст (4.5:1) PASS

WCAG 2.1 Указания

Легко проверяют стандарты контраста, чтобы создать доступные интерфейсы, которые соответствуют положениям раздела 508, ADA и WCAG AA или AAA.

Механизм предложений

Автоматически корректируйте цвета в течение координат HSL, чтобы найти ближайшие альтернативы, которые соответствуют критериям соотношения контраста.

Полностью на стороне клиента

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

Связанные инструменты цвета

HEX RGB HSL конвертер цветов
Конвертируйте цвета и корректируйте координаты светлости.
Пипетка цвета изображения
Извлечение цветовых палитр из дизайнерских макетов.
CSS Конвертер цветов
Конвертировать между форматами CMYK, HSV, RGB, HSL и HEX.

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

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

Ввод
два действительных цвета CSS и необязательный текст предварительного просмотра.
Вывод
коэффициент контрастности с индикаторами прохождения или непрохождения WCAG AA и AAA.
Реальные ограничения
Расчет охватывает только контраст яркости; он не сертифицирует интерфейс и не учитывает рендеринг шрифтов, анимацию, фокус или нецветовые подсказки.
Конфиденциальность и обработка данных
два валидных CSS-цвета и необязательный текст предварительного просмотра обрабатываются в этой вкладке браузера. Convertr не получает и не хранит их; закрытие или перезагрузка страницы очищает рабочее состояние, если только инструмент явно не предлагает локальную загрузку.

Как использовать этот инструмент

  1. Предоставьте два валидных цвета CSS и необязательный текст предварительного просмотра в элементах управления инструмента.
  2. Выберите настройки, которые влияют на коэффициент контрастности с индикаторами прохождения или непрохождения WCAG AA и AAA, затем запустите инструмент.
  3. Проверьте коэффициент контрастности с индикаторами прохождения или непрохождения WCAG AA и AAA перед копированием или загрузкой.

Распространенные причины сбоев

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

Полезный пример

Сравните текст #1f2937 на #ffffff, чтобы проверить его коэффициент для нормального и большого текста.