Світло-сірий текст на білому тлі може виглядати елегантно та мінімалістично з першого погляду — і бути абсолютно нерозбірливим для користувачів із вадами зору, яскравим сонячним світлом на екрані чи просто звичайним напруженням очей у кінці робочого дня. Кольоровий контраст є одним із найбільш «технічних» критеріїв доступності — існують точні цифри, яким потрібно відповідати, — але його також найпростіше перевірити та виправити заздалегідь.

Коротко — що охоплює цей посібник

  1. Яке співвідношення вимагає WCAG
  2. Чому великий текст має менший контраст
  3. Як на практиці перевірити контрастність
  4. Як заздалегідь вибрати доступну палітру кольорів

Які співвідношення потрібні WCAG

WCAG визначає коефіцієнт контрастності як число від 1:1 (повна відсутність контрасту — однаковий колір) до 21:1 (максимально можливий контраст — чистий чорний на чисто білому). На рівні АА (обов’язковий рівень у більшості країн, включно з Ізраїлем), вимогою є співвідношення принаймні 4.5:1 між звичайним текстом і фоном за ним. При більш суворому ААА рівень, вимога підвищується до 7:1.

Чому великий текст має менший контраст

Великий текст залишається читабельним навіть із низьким контрастом, тому WCAG встановлює простіший поріг: 3:1 на рівні AA (замість 4,5:1), і 4.5:1 на рівні AAA (замість 7:1). «Великий текст» визначається як текст розміром 18 пунктів або більше (приблизно 24 пікселів) або 14 пунктів або більше (приблизно 18,7 пікселів), якщо він виділений жирним шрифтом. Великі заголовки, наприклад, можуть «дозволити» трохи менший контраст, ніж звичайний основний абзац, і все одно відповідають вимогам.

Ілюстративна діаграма Comparing contrast ratios Three text-on-background examples with different contrast ratios Contrast Ratio Between Text and Background Sample text 1.8:1 — ✕ fails Sample text 7.1:1 — ✓ meets AAA too Sample text 5.4:1 — ✓ meets level AA Regular text: at least 4.5:1 · Large text (24px+, or 18.7px bold): at least 3:1 Tools like the WebAIM Contrast Checker give you the exact ratio before you finalize a color palette
Три приклади тексту на фоні: занадто низьке співвідношення (1,8:1) не відповідає навіть базовому рівню; інші два співвідношення відповідають вимогам АА та ААА відповідно.

Як перевірити коефіцієнт контрастності на практиці

Немає необхідності розраховувати його вручну — такі безкоштовні інструменти, як WebAIM Contrast Checker, дозволяють вводити коди кольору тексту та фону й одразу отримувати точне співвідношення та оцінку «пройшов/не пройшов» для кожного рівня. Варто перевіряти не лише текст на суцільному фоні, а й текст на фонових зображеннях або градієнтах — де контраст між різними ділянками одного зображення може відрізнятися, тому краще перевірити найбільш «проблемне» місце.

💡 Практична порада

Не лише до тексту: та сама вимога до контрастності (з більш простим порогом, 3:1) також застосовується до графічних компонентів інтерфейсу користувача, таких як контури полів форм, функціональні значки та межі кнопок, а не лише до літер.

Як заздалегідь вибрати доступну палітру кольорів

Найефективніший підхід — перевірити контраст на етапі розробки шаблону, а не в кожному документі окремо. Вибираючи фірмові кольори для заголовків, основного тексту та посилань, варто заздалегідь підтвердити, що кожна комбінація тексту та фону, яку ви фактично використовуєте, відповідає принаймні 4,5:1. Таким чином, кожен новий документ, створений на основі шаблону, автоматично «успадковує» правильний контраст замість того, щоб перевіряти кожен документ окремо після того, як він уже був написаний.

Хочете знати, чи ваші документи відповідають вимогам до контрастності?

Наш інструмент перевіряє контрастність кольорів під час автоматичного сканування кожного PDF-файлу на вашому сайті.

Відскануйте свій сайт безкоштовно ←