Перевірка контрасту кольорів за WCAG
Недостатній контраст тексту й фону робить сайт нечитабельним для людей зі слабким зором. Оберіть колір тексту й фону — інструмент миттєво покаже коефіцієнт контрасту й чи відповідає він вимогам WCAG 2.2 (рівні AA та AAA).
Великий текст — 24px, жирний
Звичайний текст — 16px. Доступність сайту починається з того, щоб текст можна було прочитати: контраст із фоном має бути достатнім навіть для людей зі слабким зором.
Дрібний текст — 13px (виноски, підписи).
- AA (звичайний)Пройденопотрібно 4.5:1
- AA (великий)Пройденопотрібно 3:1
- AAAНе пройденопотрібно 7:1
Контраст 5.12:1. Пройдено 2 із 3 рівнів: AA (звичайний) — пройдено; AA (великий) — пройдено; AAA — не пройдено.
Великим вважається текст від 18pt (24px) або від 14pt (18.66px) жирним — для нього достатньо 3:1. Розрахунок відбувається у вашому браузері за формулою WCAG.
Які вимоги WCAG до контрасту
Звичайний текст: мінімум 4.5:1 (AA), 7:1 (AAA). Великий текст (від 18pt або 14pt жирний): 3:1 (AA). Це критерій 1.4.3.
Як виправити недостатній контраст
Затемніть текст або освітліть фон, поки коефіцієнт не досягне потрібного рівня. Не покладайтесь лише на колір для передачі змісту.
Часті запитання
4.5:1 для звичайного тексту (AA), 3:1 для великого, 7:1 для AAA.
Рівні відповідності WCAG: AA — стандарт для більшості сайтів, AAA — підвищений.
Змінюйте яскравість тексту/фону, доки коефіцієнт не досягне 4.5:1.
Контраст — лише одне з 90+ правил. Перевірте весь сайт
Безкоштовний експрес-аудит покаже порушення WCAG за критичністю — за 2 хвилини, без реєстрації.
Перевірити сайт