Помилка підключення. Спробуйте ще раз.

Перейти до вмісту
SEO Tools
Довідка та документація
UX / UI Високий вплив Просте 20–40 хв

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

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

Що це

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

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

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

Як це зробити

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

Приклад

Погано
.text { color: #bbbbbb; background: #ffffff; } /* ~1.9:1 — нечитабельно */
Правильно
.text { color: #374151; background: #ffffff; } /* ~10:1 — OK */

Висновок

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

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