Валидиране на контраста на палитрата

Функцията Валидиране на контраста на палитрата проверява цветовите двойки в вашата дизайн палитра за съответствие с 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	Предложения за подобряване на несъответстващите двойки

Пример за употреба

Prompt:

Проверете дали моята палитра от цветове отговаря на стандартите 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 — изграждайте навигация с достъпни цветове