पैलेट कंट्रास्ट को मान्य करें

पैलेट कंट्रास्ट को मान्य करें सुविधा आपके डिज़ाइन पैलेट में रंग जोड़े की जाँच करती है कि वे आपके थीम पर लागू करने से पहले WCAG (वेब कंटेंट एक्सेसिबिलिटी गाइडलाइन्स) के अनुरूप हैं या नहीं।

अवलोकन (Overview)

यह सुविधा यह सुनिश्चित करती है कि आपकी साइट का रंग संयोजन टेक्स्ट और बैकग्राउंड रंगों के बीच कंट्रास्ट अनुपात को मान्य करके पहुँच-योग्यता (accessibility) मानकों को पूरा करता है। यह उन रंग संयोजनों को बनने से रोकने में मदद करता है जिन्हें दृष्टिबाधित (visually impaired) उपयोगकर्ताओं के लिए पढ़ना मुश्किल हो सकता है।

इनपुट फॉर्मेट (Input Format)

यह सुविधा इनपुट के रूप में एक रंग पैलेट स्वीकार करती है:

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

पैरामीटर्स (Parameters)

पैरामीटर	टाइप	आवश्यक	विवरण
colors	array	हाँ	name और hex प्रॉपर्टी वाले रंग ऑब्जेक्ट्स का ऐरे
wcag_level	string	नहीं	WCAG अनुपालन स्तर: "A", "AA" (डिफ़ॉल्ट), या "AAA"
pairs_to_check	array	नहीं	मान्य करने के लिए विशिष्ट रंग जोड़े (उदाहरण के लिए, ["primary-text", "background-text"])

जाँच किए गए WCAG स्तर (WCAG Levels Checked)

यह सुविधा WCAG मानकों के अनुसार कंट्रास्ट अनुपात को मान्य करती है:

स्तर	सामान्य टेक्स्ट (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 बोल्ड या उससे बड़ा)

आउटपुट स्कीमा (Output 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": []
  }
}

आउटपुट फ़ील्ड (Output Fields)

फ़ील्ड	टाइप	विवरण
compliant	boolean	क्या पूरा पैलेट निर्दिष्ट WCAG स्तर को पूरा करता है
wcag_level	string	वह WCAG स्तर जिसकी जाँच की गई थी
pairs	array	प्रत्येक रंग जोड़े के लिए विस्तृत परिणाम
contrast_ratio	number	गणना किया गया कंट्रास्ट अनुपात (1:1 से 21:1)
status	string	प्रत्येक जोड़े के लिए "pass" या "fail"
recommendations	array	विफल जोड़े को बेहतर बनाने के सुझाव

उपयोग का उदाहरण (Usage Example)

प्रॉम्प्ट (Prompt):

Check if my color palette meets WCAG AA standards. I have primary color #678233, text color #ffffff, and background #f5f5f5.

परिणाम (Result): यह सुविधा सभी रंग संयोजनों को मान्य करती है और निम्नलिखित परिणाम लौटाती है:

• ✅ प्राइमरी + टेक्स्ट: 5.2:1 अनुपात (WCAG AA पास)
• ✅ बैकग्राउंड + टेक्स्ट: 12.1:1 अनुपात (WCAG AAA पास)
• कुल मिलाकर: WCAG AA के साथ अनुपालनशील (Compliant)

थीम बिल्डर के साथ एकीकरण (Integration with Theme Builder)

जब आप थीम बिल्डर में डिज़ाइन-दिशा चयन का उपयोग करते हैं, तो पैलेट कंट्रास्ट को मान्य करने वाली सुविधा:

1. आपके चुने हुए रंग पैलेट का विश्लेषण करती है
2. सभी टेक्स्ट-बैकग्राउंड संयोजनों की जाँच करती है
3. आपके चुने हुए WCAG स्तर के विरुद्ध सत्यापन करती है
4. गैर-अनुपालनकारी जोड़ों के लिए सुझाव प्रदान करती है
5. दुर्गम (inaccessible) रंग योजनाओं को लागू होने से रोकती है

सर्वोत्तम अभ्यास (Best Practices)

• AA स्तर से शुरुआत करें — WCAG AA अधिकांश वेबसाइटों के लिए मानक है
• लागू करने से पहले परीक्षण करें — डिज़ाइन पर प्रतिबद्ध होने से पहले अपने पैलेट को मान्य करें
• सभी संयोजनों की जाँच करें — सुनिश्चित करें कि टेक्स्ट, लिंक और UI तत्व सभी मानकों को पूरा करते हैं
• उपयोगकर्ता प्राथमिकताओं पर विचार करें — कुछ उपयोगकर्ताओं में अतिरिक्त रंग संवेदनशीलता हो सकती है
• कंट्रास्ट चेकर्स का उपयोग करें — सत्यापन के लिए इस सुविधा को ब्राउज़र टूल के साथ मिलाएं

विफल जोड़े और सुझाव (Failing Pairs and Recommendations)

यदि कोई रंग जोड़ा सत्यापन में विफल रहता है, तो सुविधा सुझाव प्रदान करती है:

{
  "pair": "primary-text",
  "status": "fail",
  "contrast_ratio": 2.8,
  "wcag_aa": false,
  "recommendations": [
    "टेक्स्ट रंग को #ffffff तक हल्का करें (अनुपात 5.2:1 होगा)",
    "बैकग्राउंड रंग को #556b2f तक गहरा करें (अनुपात 4.8:1 होगा)",
    "एक अलग प्राइमरी रंग जैसे #4a6b1f का उपयोग करें (अनुपात 6.1:1 होगा)"
  ]
}

संबंधित सुविधाएँ (Related Abilities)

• Generate Logo SVG — अपने मान्य रंग पैलेट के साथ लोगो बनाएं
• Create Menu — सुलभ रंगों के साथ नेविगेशन बनाएं