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

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

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

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

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

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

AA (3:1)
AAA (4.5:1)
White
#ffffff
Deco
#d2da97

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

Aa

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

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

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

Текст
#ffffff
Фон
#d2da97

Стандарти WCAG

Level AA

Мінімальний коефіцієнт контрастності 4.5:1 для звичайного тексту та 3:1 для великого тексту. Необхідно для більшості вебсайтів.

Level AAA

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

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

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

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

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

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

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

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

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