ImageColorPicker.com

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

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

Перевір свої кольори

Перевірте комбінації кольорів, щоб переконатися, що вони відповідають стандартам доступності WCAG для читабельності тексту.

19.81 до 1
Контраст
AAA
Результат для тексту
Супер

Порівняно: #000000 на #E7FDF9

Текст

16px, Звичайний (400)

Рахується як звичайний текст.

  • AA (WCAG 1.4.3): принаймні 4.5:1

    Пройдено

  • AAA (WCAG 1.4.6): принаймні 7:1

    Пройдено

Компоненти інтерфейсу та графіка

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

  • AA (WCAG 1.4.11): принаймні 3:1

    Пройдено
19.81 до 1. Текст: відповідає AA, відповідає AAA. Компоненти інтерфейсу: відповідає.
Як це перевіряється
Порівнювані кольори (після змішування)
Текст #000000 на фоні #E7FDF9
Відносна яскравість
Текст 0.0000, фон 0.9407
Формула
(L1 + 0.05) / (L2 + 0.05) де L1 — яскравість світлішого кольору, а L2 — темнішого.
Точне співвідношення
19.8158 до 1, показано як 19.81 до 1. Показане значення обрізане, а не округлене, тому воно ніколи не виглядає краще, ніж є. Саме точне значення порівнюється з вимогою.

Розмір тексту: 16px, Звичайний (400)

Рахується як звичайний текст. Великий текст — мінімум 24px (18pt), або щонайменше 18.67px (14pt) коли жирний (вага 700 або більше). Розміри показано відсіченими, не округленими.

Рахується як звичайний текст. Великий текст — мінімум 24px (18pt), або щонайменше 18.67px (14pt) коли жирний (вага 700 або більше). Розміри показано відсіченими, не округленими.

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

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

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

Текст
#000000
Фон
#e7fdf9

Стандарти WCAG

Рівень AA

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

Рівень AAA

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

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

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

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

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

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

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

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

Часті запитання

Для відповідності WCAG AA звичайний текст потребує мінімального коефіцієнта контрастності 4,5:1, а великий текст (18pt або 14pt напівжирним) потребує 3:1.

WCAG AAA вимагає вищих коефіцієнтів контрастності: 7:1 для звичайного тексту та 4,5:1 для великого тексту, тоді як AA вимагає відповідно 4,5:1 і 3:1.

Скористайся функцією автоматичного виправлення, щоб налаштувати текст або фон зі збереженням задуму дизайну, або вручну відрегулюй кольори повзунками HSL, де візуальні індикатори показують оптимальні зони для відповідності AA/AAA.

Зелені зони та позначки AA/AAA показують оптимальні діапазони для відповідності WCAG. Підказки напрямку (Світліше/Темніше) допоможуть досягти кращого контрасту залежно від твоєї поточної комбінації кольорів.

Так, можна ввести будь-який HEX-код кольору або скористатися вибором кольору, щоб обрати власні кольори. URL оновлюється автоматично, тож ти можеш поділитися конкретними комбінаціями кольорів.