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

Могућност 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	Не	Ниво усклађености са 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, могућност Validate Palette Contrast:

1. Анализира вашу изабрану палету боја
2. Проверава све комбинације текста и позадине
3. Валидира према вашем изабраном WCAG нивоу
4. Пружа препоруке за неусклађене парове
5. Спречава примену неприступачних шема боја

Најбоље праксе

• Почните са AA нивоом — WCAG AA је стандард за већину веб-сајтова
• Тестирајте пре примене — валидирајте своју палету пре него што се обавежете на дизајн
• Проверите све комбинације — обезбедите да текст, линкови и UI елементи испуњавају стандарде
• Узмите у обзир корисничке преференције — неки корисници могу имати додатну осетљивост на боје
• Користите провере контраста — комбинујте ову могућност са алатима прегледача ради верификације

Парови који не пролазе и препоруке

Ако пар боја не прође валидацију, могућност пружа препоруке:

{
  "pair": "primary-text",
  "status": "fail",
  "contrast_ratio": 2.8,
  "wcag_aa": false,
  "recommendations": [
    "Lighten the text color to #ffffff (ratio would be 5.2:1)",
    "Darken the background color to #556b2f (ratio would be 4.8:1)",
    "Use a different primary color like #4a6b1f (ratio would be 6.1:1)"
  ]
}

Повезане могућности

• Генериши Logo SVG — креирајте логотипе са вашом валидираном палетом боја
• Креирај мени — направите навигацију са приступачним бојама