Праверка кантрасту палітра (Validate Palette Contrast)

Функцыя Паверка кантрасту палітра праверяе пары колераў у вашай палітрай дызайну на адпаведнасць паказальнікам даступнасці веба-кантэнту 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	Nie	Уровень адпаведнасці WCAG: "A", "AA" (па спісы), або "AAA"
pairs_to_check	array	Nie	Канкрэтныя пары колераў для праверкі (напрыклад, ["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 жирным або больш)

Схема вынікаў (Output Schema)

Функцыя павертае падрабяжны рапорт праверкі:

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

Калі выкарыстоўваецца выбар накі runway дызайну ў Theme Builder, функцыя Паверка кантрасту палітра:

1. Аналізуе выбраную палітра колераў
2. Праверяе ўсе каляровыя ка тэксту і фона
3. Праверяе адпаведнасць выбранаму ўзроўню WCAG
4. Прадастаўляе рэкамендацыі для неадпаведных пар
5. Прадычыняе прымяненне недаступных каляровых схемаў

Найлепшыя практыкі

• Пачніце з ўзроўню AA — WCAG AA з'яўляецца стандартам для большасці сайтаў
• Праверка да прымянення — праверце палітра, перш чым фіксаваць дызайн
• Праверце ўсе ка ўяўляюць — гарантуйце, што тэкст, спасылкі і элементы UI адпавядаюць стандартам
• Улічце перавагі карыстальнікаў — некаторым карыстальнікам можа быць дадатковая каляровая кантсентыўнасць
• Выкарыстоўвайце праверачы кантрасту — пазбегнуць гэтай функцыі з інструментамі браузера для верафікацыі

Неадпаведныя пары і рэкамендацыі

Калі каляровы ка не праходзіць праверку, функцыя прадастаўляе рэкамендацыі:

{
  "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 — ствараць навігацыю з даступнымі каляровымі ўяўляюць