پشتڕاستکردنەوەی کۆنتراستی پەلێت

توانای پشتڕاستکردنەوەی کۆنتراستی پەلێت جووتە ڕەنگەکان لە پەلێتی دیزاینەکەتدا دەپشکنێت بۆ هاوبەشی لەگەڵ WCAG (Web Content Accessibility Guidelines) پێش ئەوەی بەسەر themeەکەتدا جێبەجێ بکرێن.

پوختە

ئەم توانایە دڵنیا دەکاتەوە کە ڕێکخستنی ڕەنگی ماڵپەڕەکەت پێوەرەکانی دەستڕاگەیشتن جێبەجێ دەکات، بە پشتڕاستکردنەوەی ڕێژەی کۆنتراست لەنێوان ڕەنگی دەق و ڕەنگی پاشبنەما. یارمەتی دەدات بۆ ڕێگریکردن لە تێکەڵە ڕەنگەکان کە دەکرێت خوێندنەوەیان بۆ بەکارهێنەرانی خاوەن کێشەی بینین زەحمەت بێت.

فۆرماتی Input

ئەم توانایە وەک input پەلێتێکی ڕەنگ وەردەگرێت:

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

پارامێتەرەکان

Parameter	Type	Required	Description
colors	array	Yes	ڕیزبەندییەک لە ئوبجێکتە ڕەنگەکان بە خاسیەتەکانی name و hex
wcag_level	string	No	ئاستی هاوبەشی WCAG: "A"، "AA" (بنەڕەتی)، یان "AAA"
pairs_to_check	array	No	جووتە ڕەنگە دیاریکراوەکان بۆ پشتڕاستکردنەوە (بۆ نموونە، ["primary-text", "background-text"])

ئاستەکانی WCAG کە دەپشکنرێن

ئەم توانایە ڕێژەکانی کۆنتراست بەپێی پێوەرەکانی WCAG پشتڕاست دەکاتەوە:

Level	Normal Text	Large Text	Minimum Ratio
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 بە bold)
• دەقی گەورە — دەقی 18pt یان گەورەتر (یان 14pt بە bold یان گەورەتر)

سکیمای Output

ئەم توانایە ڕاپۆرتێکی وردی پشتڕاستکردنەوە دەگەڕێنێتەوە:

{
  "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": []
  }
}

خانەکانی Output

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 — دروستکردنی لۆگۆ بە پەلێتی ڕەنگی پشتڕاستکراوەت
• دروستکردنی مێنیو — دروستکردنی ناڤیگەیشن بە ڕەنگە دەستڕاگەیشتووەکان