ផ្ទៀងផ្ទាត់កម្រិតផ្ទុយនៃក្ដារពណ៌

សមត្ថភាព ផ្ទៀងផ្ទាត់កម្រិតផ្ទុយនៃក្ដារពណ៌ ពិនិត្យគូពណ៌នៅក្នុងក្ដារពណ៌រចនារបស់អ្នក ដើម្បីឱ្យស្របតាម WCAG (Web Content Accessibility Guidelines) មុនពេលអនុវត្តវាទៅលើ theme របស់អ្នក។

ទិដ្ឋភាពទូទៅ

សមត្ថភាពនេះធានាថា គ្រោងពណ៌របស់ site របស់អ្នកបំពេញតាមស្តង់ដារភាពងាយចូលប្រើ ដោយផ្ទៀងផ្ទាត់អនុបាតកម្រិតផ្ទុយរវាងពណ៌អត្ថបទ និងពណ៌ផ្ទៃខាងក្រោយ។ វាជួយការពារការផ្គុំពណ៌ដែលអាចធ្វើឱ្យអ្នកប្រើដែលមានបញ្ហាមើលឃើញពិបាកអាន។

ទម្រង់បញ្ចូល

សមត្ថភាពនេះទទួលយកក្ដារពណ៌ជាទិន្នន័យបញ្ចូល៖

{
  "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 ដិត)
• អត្ថបទធំ — អត្ថបទ 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": []
  }
}

វាលលទ្ធផល

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 — បង្កើតឡូហ្គោដោយប្រើក្ដារពណ៌ដែលបានផ្ទៀងផ្ទាត់របស់អ្នក
• បង្កើត Menu — បង្កើតការរុករកដោយប្រើពណ៌ដែលងាយចូលប្រើ