ГоловнаІнструменти дизайнуПеревірка контрасту

Перевірка контрасту

Інструмент перевірки контрастності обчислює коефіцієнт контрастності WCAG 2.1 між кольором тексту та кольором фону й показує, чи відповідає пара рівням AA і AAA для звичайного та великого тексту.

The quick brown fox
Small text sample — 14px regular weight

Про цей інструмент

Інструмент перевірки контрастності обчислює коефіцієнт контрастності WCAG 2.1 між кольором тексту та кольором фону й показує, чи відповідає пара рівням AA і AAA для звичайного та великого тексту.

Як користуватися

  1. Введіть або виберіть колір тексту.
  2. Введіть або виберіть колір фону (підходять hex-значення, зокрема скорочені тризначні).
  3. Перегляньте коефіцієнт контрастності та результати AA/AAA для звичайного й великого тексту.
  4. Змінюйте будь-який із кольорів, доки потрібний рівень не буде досягнуто.

Корисно знати

  • WCAG 2.1 AA вимагає коефіцієнта контрастності щонайменше 4.5:1 для звичайного тексту та 3:1 для великого.
  • WCAG 2.1 AAA вимагає щонайменше 7:1 для звичайного тексту та 4.5:1 для великого.
  • Великий текст — це щонайменше 18 pt (24 px) звичайного накреслення або 14 pt (близько 18.66 px) жирного.
  • Коефіцієнт контрастності коливається від 1:1 (однакові кольори) до 21:1 (чорне на білому).
  • Коефіцієнт обчислюється з відносної яскравості кожного кольору за формулою WCAG.

Працює повністю у вашому браузері — нічого з того, що ви вводите, не завантажується й не зберігається.

Поширені запитання

Який коефіцієнт контрастності потрібен для доступності?

Для рівня WCAG 2.1 AA звичайному тексту потрібно щонайменше 4.5:1, великому — щонайменше 3:1. Рівень AAA підвищує ці вимоги до 7:1 і 4.5:1.

Чи доступний білий текст на зеленому?

Залежить від відтінку. Багато яскравих зелених із білим текстом не проходять AA; темніші зелені зазвичай проходять. Введіть свої точні hex-значення, щоб перевірити.

Що вважається великим текстом у WCAG?

Текст розміром щонайменше 18 пунктів (24 px) звичайного накреслення або щонайменше 14 пунктів (близько 18.66 px) жирного.

Чи стосуються вимоги WCAG до контрасту кнопок та іконок?

Критерій успішності WCAG 2.1 1.4.11 вимагає контрасту щонайменше 3:1 для компонентів інтерфейсу та змістовної графіки відносно їхнього оточення.