UX / UI Високий вплив Просте 20–40 хв

Контраст тексту до тла

Текст повинен мати достатній контраст (WCAG AA 4,5:1).

Що це

Контраст, це різниця світлості між текстом і тлом. Світло-сірий текст на білому тлі має низький контраст і погано читається. WCAG AA вимагає співвідношення щонайменше 4,5:1 для звичайного тексту.

Чому це важливо

Низький контраст виключає користувачів зі слабшим зором та погіршує читабельність для всіх, особливо на мобільному на сонці. Це частий недолік доступності, і Google повідомляє про нього в аудитах.

Як це зробити

1Перевірте співвідношення контрасту (інструмент у браузері або онлайн contrast checker).
2Для звичайного тексту цільтеся на ≥ 4,5:1, для великого тексту ≥ 3:1.
3Уникайте світло-сірого тексту (#ccc, #ddd) на білому тлі.
4Не приглушуйте текст надто низькою прозорістю (opacity).

Приклад

Погано

.text { color: #bbbbbb; background: #ffffff; } /* ~1.9:1 — нечитабельно */

Правильно

.text { color: #374151; background: #ffffff; } /* ~10:1 — OK */

Висновок

Достатній контраст, основа читабельності й доступності. Наша статична евристика попереджає про явно світлі кольори, але точне співвідношення перевірте в браузері. Темніший текст на світлому тлі (і навпаки), безпечний вибір.

Повʼязані теми