Отчет о соответствии WCAG

• Мгновенный отчет о соответствии всей палитры: отчет о соответствии WCAG вычисляет коэффициенты контрастности для каждой пары переднего плана и фона в вашей палитре мгновенно по мере ввода текста. Не нужно нажимать кнопку — добавьте или измените любой цвет, и весь отчет обновляется в режиме реального времени, показывая соответствие/несоответствие всем критериям WCAG 2.1.
• Комплексный охват критериев: каждая цветовая пара оценивается по критерию успеха WCAG 2.1 1.4.3 (Минимальный контраст — AA), 1.4.6 (Увеличенный контраст — AAA) и 1.4.11 (Нетекстовый контраст — AA). Результаты показаны для обычного текста, крупного текста и компонентов пользовательского интерфейса с четким индикатором «прошел/не прошел» для каждого из них.
• 100% приватная обработка в браузере: все вычисления контрастности происходят локально в вашем браузере с использованием JavaScript. Значения вашей цветовой палитры никогда не покидают ваше устройство и никогда не отправляются на какой-либо сервер — это абсолютно безопасно для фирменных цветов бренда и клиентских проектов.
• Бесплатно и без регистрации: создавайте неограниченное количество отчетов о соответствии WCAG без регистрации, подписки и ограничений на использование. Инструмент навсегда полностью бесплатен, и никакая реклама не блокирует интерфейс.

• Проверка системы дизайна: специалисты по поддержке системы дизайна используют отчет о соответствии WCAG для проверки того, что каждый цветовой токен в системе соответствует стандартам доступности. Введите полную палитру — текст, фон, акцент, ссылку, успех, ошибку и предупреждение — и получите полную матрицу соответствия для всех комбинаций.
• Разработка тем CSS. Разработчики внешнего интерфейса используют отчет о соответствии WCAG, чтобы перед развертыванием убедиться, что их светлые и темные цветовые палитры тем соответствуют требованиям доступности. Отчет выявляет проблемы контрастности на ранней стадии, предотвращая снижение доступности в рабочей среде.
• Аудит доступности. Аудиторы доступности используют отчет о соответствии WCAG, чтобы быстро оценить цветовой контраст всей системы дизайна. Комплексный попарный анализ точно определяет, какие цветовые комбинации не работают и на каком уровне, что упрощает процесс исправления.
• Документация о соответствии: консультанты по доступности используют отчет о соответствии WCAG для создания документации для отчетов VPAT (добровольный шаблон доступности продукта) и заявлений о соответствии доступности. Функция копирования в буфер обмена позволяет легко включать результаты в формальную документацию.
• Дизайн бренда и маркетинга. Дизайнеры бренда используют отчет о соответствии требованиям WCAG, чтобы гарантировать, что в маркетинговых материалах, целевых страницах и руководствах по бренду используются цветовые комбинации, соответствующие стандартам доступности, без ущерба для идентичности бренда.
• Платформы SaaS и электронной коммерции: команды разработчиков используют отчет о соответствии WCAG, чтобы убедиться, что вся цветовая система пользовательского интерфейса — от кнопок и ссылок до состояний форм и оповещений — обеспечивает достаточный контраст для всех пользователей, снижая юридические риски и повышая коэффициенты конверсии для пользователей с нарушениями зрения.

Отчет о соответствии WCAG оценивает, соответствуют ли цветовые комбинации в палитре дизайна требованиям контрастности, определенным в Руководстве по доступности веб-контента (WCAG) 2.1. Учитывая набор цветов — обычно текста, фона, акцентов, ссылок и других цветов пользовательского интерфейса — в отчете вычисляет коэффициент контрастности для каждой значимой пары переднего плана и фона и сравнивает его с пороговыми значениями WCAG для обычного текста (AA: 4,5:1, AAA: 7:1), большого текста (AA: 3:1, AAA: 4,5:1) и компонентов пользовательского интерфейса (AA: 3:1). Результатом является комплексная матрица, показывающая, какие именно цветовые комбинации соответствуют или не соответствуют каждому критерию.

1. Введите свою цветовую палитру: начните с четырех основных цветов — текста, фона, акцента и ссылки — вводя шестнадцатеричные значения или используя палитру цветов. При необходимости добавьте дополнительные цвета, такие как заголовок, граница, успех, ошибка и предупреждение. Вы также можете загрузить образец палитры, чтобы увидеть, как работает отчет.
2. Рассчитываются коэффициенты контрастности: инструмент преобразует каждый цвет в его компоненты sRGB и рассчитывает относительную яркость по формуле WCAG 2.1. Для каждой уникальной пары передний план-фон коэффициент контрастности рассчитывается как (L₁ + 0,05) / (L₂ + 0,05), где L₁ — более низкая яркость. Результатом является значение от 1:1 (нет контраста) до 21:1 (максимальный контраст).
3. Отчет создается мгновенно: каждая цветовая пара оценивается по всем пяти критериям WCAG (обычный текст AA и AAA, крупный текст AA и AAA, компоненты пользовательского интерфейса AA). В отчете показана общая оценка соответствия, рейтинги для каждой пары и рекомендации по использованию для пар, которые не соответствуют всем критериям. Вся обработка происходит полностью в вашем браузере — никакие данные никогда не загружаются.

• Обычный текст — AA (4,5:1): минимальный коэффициент контрастности, необходимый для основного текста размером менее 18 пунктов (или 14 пунктов жирным шрифтом). Это наиболее распространенное требование доступности, предусмотренное большинством законов о доступности во всем мире, включая ADA, EN 301 549 и AODA.
• Обычный текст — AAA (7:1): улучшенный коэффициент контрастности для обычного текста, который обеспечивает лучшую читаемость для пользователей с нарушениями зрения. AAA рекомендуется для важного контента, но не требуется для общего соответствия WCAG.
• Крупный текст — AA (3:1): требования к уменьшению контрастности для текста, выделенного жирным шрифтом не менее 18 или 14 пунктов, поскольку более крупные символы легче различить. Крупный текст, соответствующий соотношению 3:1, считается приемлемым для соответствия требованиям AA.
• Крупный текст — AAA (4,5:1): повышенные требования к контрастности для крупного текста. Крупный текст с соотношением сторон 4,5:1 соответствует стандартам AAA.
• Компоненты пользовательского интерфейса — AA (3:1): применяется к графическим объектам и компонентам пользовательского интерфейса (кнопкам, полям форм, значкам), где визуальная информация должна быть различима. Это определено в WCAG 2.1, критерий успеха 1.4.11.

Общий балл соответствия показывает процент цветовых пар, которые соответствуют стандарту WCAG AA для обычного текста — это самый строгий обычно требуемый критерий. Оценка 100 % означает, что каждая комбинация цветов в вашей палитре безопасна для использования в основном тексте. Таблица для каждой пары дает точный коэффициент контрастности и статус «пройден/не пройден» для каждого критерия. Пары с пометкой AA Large можно использовать для крупного текста и элементов пользовательского интерфейса, но не для основного текста. Пары с пометкой «Не удалось» не следует использовать вместе для какого-либо текста или интерактивного элемента. Используйте раздел рекомендаций, чтобы понять ограничения каждой непроходящей пары и спланировать корректировку цвета.