Перевірка контрастності кольорів

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

1.00:1
Контраст
Fail
Дуже погано

Звичайний текст

AA (4.5:1)
AAA (7:1)

Великий текст

AA (3:1)
AAA (4.5:1)
Black
#000000
Black
#ff009e

Швидкі виправлення

Aa

Заголовок попереднього перегляду

Швидка бура лисиця перестрибує через ледачого пса

Приклад невеликого тексту (12px)

Текст
#000000
Передумови
#ff009e

Стандарти WCAG

Level AA

Мінімальна контрастність 4,5:1 для звичайного тексту і 3:1 для великого тексту. Вимагається для більшості веб-сайтів.

Level AAA

Покращений коефіцієнт контрастності 7:1 для звичайного тексту та 4,5:1 для великого тексту. Рекомендовано для оптимальної доступності.

Недостатня контрастність для всіх розмірів тексту - не відповідає стандартам WCAG.

Перевірка контрастності кольорів

Розрахуйте коефіцієнт контрастності кольорів тексту та фону.

Виберіть колір за допомогою палітри кольорів для тексту та фону або введіть колір у шістнадцятковому форматі RGB (наприклад, #259 або #2596BE). Ви можете налаштувати повзунок для вибору кольору. У Керівництві з доступності веб-контенту (WCAG) є спеціальний критерій, який допомагає визначити, чи є текст читабельним для зрячих користувачів. Цей критерій використовує певний алгоритм для відображення комбінацій кольорів у порівнянні співвідношення. Використовуючи цю формулу, WCAG стверджує, що співвідношення кольорового контрасту між текстом і фоном 4,5:1 є достатнім для звичайного (основного) тексту, а для великого тексту (18+ пт звичайного або 14+ пт напівжирного шрифту) має бути щонайменше 3:1.

Ключові особливості

  • Розрахунок коефіцієнта контрастності в реальному часі
  • Перевірка на відповідність вимогам WCAG AA та AAA
  • Повзунки HSL для точного налаштування
  • Кілька форматів попереднього перегляду

Розширені інструменти

  • Автоматична фіксація кольору
  • Зразки тексту та фону
  • Розпізнавання назви кольору
  • Результати експорту