Проверка контрастности вычисляет коэффициент контрастности WCAG 2.1 между двумя цветами и классифицирует их по порогам AA/AAA как для обычного, так и для крупного текста. Предпросмотр в реальном времени показывает текст, отображаемый выбранными цветами, а кнопка «выбрать фон страницы» берет образец текущей страницы.
Доступность становится все более обязательной — соответствие WCAG требуется по закону во многих юрисдикциях, и даже там, где это не требуется, слабый контраст отталкивает пользователей. Проверка контрастности мгновенно говорит вам, соответствуют ли два цвета стандартам WCAG. Выберите передний и задний фон через палитру цветов или вставьте значения hex; инструмент вычисляет коэффициент контрастности, используя официальную формулу светимости WCAG, и классифицирует его по четырем порогам: AA обычный (≥4.5:1), AA крупный (≥3:1), AAA обычный (≥7:1) и AAA крупный (≥4.5:1). Каждый порог показывает четкий значок прохождения/отказа. Предпросмотр в реальном времени отображает крупный и обычный текст в выбранных цветах, чтобы вы могли видеть фактическое визуальное воздействие. Удобная кнопка берет образец вычисленного цвета фона тела текущей страницы — полезно при проверке того, проходит ли комбинация цветов на реальном сайте. Все работает локально в вашем браузере, без загрузок.
Использует официальную формулу светимости WCAG для вычисления коэффициента контрастности. Результат точен и совпадает с каждым совместимым проверяющим доступность.
Проход/отказ для AA обычного (≥4.5:1), AA крупного (≥3:1), AAA обычного (≥7:1), AAA крупного (≥4.5:1) — все показаны в виде сетки.
Отображает фактический крупный и обычный текст в выбранных цветах, чтобы вы видели визуальное воздействие наряду с числовым коэффициентом.
Одним щелчком берет образец вычисленного цвета фона тела текущей страницы — полезно для тестирования реальных комбинаций.
Введите значение hex или используйте встроенную палитру цветов. Значения синхронизируются двусторонне при редактировании любого из них.
Одноклик поменять местами переднего и заднего фона — полезно при проверке инвертированных тем или состояний наведения.
Перед завершением палитры цветов проверьте каждый цвет текста на его фоне, чтобы обеспечить соответствие WCAG AA — избегает переделки позже.
Используйте «выбрать фон страницы» на живом сайте, затем вставьте фактический цвет текста — найдите нарушения a11y за минуты без открытия Lighthouse.
Когда бренд выбирает цвет, который может не пройти a11y, используйте проверку, чтобы найти ближайший совместимый вариант (более темный/более светлый оттенок).
Убедитесь, что цвета состояний наведения/активности/отключения по-прежнему соответствуют требованиям контрастности, а не только стандартным.
Темные темы часто не пройдут контрастность для серо-серого текста. Проверьте самые темные серые цвета на самых темных фонах, чтобы это поймать.
Щелкните значок контрастности в панели DevSuite Pro. Откроется панель с полями цвета переднего и заднего фона.
Используйте палитру цветов или вставьте значение hex для каждого. Предпросмотр в реальном времени обновляется при изменении цветов.
Большое число (например, 4.8:1) — это коэффициент контрастности. Выше лучше. 3 — это минимум; 4.5 — это цель для обычного текста.
Значки прохождения/отказа для AA и AAA, обычные и большие размеры текста показывают с одного взгляда, что квалифицируется ваша комбинация.
Если не пройдет, подстройте цвета. Затемните передний план или осветлите фон (или наоборот), пока целевой уровень не покажет проход.
Установите DevSuite Pro бесплатно и разблокируйте более 64 инструментов разработчика для вашего браузера.
