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

Как это работает

Выберите цвет переднего плана и фона с помощью палитр или введите hex-значения напрямую. Инструмент вычисляет относительную яркость каждого цвета по формуле WCAG 2.1 — взвешенную сумму каналов sRGB после гамма-декодирования — и делит более яркую яркость на более тёмную (плюс 0,05 в числителе и знаменателе, чтобы избежать деления на ноль для чистого чёрного). Полученный коэффициент контрастности варьируется от 1:1 (идентичные цвета) до 21:1 (чистый чёрный на чистом белом). Четыре бейджа WCAG показывают pass или fail: AA для обычного текста (≥ 4,5:1), AA для крупного текста (≥ 3:1), AAA для обычного текста (≥ 7:1) и AAA для крупного текста (≥ 4,5:1). Панель живого предпросмотра показывает примерные фразы в обычном и крупном тексте для визуальной проверки. Расчёт полностью выполняется в браузере без запросов к серверу.

Сценарии использования

• Проверка палитры бренда на соответствие доступности перед запуском редизайна сайта
• Выбор цветов кнопок и ссылок, остающихся читаемыми в тёмной или светлой теме
• Соблюдение требований WCAG 2.1 AA или AAA для соответствия Section 508, EN 301 549 или ADA
• Проверка макета от дизайнера, чтобы отметить нечитаемый текст до начала разработки
• Обучение доступности, показывая, как небольшие различия яркости вызывают большие проблемы с контрастом