Проверка контрастности цветов
Проверьте соотношение контрастности WCAG между цветом текста и фона — просматривайте оценки AA/AAA для обычного текста, крупного текста и элементов UI в реальном времени с предложениями доступных цветов.
Быстрая коричневая лиса
Крупный текст читается комфортно при достаточной контрастности.
Это образец абзаца обычного основного текста. Хорошая контрастность цветов делает ваш контент читаемым для всех, в том числе для людей с плохим зрением или дальтонизмом. образец ссылки.
Мелкий шрифт и подписи сложнее всего читать — они требуют наибольшей контрастности.Всё вычисляется в реальном времени в вашем браузере по формуле относительной яркости WCAG 2.x — без загрузок, без регистрации, абсолютно бесплатно.
О Проверка контрастности цветов
Проверка контрастности цвета измеряет коэффициент контрастности WCAG между цветом текста и цветом фона, а затем оценивает пару по уровням доступности AA и AAA для обычного текста, крупного текста и элементов интерфейса. Коэффициент и все вердикты «пройдено/не пройдено» обновляются в реальном времени при изменении любого цвета.
Реалистичная панель предпросмотра отображает заголовки, основной текст, мелкий шрифт, кнопку и ссылку в выбранном сочетании, чтобы вы могли оценить читаемость на реальном контенте, а не на абстрактных образцах. Если пара не проходит проверку, инструмент предлагает ближайший доступный цвет текста, достигающий порога AA 4,5:1, готовый к применению одним щелчком.
Расчёты следуют формуле относительной яркости WCAG 2.x и полностью выполняются в браузере — ничего не загружается, а проверки бесплатны. Также можно скопировать краткий текстовый отчёт о коэффициенте и оценках для вставки в обзор доступности или pull request.
Как использовать Проверка контрастности цветов
- Задайте цвет текста и цвет фона с помощью палитр или введя значения.
- Ознакомьтесь с коэффициентом контрастности и результатами AA/AAA для обычного текста, крупного текста и элементов интерфейса.
- Изучите живой предпросмотр, чтобы увидеть реальные заголовки, абзацы, кнопки и ссылки в ваших цветах.
- Если пара не проходит проверку, примените предложенный доступный цвет текста или поменяйте местами оба цвета.
- Нажмите «Копировать отчёт», чтобы поделиться коэффициентом и результатами соответствия.