Проверка цветового контраста измеряет контрастность между цветом переднего плана (текст) и цветом фона и сообщает, соответствует ли эта пара правилам доступа к веб-контенту. Он сообщает одно число от 1:1 до 21:1 и оценивает его пороговые значения WCAG 2.2 для AA и AAA как при нормальном, так и в большом размере текста, а также отдельном пороге 3:1 для компонентов пользовательского интерфейса и графики.
Контраст — это разница в относительной яркости между двумя цветами, а не только в том, насколько они по-разному выглядят. Два цвета могут казаться отчетливыми, но при этом не удается читателям с низким зрением, дефицитом цветного зрения или для тех, кто использует телефон при ярком солнечном свете. Соотношение рассчитывается с помощью точной формулы относительной яркости sRGB, определенной WCAG, поэтому результат соответствует тому, что испытывают инструменты аудита и пользователи чтения с экрана, а не грубое визуальное предположение.
Все работает в вашем браузере. Введите или вставьте цвета как ключевое слово, RGB, HSL или CSS, посмотрите обновление в реальном времени, и, если пара не удастся, вы можете применить предложенный цвет. Ничего не загружается, регистрация не загружается, и инструмент продолжает работать в автономном режиме после загрузки страницы.
Введите или вставьте цвет переднего плана в любом общем формате — #1A1A1A, RGB(26,26,26), HSL(0,0%,10%) или ключевое слово, например, Navy. Образец цвета и родной сборщик позволяют его точно настроить.
Установите фон, на котором находится текст. Если цвет вашего текста имеет прозрачность, он смешивается с этим фоном до того, как измеряется соотношение, соответствующее тому, что на самом деле видят пользователи.
Точный коэффициент контрастности отображается со значками сдачи или сбоя для AA и AAA в обычных и больших размерах, а также с проверкой UI-Component 3: 1, рядом с живым образцом текста на вашем фоне.
Если комбинация не удалась, примените предложенный доступный цвет — инструмент подталкивает текст светлее или темнее, пока не очистит ваш целевой уровень, вы можете скопировать фиксированное значение.
использует официальные формулы относительной яркости и коэффициента контрастности sRGB из WCAG 2.2, поэтому число соответствует формальным аудитам до двух десятичных знаков, а не приблизительно
Каждый результат оценивается по отношению к AA (4.5:1), AAA (7:1), пороговым значениям большого текста (3:1 и 4.5:1) и правилу 3:1 для компонентов, не связанных с текстовым интерфейсом, и графических объектов
Реальный образец нормального и большого текста, отрисовываемого на выбранном вами фоне, чтобы вы могли судить о читабельности вместе с числовым баллом
Когда пара не работает, инструмент обходит цвет текста светлее или темнее в HSL, пока он не соответствует вашему целевому соотношению, и не предложит проходное значение, которое вы можете применить в один клик
Pick colors and convert between HEX, RGB, and HSL formats
Create beautiful CSS gradients with live preview
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
0 comments
No comments yet. Be the first to share your thoughts!