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

Перевірка кольорів тексту й фону за WCAG 2.1 і APCA з переглядом наживо й підказкою кольору, що проходить, — просто в браузері.

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

Що це

Цей інструмент вимірює контраст між кольором тексту й кольором фону за двома стандартами: класичним співвідношенням WCAG 2.1 з рівнями AA і AAA та новішою оцінкою APCA. Перегляд наживо із заголовком, основним текстом, кнопкою й бейджем показує пару в заданих розмірі й товщині шрифту. Коли пара не проходить, інструмент пропонує найближчий колір, що проходить.

Основні можливості

  • Співвідношення контрасту WCAG 2.1 з AA і AAA для звичайного й великого тексту.
  • Оцінка APCA Lc для темного тексту на світлому й світлого на темному.
  • Перегляд наживо з вашими розміром і товщиною шрифту.
  • Запропонований виправлений колір, що досягає потрібного контрасту, — застосовується одним кліком.
  • Симуляція зору: протанопія, дейтеранопія, тританопія й відтінки сірого.

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

  1. Введіть колір тексту й колір фону.
  2. Задайте розмір і товщину шрифту, які використовуєте.
  3. Прочитайте результати WCAG і APCA та перевірте перегляд.
  4. Застосуйте запропоноване виправлення, якщо пара не проходить, а потім скопіюйте кольори чи код.

Коли корисно

  • Перевірити, що колір бренду читається як текст на білому.
  • Виконати вимоги доступності для публічного сайту.
  • Побачити, як пару кольорів бачать люди з дальтонізмом.

Конфіденційність та обмеження

Ваші дані

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

Обмеження

  • APCA поки що чернетка для майбутніх версій WCAG; сьогоднішні юридичні вимоги зазвичай посилаються на WCAG 2.1.
  • Симуляція зору наближена й не може точно показати, що бачить кожна людина.

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

WCAG чи APCA — на що орієнтуватися?

Саме WCAG 2.1 сьогодні зазвичай вимагають закони й аудити, тож пройти треба його. APCA точніший для сучасних екранів і тонких шрифтів — корисна друга перевірка.

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

У WCAG — щонайменше 24 px звичайного чи близько 18.7 px жирного. Для великого тексту на рівні AA досить 3:1 замість 4.5:1.

Як працює запропоноване виправлення?

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