प्यालेट कन्ट्रास्ट मान्य गर्नुहोस्

Validate Palette Contrast क्षमताले तपाईंको डिजाइन प्यालेटका रङ जोडीहरूलाई तपाईंको theme मा लागू गर्नु अघि WCAG (Web Content Accessibility Guidelines) अनुपालनका लागि जाँच गर्छ।

सिंहावलोकन

यो क्षमताले पाठ र पृष्ठभूमि रङहरूबीचका कन्ट्रास्ट अनुपातहरू मान्य गरेर तपाईंको साइटको रङ योजना पहुँचयोग्यता मापदण्डहरू पूरा गर्छ भन्ने सुनिश्चित गर्छ। यसले दृष्टि सम्बन्धी अपाङ्गता भएका प्रयोगकर्ताहरूका लागि पढ्न गाह्रो हुन सक्ने रङ संयोजनहरू रोक्न मद्दत गर्छ।

इनपुट ढाँचा

यस क्षमताले इनपुटको रूपमा रङ प्यालेट स्वीकार गर्छ:

{
  "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` गुणहरू भएका रङ वस्तुहरूको array
`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	असफल जोडीहरू सुधार गर्न सुझावहरू

प्रयोग उदाहरण

प्रम्प्ट:

मेरो रङ प्यालेटले WCAG AA मापदण्ड पूरा गर्छ कि जाँच गर्नुहोस्। मसँग प्राथमिक रङ #678233, पाठ रङ #ffffff, र पृष्ठभूमि #f5f5f5 छ।

नतिजा: क्षमताले सबै रङ संयोजनहरू मान्य गर्छ र फर्काउँछ:

✅ प्राथमिक + पाठ: 5.2:1 अनुपात (WCAG AA पास हुन्छ)
✅ पृष्ठभूमि + पाठ: 12.1:1 अनुपात (WCAG AAA पास हुन्छ)
समग्र: WCAG AA सँग अनुपालक

Theme Builder सँग एकीकरण

Theme Builder को डिजाइन-दिशा चयन प्रयोग गर्दा, Validate Palette Contrast क्षमताले:

तपाईंले चयन गर्नुभएको रङ प्यालेट विश्लेषण गर्छ
सबै पाठ-पृष्ठभूमि संयोजनहरू जाँच गर्छ
तपाईंले छानेको WCAG स्तर विरुद्ध मान्य गर्छ
अनुपालन नगर्ने जोडीहरूका लागि सुझावहरू प्रदान गर्छ
पहुँचयोग्य नभएका रङ योजनाहरू लागू हुनबाट रोक्छ

उत्कृष्ट अभ्यासहरू

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 उत्पन्न गर्नुहोस् — तपाईंको मान्य गरिएको रङ प्यालेटसँग लोगोहरू सिर्जना गर्नुहोस्
मेनु सिर्जना गर्नुहोस् — पहुँचयोग्य रङहरूसँग नेभिगेसन बनाउनुहोस्

सिंहावलोकन​

इनपुट ढाँचा​

प्यारामिटरहरू​

जाँच गरिएका WCAG स्तरहरू​

आउटपुट स्किमा​

आउटपुट फिल्डहरू​

प्रयोग उदाहरण​

Theme Builder सँग एकीकरण​

उत्कृष्ट अभ्यासहरू​

असफल जोडीहरू र सुझावहरू​

सम्बन्धित क्षमताहरू​