WCAG Color Contrast Checker - проверка цвета

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

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

Live Text Предыдущая

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

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

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

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.

Цветный контраст Checker

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

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

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

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

Общие способы неудачи

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

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

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