Анализатор WCAG
Проанализируйте всю палитру на соответствие WCAG уровней AA и AAA, выявляя пары цветов с недостаточным контрастом и предлагая доступные исправления оттенков.
Палитра для анализа
Матрица контрастности
Primary | Secondary | Background | Text | Muted | |
|---|---|---|---|---|---|
Primary | — | 1.15 Fail | 3.68 AA-L | 3.98 AA-L | 1.29 Fail |
Secondary | 1.15 Fail | — | 4.23 AA-L | 3.45 AA-L | 1.12 Fail |
Background | 3.68 AA-L | 4.23 AA-L | — | 14.63 AAA | 4.76 AA |
Text | 3.98 AA-L | 3.45 AA-L | 14.63 AAA | — | 3.07 AA-L |
Muted | 1.29 Fail | 1.12 Fail | 4.76 AA | 3.07 AA-L | — |
Легенда WCAG 2.1
Уровень AAA
Коэффициент ≥ 7:1 — отлично
Уровень AA
Коэффициент ≥ 4,5:1 — стандарт
AA крупный
Коэффициент ≥ 3:1 — крупный текст
Не пройдено
Коэффициент < 3:1 — не соответствует
Проанализируйте всю палитру на соответствие WCAG уровней AA и AAA, выявляя пары цветов с недостаточным контрастом и предлагая доступные исправления оттенков.
Анализатор WCAG показывает только элементы управления и результаты, относящиеся к его функции. Доступные параметры зависят от инструмента и исходных данных.
Поддерживаемые форматы
Как это работает
Шаг 1
Откройте Анализатор WCAG и подготовьте данные, которые запрашивает интерфейс
Шаг 2
Настройте видимые параметры под нужный результат
Шаг 3
Проверьте результат перед копированием, экспортом или повторным использованием
Распространённые ошибки
- Не считайте формат или параметр поддерживаемым, если он не показан в интерфейсе.
- Проверяйте значения перед использованием в фирменном стиле, интерфейсе или рабочем файле.
- Для текста и элементов UI дополнительно проверяйте контраст.
Советы профессионалов
- Сохраняйте исходное значение вместе с результатом для сравнения вариантов.
- Используйте форматы, которые действительно показывает инструмент, а не приблизительные преобразования.
- На телефоне и планшете позволяйте тексту и элементам управления переноситься на новые строки.
Обработка данных
Обработка зависит от используемой функции. Согласие, аналитика и функции аккаунта сайта отделены от операции с цветом.
Что делает этот инструмент
Проанализируйте всю палитру на соответствие WCAG уровней AA и AAA, выявляя пары цветов с недостаточным контрастом и предлагая доступные исправления оттенков. Анализатор WCAG сосредоточен на этой задаче и не предполагает функций, которых нет в интерфейсе. Используйте доступные элементы управления, чтобы получить нужный результат, а затем проверьте показанные значения перед переносом в другой инструмент, таблицу стилей, макет или документ.
Подготовка подходящих данных
Начните с данных, которые запрашивает Анализатор WCAG: цвета, значения, изображения или настройки в зависимости от экрана. На этой странице указаны форматы Palette, HEX, CSS Variables, JSON. Если формат или параметр не показан в интерфейсе, не считайте его поддерживаемым этой конкретной функцией.
Чтение и проверка результата
Оценивайте результат в контексте выполненной операции. Сравните его с исходным значением и проверьте параметры, которые повлияли на вычисление. Для важной визуальной работы также посмотрите результат в реальном интерфейсе, где он будет использоваться, а не только в коде.
Работа на телефоне и планшете
Анализатор WCAG использует адаптивную разметку сайта. Заголовки, подзаголовки, breadcrumbs и элементы управления могут переноситься на узких экранах, чтобы длинные переводы не обрезались. Всё равно проверьте итоговый результат на устройстве и в контексте будущего использования.
Повторное использование результата
После проверки используйте только действия, которые действительно предлагает Анализатор WCAG, например копирование или экспорт, если они доступны. Сохраните исходное значение для воспроизведения настройки, а для цветов интерфейса документируйте их назначение и требуемый контраст.
Похожие инструменты
Руководства и уроки
Узнайте, как использовать наши инструменты с подробными руководствами.
wcag-analyzer: практическое руководство по accessibility
Локализованное руководство по wcag-analyzer: лучшие практики accessibility и частые ошибки.
wcag-analyzer: практическое руководство по accessibility
Локализованное руководство по wcag-analyzer: лучшие практики accessibility и частые ошибки.
wcag-analyzer: практическое руководство по export
Локализованное руководство по wcag-analyzer: лучшие практики export и частые ошибки.
Часто задаваемые вопросы
Узнайте, как использовать наши инструменты с подробными руководствами.