Проверка цветового контраста

Проверка цветового контраста измеряет контрастность между цветом переднего плана (текст) и цветом фона и сообщает, соответствует ли эта пара правилам доступа к веб-контенту. Он сообщает одно число от 1:1 до 21:1 и оценивает его пороговые значения WCAG 2.2 для AA и AAA как при нормальном, так и в большом размере текста, а также отдельном пороге 3:1 для компонентов пользовательского интерфейса и графики.

Контраст — это разница в относительной яркости между двумя цветами, а не только в том, насколько они по-разному выглядят. Два цвета могут казаться отчетливыми, но при этом не удается читателям с низким зрением, дефицитом цветного зрения или для тех, кто использует телефон при ярком солнечном свете. Соотношение рассчитывается с помощью точной формулы относительной яркости sRGB, определенной WCAG, поэтому результат соответствует тому, что испытывают инструменты аудита и пользователи чтения с экрана, а не грубое визуальное предположение.

Все работает в вашем браузере. Введите или вставьте цвета как ключевое слово, RGB, HSL или CSS, посмотрите обновление в реальном времени, и, если пара не удастся, вы можете применить предложенный цвет. Ничего не загружается, регистрация не загружается, и инструмент продолжает работать в автономном режиме после загрузки страницы.

Контрастная формула WCAG 2 - это соотношение относительной яркости, и ее пороговые значения - это то, против чего измеряются аудиты доступности и большинство юридических требований, поэтому это правильное число для проектирования до. Также известно, что она несовершенна: она может быть щедрой к светлому тексту на темном фоне и резкой на некоторых средних тональных парах, поэтому алгоритм-преемник, APCA, существует и тестируется для будущих версий. Большой текст имеет нижнюю полосу, а большие средства 18pt, или 14pt, когда жирным шрифтом, что составляет около 24px и 18,66px. Нетекстовые элементы рассматриваются отдельно 1.4.11 в 3:1, и это правило, которое чаще всего пропускают: кнопки значков, границы ввода и кольца фокусировки все это нужно, и дизайн может пройти на каждом абзаце и все еще не работать на полях формы.