Бесплатная проверка цветового контраста WCAG: проверьте цвета текста и фона на соответствие AA и AAA в вашем браузере. Введите шестнадцатеричные или RGB-значения, посмотрите коэффициент контрастности и мгновенно пройдите/не пройдет. Нет входа, нет загрузки.
Он вычисляет коэффициент контрастности WCAG 2.x между цветом переднего плана (текста) и цветом фона, используя относительную яркость sRGB. Вы получаете числовое соотношение (например, 4,52:1) плюс пороги «прошел/не прошел» для порогов WCAG AA и AAA для обычного и большого текста. Это помощник по контролю качества дизайна, а не полный автоматизированный аудит доступности всего вашего сайта.
Шестнадцатеричный (#RGB, #RRGGBB, #RRGGBBAA), rgb() и rgba(). Вставьте значения палитры бренда из токенов Figma, переменных CSS или проектной документации. Короткий шестнадцатеричный код, например #fff, перед вычислением яркости расширяется до #ffffff.
AA — это общий юридический стандарт и базовый уровень продукта: 4,5:1 для обычного текста, 3:1 для крупного текста. AAA более строгий: 7:1 обычный, 4,5:1 большой. Многие маркетинговые сайты нацелены на AA для основного текста, а AAA — только на главные заголовки или пользовательский интерфейс с высоким уровнем риска. Этот инструмент показывает и то, и другое, поэтому вы можете выбрать защитную цель с помощью дизайна.
Большой текст имеет стандартную толщину не менее 18 пунктов (24 пикселей CSS) или жирный шрифт не менее 14 пунктов (около 18,66 пикселей CSS). Кнопки, подписи и мелкий шрифт часто не соответствуют требованиям AA, даже если заголовки проходят проверку — проверяйте каждый размер, который вы отправляете, а не только образец H1.
Нет. Анализ и расчет яркости полностью выполняются в вашем браузере. Неизданные эксперименты с палитрой и цвета клиентского соглашения о неразглашении останутся на вашем устройстве. По завершении очистите поля на общих машинах.
Значения rgba и #RRGGBBAA анализируются, но контрастность оценивается на непрозрачных каналах sRGB — программа проверки не выполняет альфа-композицию текста на фотографическом фоне. Для текста на изображениях сначала попробуйте эффективный цвет позади копии или используйте сплошное наложение, а затем повторите проверку.
Да. Бесплатно, без входа в систему для получения основного соотношения и пути «прошел/не прошел».