Безкоштовний інструмент
Перевірка контрасту кольорів
Перевірте, чи комбінація кольорів вашого сайту відповідає стандартам WCAG 2.1/2.2.
Коефіцієнт контрасту
6.29:1
Попередній перегляд
Приклад тексту на вашому фоні
WCAG 2.1/2.2 — Web Content Accessibility Guidelines
| Розмір тексту | AA (мінімум) | AAA (покращений) |
|---|---|---|
| Звичайний текст | Пройдено | Не пройдено |
| Великий текст (18px+ bold) | Пройдено | Пройдено |
WCAG 2.1 Критерій 1.4.3 (AA): мінімум 4.5:1 для тексту, 3:1 для великого тексту.
Що таке контраст кольорів
Коефіцієнт контрасту вимірює різницю яскравості між текстом і фоном — від 1:1 (немає контрасту) до 21:1 (чорне на білому). Недостатній контраст — найпоширеніша помилка WCAG у вебі: він робить контент нечитабельним для людей зі зниженим зором, дальтонізмом, а також будь‑кого з телефоном на сонці. Відповідність порогам контрасту WCAG — базова вимога Європейського акта про доступність (EAA), ADA та стандарту EN 301 549.
Як користуватися перевіркою контрасту
Оберіть або вставте колір тексту та колір фону. Інструмент миттєво обчислює коефіцієнт контрасту за WCAG і показує, чи проходить пара рівні AA та AAA для звичайного й великого тексту. Змінюйте кольори, доки всі перевірки не стануть «пройдено», і використовуйте ці значення у вашому CSS.
Часті запитання про контраст
Який коефіцієнт контрасту вважається достатнім за WCAG?
Для рівня AA (WCAG 2.1/2.2) потрібно щонайменше 4.5:1 для звичайного тексту та 3:1 для великого (24px або 18.66px жирним). Рівень AAA підвищує вимоги до 7:1 і 4.5:1 відповідно.
Чим відрізняються рівні AA та AAA?
AA — стандартний рівень, якого вимагає більшість законів про доступність (EAA, ADA, EN 301 549). AAA — підвищений рівень для максимальної читабельності. Прагніть AA скрізь і AAA там, де це можливо.
Чи діє правило контрасту для великого тексту?
Так, але з нижчим порогом. Текст від 24px (або 18.66px жирним) на рівні AA потребує лише 3:1 (4.5:1 на AAA).
Чи потрібен контраст для іконок та елементів інтерфейсу?
Так. Критерій WCAG 1.4.11 вимагає контрасту 3:1 для інтерактивних елементів (кнопки, межі полів, стан фокуса) та значущої графіки відносно сусідніх кольорів.
Чи безкоштовна ця перевірка контрасту?
Так — інструмент працює повністю у вашому браузері, не потребує реєстрації та безкоштовний для необмеженої кількості перевірок.
Зробіть свій сайт доступним за 3 хвилини
7 днів безкоштовно. Всі 3 продукти. Без кредитної картки. Перші результати — миттєво.