Перевірка контрастності кольорів 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 для кольорів переднього плану та фону та покажіть результати для звичайних розмірів тексту.

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

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

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

Поширені режими збою

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

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

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