Проверка контрастности

Проверка контрастности

Вставьте пары переднего плана и фона, по одной в строке — #7a1f2b на #ffffff, #333, #eee или rgb(0, 0, 0) #fff — и коэффициент контрастности WCAG 2 для каждой пары мгновенно возвращается с вердиктом «пройден» или «не пройден» для каждого уровня соответствия. Соотношение варьируется от 1:1 (полное отсутствие контраста) до 21:1 (черное на белом) и рассчитывается на основе относительной яркости точно так, как ее определяют рекомендации, поэтому цифры согласуются с инспекторами браузера и инструментами аудита.

WCAG называет два уровня. АА, наиболее распространенный справочник по законам и контрактам, требует соотношения 4,5:1 для обычного текста и 3:1 для крупного текста. AAA, более строгий целевой показатель, требует 7:1 и 4,5:1. Текст считается большим, начиная с 18 пунктов (около 24 пикселей) при обычном начертании или начиная с 14 пунктов (около 18,7 пикселей) при выделении жирным шрифтом — вот почему заголовок может пройти при таком соотношении, как абзац. В отчете указаны все четыре проверки для каждой пары; переключите вывод на «Компактный» для одной строки на пару, что обеспечивает более быстрое чтение при просмотре всей палитры.

Если паре не хватает AA для обычного текста, включите «Предложить исправление», и инструмент затемнит или осветлит передний план небольшими шагами по яркости, сохраняя его оттенок, пока он не достигнет 4,5: 1, а затем распечатает ближайший проходящий шестнадцатеричный код, готовый для вставки обратно в вашу таблицу стилей.

Все работает в вашем браузере; неизданные палитры брендов никогда не покинут ваше устройство. Цвета могут быть 3- или 6-значными шестнадцатеричными с хешем или без него, rgb() или rgba() или общим именем CSS — 16 основных плюс популярные расширенные. Полный список CSS из 148 имен намеренно не приводится, поэтому записывайте экзотические имена в шестнадцатеричном формате. Линия, не являющаяся цветовой парой, спокойно фиксируется, а остальная часть продолжает обрабатываться.

FAQ