Toolinix – simple online developer tools

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

Усі інструменти
Коефіцієнт контрасту
–

Великий заголовок (24px)

Звичайний текст 14-16px. Більшість текстів інтерфейсу, міток і абзаців належать до цієї категорії, тому вона має найсуворіші вимоги до контрасту.

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

Коефіцієнт контрасту вимірює, наскільки текст відрізняється від тла, за шкалою від 1:1 (однакові) до 21:1 (чорний на білому). WCAG вимагає щонайменше 4.5:1 для звичайного тексту та 3:1 для великого на рівні AA, і 7:1 / 4.5:1 на рівні AAA.

Ця перевірка обчислює коефіцієнт з відносної яскравості точно за визначенням WCAG 2.x, показує результати pass/fail для кожного рівня та демонструє ваші кольори на реальному тексті. Приймаються нотації HEX, RGB та HSL.

Як перевірити контраст кольорів

  1. Введіть колір тексту в HEX, RGB чи HSL або скористайтеся піпеткою.
  2. Введіть колір тла, на якому розміщено текст.
  3. Прочитайте коефіцієнт контрасту та результати AA/AAA.
  4. Коригуйте кольори, поки всі потрібні перевірки не пройдуть, і скопіюйте звіт.

Поради з доступності

  • Великий текст — це від 24px звичайним або близько 18.66px жирним; лише тоді діє поріг 3:1.
  • Перевіряйте стани hover, focus, disabled та placeholder — вони часто використовують світліші відтінки, що не проходять.
  • Компоненти інтерфейсу та іконки потребують щонайменше 3:1 відносно сусідніх кольорів (WCAG 1.4.11).
  • Тестуйте темну тему окремо; інвертовані палітри змінюють кожен коефіцієнт.

Що перевірити перед релізом кольорової палітри

Прохідний коефіцієнт — це базовий рівень, а не фініш. Перевірте, як пара поводиться в реальних станах інтерфейсу.

Тестуйте обидві теми

Пара, що проходить на світлому тлі, може провалитися після інверсії в темній темі. Перевіряйте кожну тему, яку випускаєте.

Перевіряйте інтерактивні стани

Hover, focus, disabled та visited часто використовують світліші відтінки, які непомітно падають нижче 4.5:1.

Не покладайтеся лише на колір

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

Перевіряйте припущення про великий текст

Полегшений поріг 3:1 діє лише від 24px або 18.66px жирним. Перевіряйте фактичний розмір, а не дизайн-токен.

Практичний приклад, крайовий випадок і примітка автора

Практичний приклад

Окремо перевірте основний текст, placeholder і hover-стан, адже вони часто мають різні кольори.

Крайовий випадок

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

Примітка автора

Я використовую числове співвідношення як поріг, а потім перевіряю focus, disabled, dark mode і high contrast у справжньому компоненті.

Пов’язані інструменти

Можливо, тобі також стануть у пригоді ці інструменти.

Конвертер кольорів
Конвертуй HEX, RGB, RGBA і HSL миттєво у браузері.
Інші інструменти
›
Генератор CSS-градієнтів
Генеруйте, парсьте та переглядайте CSS linear і radial gradients онлайн. Безкоштовний генератор градієнтів для розробників і дизайнерів.
Інші інструменти
›
Генератор CSS Text Shadow
Створюйте, переглядайте, парсьте та копіюйте CSS text-shadow з підтримкою кількох шарів.
Інші інструменти
›
Генератор / Парсер CSS Box Shadow
Генеруйте, парсьте та переглядайте CSS box-shadow онлайн. Налаштовуйте offset, blur, spread, color та inset.
Інші інструменти
›

FAQ про контраст кольорів

Який коефіцієнт контрасту потрібен для звичайного тексту?
Щонайменше 4.5:1 для WCAG AA та 7:1 для AAA. Звичайний — це менше за 24px звичайним або 18.66px жирним.
Що вважається великим текстом?
Текст від 24px або жирний від приблизно 18.66px. Великому тексту потрібно 3:1 (AA) чи 4.5:1 (AAA).
Які формати кольорів можна вводити?
HEX на кшталт #1f2937, короткий HEX, rgb()/rgba() та hsl()/hsla(). Альфа-канали ігноруються в розрахунку.
Як обчислюється коефіцієнт?
За формулою відносної яскравості WCAG: (L1 + 0.05) / (L2 + 0.05), де L1 — яскравість світлішого кольору.