Санҷиши контрасти палитра

Қобилияти Санҷиши контрасти палитра ҷуфтҳои рангҳоро дар палитраи тарҳи шумо барои мутобиқат ба 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 стандарт барои аксари вебсайтҳо аст
• Пеш аз татбиқ санҷед — пеш аз устувор кардани тарҳ палитраи худро санҷед
• Ҳамаи таркибҳоро санҷед — мутмаин шавед, ки матн, пайвандҳо ва унсурҳои 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 — бо палитраи ранги санҷидашудаи худ логотипҳо эҷод кунед
• Эҷоди меню — роҳбариро бо рангҳои дастрас созед