WCAG Color Contrast Checker - колірний контролер

Evaluate the contrast ratio of text and background colors based on WCAG 2.1 guidelines. Instantly generate accessible color adjustments.

HEX/RGB/HSL
HEX/RGB/HSL
Все працює локально в вашому браузері.

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

Велика головка (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 АА вимоги
Нормальний текст (7.0:1) PASS
Великий текст (4.5:1) PASS

WCAG 2.1 Інструкція

Простіше перевіряти стандарти контрасту, щоб побудувати доступні інтерфейси, які відповідають напрямкам розділу 508, ADA та WCAG AA або AAA.

Мотор пропозицій

Автоматично кольори поступово піднімаються по координатах HSL, щоб знайти найближчі альтернативи, які відповідають критеріям контрастного відношення.

Повний клієнт-страна

Комп'ютації виконуються локально в контексті браузера. жодних кольорів, файлів або телеметричних координатів не передається на наші сервери.

Співвідношення кольорових інструментів

HEX RGB HSL кольоровий конвертер
Перетворюйте кольори і адаптуйте координати світлості.
Фотографії Color Picker
Витягніть кольорові палети з дизайнерських мокпупів.
Цветний конвертер CSS
Конвертуйте між форматами CMYK, HSV, RGB, HSL і HEX.

Колірний контраст Checker

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

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

Як використовувати цей інструмент

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

Загальні способи невдачі

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

Корисний приклад

Порівняйте текст #0f2937 на #ffffff, щоб переглянути його співвідношення для звичайного і великого тексту.