Проверка контрастности палитры

Возможность Проверка контрастности палитры анализирует пары цветов в вашей дизайн-палитре на соответствие стандартам WCAG (Web Content Accessibility Guidelines) до того, как вы примените их к вашей теме.

Обзор

Эта возможность гарантирует, что цветовая схема вашего сайта соответствует стандартам доступности, проверяя коэффициенты контрастности между цветами текста и фона. Это помогает предотвратить использование цветовых сочетаний, которые могут быть трудночитаемы для пользователей с нарушениями зрения.

Формат ввода

Возможность принимает на вход цветовую палитру:

{
  "colors": [
    {
      "name": "primary",
      "hex": "#678233"
    },
    {
      "name": "text",
      "hex": "#ffffff"
    },
    {
      "name": "background",
      "hex": "#f5f5f5"
    }
  ],
  "wcag_level": "AA"
}

Параметры

Параметр	Тип	Обязательно	Описание
colors	array	Да	Массив объектов цветов с свойствами name и hex
wcag_level	string	Нет	Уровень соответствия WCAG: "A", "AA" (по умолчанию) или "AAA"
pairs_to_check	array	Нет	Конкретные пары цветов для проверки (например, ["primary-text", "background-text"])

Проверяемые уровни WCAG

Возможность проверяет коэффициенты контрастности в соответствии со стандартами WCAG:

Уровень	Обычный текст	Крупный текст	Минимальный коэффициент
A	3:1	3:1	3:1
AA	4.5:1	3:1	4.5:1
AAA	7:1	4.5:1	7:1

• Обычный текст — текст размером менее 18pt (или 14pt жирным)
• Крупный текст — текст размером 18pt или больше (или 14pt жирным или больше)

Схема вывода

Возможность возвращает подробный отчет о проверке:

{
  "compliant": true,
  "wcag_level": "AA",
  "pairs": [
    {
      "pair": "primary-text",
      "color1": "#678233",
      "color2": "#ffffff",
      "contrast_ratio": 5.2,
      "wcag_a": true,
      "wcag_aa": true,
      "wcag_aaa": false,
      "status": "pass"
    },
    {
      "pair": "background-text",
      "color1": "#f5f5f5",
      "color2": "#333333",
      "contrast_ratio": 12.1,
      "wcag_a": true,
      "wcag_aa": true,
      "wcag_aaa": true,
      "status": "pass"
    }
  ],
  "summary": {
    "total_pairs": 2,
    "passing": 2,
    "failing": 0,
    "recommendations": []
  }
}

Поля вывода

Поле	Тип	Описание
compliant	boolean	Соответствует ли вся палитра указанному уровню WCAG
wcag_level	string	Уровень WCAG, который был проверен
pairs	array	Подробные результаты для каждой пары цветов
contrast_ratio	number	Рассчитанный коэффициент контрастности (от 1:1 до 21:1)
status	string	"pass" (пройдено) или "fail" (не пройдено) для каждой пары
recommendations	array	Предложения по улучшению пар, которые не прошли проверку

Пример использования

Запрос:

Проверьте, соответствует ли моя цветовая палитра стандартам WCAG AA. У меня основной цвет #678233, цвет текста #ffffff и фон #f5f5f5.

Результат: Возможность проверяет все цветовые комбинации и возвращает:

• ✅ Основной + Текст: коэффициент 5.2:1 (проходит WCAG AA)
• ✅ Фон + Текст: коэффициент 12.1:1 (проходит WCAG AAA)
• Общий результат: Соответствует WCAG AA

Интеграция с конструктором тем

При использовании выбора направления дизайна в Theme Builder, возможность Проверка контрастности палитры:

1. Анализирует выбранную вами цветовую палитру
2. Проверяет все комбинации текста и фона
3. Проверяет соответствие выбранному уровню WCAG
4. Предоставляет рекомендации для пар, которые не соответствуют стандартам
5. Предотвращает применение недоступных цветовых схем

Лучшие практики

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

Неудачные пары и рекомендации

Если пара цветов не проходит проверку, возможность предоставляет рекомендации:

{
  "pair": "primary-text",
  "status": "fail",
  "contrast_ratio": 2.8,
  "wcag_aa": false,
  "recommendations": [
    "Светлените цвет текста до #ffffff (коэффициент составит 5.2:1)",
    "Затемните цвет фона до #556b2f (коэффициент составит 4.8:1)",
    "Используйте другой основной цвет, например #4a6b1f (коэффициент составит 6.1:1)"
  ]
}

Связанные возможности

• Generate Logo SVG — создайте логотипы с помощью вашей проверенной цветовой палитры
• Create Menu — создайте навигацию с доступными цветами