Що вимірює перевірка контрасту?
Перевірка контрасту порівнює відносну люмінанс переднього та заднього плану. Результат відображається як співвідношення від 1:1 — коли кольори візуально однакові — до 21:1 — коли чорний і білий мають максимальний контраст.
Цей інструмент повідомляє про проходження або провал за WCAG-стилем для звичайного та великого тексту. Він корисний для ранніх дизайн-рішень, станів компонентів, токенів теми та швидких перевірок перед більш повним аудитом доступності.
Як читати результати
| Check | Мінімальне співвідношення | Meaning |
|---|---|---|
| AA для звичайного тексту | 4.5:1 | Звичайна ціль для основного тексту. |
| AA для великого тексту | 3:1 | Застосовується до більшого або товстішого тексту, де форми літер легше читати. |
| AAA для звичайного тексту | 7:1 | Більш сувора ціль для звичайного тексту у високодоступних контекстах. |
| AAA для великого тексту | 4.5:1 | Більш сувора ціль для великого тексту. |
Що цей інструмент не доводить
Співвідношення — це сильний сигнал, але це не повний аудит доступності. Справжня читабельність також залежить від типографіки, товщини шрифту, станів hover/focus, відключених станів, оточуючих кольорів, якості екрана та того, чи з’являється текст поверх зображень або градієнтів.
- Прозорість і градієнти потребують окремої перевірки.
- Малі іконки та тонкі штрихи можуть вимагати більшого контрасту, ніж поруч розташований текст.
- Фірмові кольори можуть проходити в одній комбінації й не проходити в іншій.
- Контраст сканування QR і контраст читабельності тексту пов’язані, але це не одна й та сама перевірка.
Способи поліпшити слабкий контраст
Затемнити передній план
Для світлих фонових кольорів наблизьте колір тексту до більш темного нейтрального відтінку або більш насиченого фірмового кольору.
Освітлити фон
Невеликі зміни фону можуть зробити фірмовий колір придатним, не змінюючи переднього токена.
Збільшити розмір або товщину тексту
Для великих або товстіших шрифтів поріг AA нижчий, але все одно потрібна достатня візуальна відокремленість.
Перевіряйте всі стани
Стан hover, focus, disabled, selected та error часто використовують інші парі кольорів.
Поширені запитання
Чи це повний аудит відповідності WCAG?
Ні. Він обчислює пороги контрасту за WCAG-стилем для пар кольорів. Повний огляд також перевіряє макет, поведінку клавіатури, семантику, стани фокусу, альтернативи тексту та реальну відтворену типографіку.
Що вважається великим текстом?
Керівні вказівки WCAG трактують великий текст приблизно як 18 пт звичайного тексту або 14 пт жирного тексту і вище. У веб-проєкті перевіряйте фактичний відтворений розмір і вагу, а не лише ярлик у дизайні.
Чи можу я використовувати це для прозорих кольорів?
Цей компактний перевірник використовує непрозорі sRGB-кольори. Якщо у вашому інтерфейсі використовуються прозорості, спочатку змішайте фінально відтворений передній і задній плани, а потім перевірте отриману пару.
Чи означає проходження AA, що дизайн завжди читається?
Не завжди. Дуже тонкі шрифти, маленькі підписи інтерфейсу, захаращені фони та низькоякісні дисплеї все ще можуть ускладнювати читання тексту. Розглядайте співвідношення як один важливий сигнал.
Чи це те саме, що контраст для QR-коду?
Ні. Контраст QR-коду впливає на надійність сканера, тоді як цей інструмент зосереджений на порогах читабельності тексту. Математика пов’язана, але практичне рішення інше.