پالېترا سېلىشتۇرمىسىنى دەلىللەش

پالېترا سېلىشتۇرمىسىنى دەلىللەش ئىقتىدارى لايىھە پالېترىڭىزدىكى رەڭ جۈپلىرىنى themeىڭىزغا قوللىنىشتىن بۇرۇن WCAG (تور مەزمۇنىنىڭ قولايلىقلىق كۆرسەتمىلىرى) غا ماس كېلىدىغان-كەلمەيدىغانلىقىنى تەكشۈرىدۇ.

ئومۇمىي چۈشەنچە

بۇ ئىقتىدار تېكىست ۋە تەگلىك رەڭلىرى ئارىسىدىكى سېلىشتۇرما نىسبىتىنى دەلىللەش ئارقىلىق siteىڭىزنىڭ رەڭ لايىھىسىنىڭ قولايلىقلىق ئۆلچىمىگە ماس كېلىشىنى كاپالەتكە ئىگە قىلىدۇ. ئۇ كۆرۈش توسالغۇسى بار ئىشلەتكۈچىلەرنىڭ ئوقۇشى قىيىن بولۇشى مۇمكىن بولغان رەڭ بىرىكمىلىرىنىڭ ئالدىنى ئېلىشقا ياردەم بېرىدۇ.

كىرگۈزۈش فورماتى

بۇ ئىقتىدار رەڭ پالېتراسىنى كىرگۈزۈش سۈپىتىدە قوبۇل قىلىدۇ:

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

پارامېتىرلار

Parameter	Type	Required	Description
colors	array	ھەئە	name ۋە hex خاسلىقلىرى بار رەڭ ئوبيېكتلىرىنىڭ arrayى
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 توم ياكى ئۇنىڭدىن چوڭ)

چىقىرىش 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": []
  }
}

چىقىرىش بۆلەكلىرى

Field	Type	Description
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 كۆپىنچە تور بېكەتلەر ئۈچۈن ئۆلچەم ھېسابلىنىدۇ
• قوللىنىشتىن بۇرۇن سىناڭ — لايىھەگە تەستىق بېرىشتىن بۇرۇن پالېترىڭىزنى دەلىللەڭ
• بارلىق بىرىكمىلەرنى تەكشۈرۈڭ — تېكىست، ئۇلانمىلار ۋە 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 ھاسىل قىلىش — دەلىللەنگەن رەڭ پالېترىڭىز بىلەن لوگولارنى يارىتىڭ
• تىزىملىك قۇرۇش — قولايلىق رەڭلەر بىلەن يولباشلاشنى قۇرۇڭ