Skip to main content

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

Способноста Validate Palette Contrast проверува парови на бои во вашата дизајнерска палета за усогласеност со WCAG (Web Content Accessibility Guidelines) пред да ги примени на вашата тема.

Преглед​

Оваа способност осигурува дека шемата на бои на вашиот сајт ги исполнува стандардите за пристапност преку проверка на односите на контраст меѓу боите на текстот и позадината. Помага да се спречат комбинации на бои што би можеле да бидат тешки за читање за корисници со оштетен вид.

Формат на влез​

Способноста прифаќа палета на бои како влез:

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

Параметри​

ParameterTypeRequiredDescription
colorsarrayYesНиза од објекти за бои со својства name и hex
wcag_levelstringNoНиво на усогласеност со WCAG: "A", "AA" (стандардно), или "AAA"
pairs_to_checkarrayNoСпецифични парови на бои за проверка (на пр., ["primary-text", "background-text"])

Проверени WCAG нивоа​

Способноста ги проверува односите на контраст според WCAG стандардите:

LevelNormal TextLarge TextMinimum Ratio
A3:13:13:1
AA4.5:13:14.5:1
AAA7:14.5:17: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": []
  }
}

Излезни полиња​

FieldTypeDescription
compliantbooleanДали целата палета го исполнува наведеното WCAG ниво
wcag_levelstringWCAG нивото што беше проверено
pairsarrayДетални резултати за секој пар на бои
contrast_rationumberПресметаниот однос на контраст (1:1 до 21:1)
statusstring"pass" или "fail" за секој пар
recommendationsarrayПредлози за подобрување на паровите што не поминуваат

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

Prompt:

Проверете дали мојата палета на бои ги исполнува стандардите 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)"
  ]
}