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

Функція Перевірка контрасту палітри перевіряє пари кольорів у вашій дизайн-палітрі на відповідність стандартам WCAG (Рекомендації щодо доступності веб-контенту) перед їх застосуванням до вашої теми.

Огляд

Ця функція гарантує, що схема кольорів вашого сайту відповідає стандартам доступності, перевіряючи співвідношення контрасту між кольорами тексту та фону. Це допомагає запобігти використанню комбінацій кольорів, які можуть бути важко читабельними для користувачів із порушеннями зору.

Формат вводу

Функція приймає палітру кольорів як ввід:

{
  "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

При використанні вибору напрямку дизайну в 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 — створюйте навігацію з доступними кольорами