වර්ණ-පුවරු ප්‍රතිවිරෝධතාව වලංගු කිරීම

වර්ණ-පුවරු ප්‍රතිවිරෝධතාව වලංගු කිරීම හැකියාව ඔබේ සැලසුම් වර්ණ පුවරුවේ වර්ණ යුගල, ඔබේ තේමාවට යෙදීමට පෙර WCAG (Web Content Accessibility Guidelines) අනුකූලතාව සඳහා පරීක්ෂා කරයි.

සාරාංශය

මෙම හැකියාව පෙළ සහ පසුබිම් වර්ණ අතර ප්‍රතිවිරෝධතා අනුපාත වලංගු කිරීමෙන් ඔබේ අඩවියේ වර්ණ ක්‍රමය ප්‍රවේශයෝග්‍යතා ප්‍රමිතීන්ට ගැළපෙන බව සහතික කරයි. දෘශ්‍ය අබාධ ඇති පරිශීලකයන්ට කියවීමට අපහසු විය හැකි වර්ණ සංයෝජන වැළැක්වීමට එය උපකාරී වේ.

ආදාන ආකෘතිය

මෙම හැකියාව ආදානය ලෙස වර්ණ පුවරුවක් පිළිගනී:

{
  "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 ප්‍රමිතීන් සපුරාලන්නේදැයි පරීක්ෂා කරන්න. මට primary වර්ණය #678233, පෙළ වර්ණය #ffffff, සහ පසුබිම #f5f5f5 ඇත.

ප්‍රතිඵලය: මෙම හැකියාව සියලු වර්ණ සංයෝජන වලංගු කර ආපසු ලබා දෙන්නේ:

• ✅ Primary + පෙළ: 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 ජනනය කරන්න — ඔබේ වලංගු කළ වර්ණ පුවරුවෙන් ලාංඡන සාදන්න
• මෙනුව සාදන්න — ප්‍රවේශයෝග්‍ය වර්ණ සමඟ නාවිකකරණය ගොඩනඟන්න