Перевірка контрасту – коефіцієнт контрастності WCAG

Перевірка колірного контрасту для доступності

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

Цей інструмент обчислює коефіцієнт контрастності між будь-якими двома кольорами й оцінює його за критеріями WCAG 2.1. Введіть кольори у форматі HEX, RGB або HSL і отримайте результат миттєво.

Рівні контрастності WCAG

Настанови з доступності веб-контенту (WCAG) встановлюють мінімальні коефіцієнти контрастності для читабельності тексту. Є два рівні відповідності:

• WCAG AA, звичайний текст — коефіцієнт контрастності не менше 4,5:1
• WCAG AA, великий текст — коефіцієнт контрастності не менше 3:1 (великий текст: від 18pt або від 14pt напівжирний)
• WCAG AAA, звичайний текст — коефіцієнт контрастності не менше 7:1
• WCAG AAA, великий текст — коефіцієнт контрастності не менше 4,5:1

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

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

1. Введіть колір тексту (переднього плану) — у форматі HEX, RGB або HSL
2. Введіть колір фону в будь-якому підтримуваному форматі
3. Перегляньте коефіцієнт контрастності та попередній вигляд тексту на обраному тлі
4. Перевірте результати «відповідає / не відповідає» для рівнів WCAG AA та AAA
5. Скористайтеся кнопкою «Поміняти місцями», щоб швидко поміняти колір тексту й фону

Коли потрібно перевіряти контраст

• При виборі кольорів тексту та фону для вебсайту або додатка
• При перевірці дизайн-системи на відповідність вимогам доступності
• При тестуванні кольорів кнопок, посилань чи іконок на різних фонах
• При перевірці колірних поєднань у темній темі
• При дотриманні правових стандартів доступності (ADA, EAA, Section 508)

Точно, миттєво та безкоштовно

Інструмент обчислює коефіцієнт контрастності за стандартною формулою відносної яскравості WCAG 2.1. Усі розрахунки виконуються прямо у браузері — жодні дані не надсилаються на сервер.

Потрібно спочатку знайти або перетворити колір? Скористайтеся Піпеткою, щоб витягти колір із зображення, або Конвертером кольорів для перетворення між HEX, RGB та HSL.

Поширені запитання

Який коефіцієнт контрастності вважається достатнім?

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

У чому різниця між WCAG AA та AAA?

AA — базовий рівень відповідності, якому повинна відповідати більшість сайтів і додатків. AAA — підвищений рівень із суворішими вимогами до контрасту, рекомендований для контенту, де максимальна читабельність має вирішальне значення, наприклад для державних або медичних сайтів.

Що вважається великим текстом у WCAG?

Великим вважається текст розміром 18 пунктів (24px) і більше при звичайному накресленні або 14 пунктів (приблизно 18,66px) і більше при напівжирному. Для великого тексту вимоги до контрасту нижчі, оскільки його розмір полегшує сприйняття.

Які колірні формати підтримує цей інструмент?

Ви можете вводити кольори у форматах HEX (наприклад, #1E293B), RGB (наприклад, rgb(30, 41, 59)) або HSL (наприклад, hsl(222, 33%, 17%)). Формат визначається автоматично.

Як розраховується коефіцієнт контрастності?

Коефіцієнт контрастності розраховується за формулою WCAG 2.1: (L1 + 0,05) / (L2 + 0,05), де L1 — відносна яскравість світлішого кольору, а L2 — темнішого. Результат варіюється від 1:1 (контрасту немає) до 21:1 (максимальний контраст — чорний на білому).

Чи працює інструмент на мобільних пристроях?

Так. Перевірка контрасту працює на будь-якому пристрої з сучасним браузером — комп'ютері, планшеті чи телефоні.

Цей інструмент безкоштовний?

Так. ColourPicker.app повністю безкоштовний і не потребує реєстрації.

Чи можна перевіряти контраст для елементів інтерфейсу, а не лише для тексту?

WCAG 2.1 також вимагає мінімальний коефіцієнт контрастності 3:1 для значущих елементів інтерфейсу та графічних об'єктів (критерій успіху 1.4.11). Цей інструмент підходить і для таких перевірок — формула розрахунку та сама.