WCAG कलर कंट्रास्ट अनुपात: पहुँच सुनिश्चित करना
रंग कंट्रास्ट वेब पहुँच का एक महत्वपूर्ण पहलू है, यह सुनिश्चित करता है कि कम दृष्टि या रंग अंधापन वाले लोगों सहित दृश्य हानि वाले उपयोगकर्ता सामग्री को देख और समझ सकें। वेब सामग्री पहुँच दिशानिर्देश (WCAG) इस लक्ष्य को प्राप्त करने के लिए रंग कंट्रास्ट के लिए विशिष्ट मानदंड प्रदान करते हैं।
रंग कंट्रास्ट अनुपात क्या है?
रंग कंट्रास्ट अनुपात दो रंगों के बीच चमक (चमक) में अंतर को मापता है: अग्रभूमि (पाठ या ग्राफ़िकल तत्व) और पृष्ठभूमि। इसे अनुपात के रूप में व्यक्त किया जाता है, जो आम तौर पर 1:1 (कोई कंट्रास्ट नहीं, एक ही रंग) से लेकर 21:1 (अधिकतम कंट्रास्ट, काला और सफेद) तक होता है।
WCAG कंट्रास्ट आवश्यकताएँ
WCAG अनुरूपता के स्तर (A, AA, AAA) और पाठ के आकार के आधार पर विभिन्न कंट्रास्ट आवश्यकताएँ परिभाषित करता है:
1. WCAG 2.1 स्तर AA
- सामान्य पाठ (18pt या 14pt बोल्ड से कम): कम से कम 4.5:1 के कंट्रास्ट अनुपात की आवश्यकता होती है।
- बड़ा पाठ (18pt या 14pt बोल्ड और बड़ा): कम से कम 3:1 के कंट्रास्ट अनुपात की आवश्यकता होती है।
- ग्राफ़िकल ऑब्जेक्ट और उपयोगकर्ता इंटरफ़ेस घटक: कम से कम 3:1 के कंट्रास्ट अनुपात की आवश्यकता होती है। इसमें आइकन, फ़ॉर्म फ़ील्ड और अन्य विज़ुअल तत्व शामिल हैं।
2. WCAG 2.1 स्तर AAA
- सामान्य पाठ: कम से कम 7:1 के कंट्रास्ट अनुपात की आवश्यकता होती है।
- बड़ा टेक्स्ट: इसके लिए कम से कम 4.5:1 का कंट्रास्ट अनुपात आवश्यक है।
- ग्राफ़िकल ऑब्जेक्ट और यूज़र इंटरफ़ेस घटक: इसके लिए कम से कम 4.5:1 का कंट्रास्ट अनुपात आवश्यक है।
नोट:
- "बड़ा टेक्स्ट" को 18pt या 14pt बोल्ड या CSS पिक्सेल में समतुल्य के रूप में परिभाषित किया गया है।
- ये दिशा-निर्देश टेक्स्ट और टेक्स्ट की छवियों पर लागू होते हैं।
- आकस्मिक टेक्स्ट या टेक्स्ट की छवियां जो पूरी तरह से सजावटी हैं, छूट प्राप्त हैं।
- लोगो छूट प्राप्त हैं।
रंग कंट्रास्ट की गणना
रंगों की सापेक्ष चमक का उपयोग करके कंट्रास्ट अनुपात की गणना की जाती है। सूत्र है:
(L1 + 0.05) / (L2 + 0.05)
जहाँ:
L1 हल्के रंग की सापेक्ष चमक है।L2 गहरे रंग की सापेक्ष चमक है।
सापेक्ष चमक 0 और 1 के बीच का मान है, जहाँ 0 काला है और 1 सफ़ेद है। इसकी गणना RGB रंग मानों को शामिल करने वाले एक जटिल सूत्र का उपयोग करके की जाती है।
सौभाग्य से, आपको इसे मैन्युअल रूप से गणना करने की आवश्यकता नहीं है। कई उपकरण आपके लिए यह कर सकते हैं।
रंग कंट्रास्ट की जाँच करने के लिए उपकरण
कई उपकरण आपको रंग कंट्रास्ट की जाँच करने में मदद कर सकते हैं:
- WebAIM कंट्रास्ट चेकर: एक लोकप्रिय ऑनलाइन टूल जो आपको हेक्स रंग कोड इनपुट करने और कंट्रास्ट अनुपात देखने की अनुमति देता है।
- एक्सेसिबल कलर्स: कंट्रास्ट अनुपात जाँच के साथ एक रंग पैलेट जनरेटर प्रदान करता है।
- कलर कंट्रास्ट एनालाइज़र (CCA): विंडोज और macOS के लिए एक डाउनलोड करने योग्य टूल।
- ब्राउज़र डेवलपर टूल: अधिकांश आधुनिक ब्राउज़रों में उनके डेवलपर टूल में बिल्ट-इन कलर कंट्रास्ट चेकर होते हैं।
- प्लगइन और एक्सटेंशन: कई ब्राउज़र एक्सटेंशन और डिज़ाइन सॉफ़्टवेयर प्लगइन रंग कंट्रास्ट जाँच प्रदान करते हैं।
- Chrome DevTools में लाइटहाउस: लाइटहाउस रंग कंट्रास्ट जाँच सहित पहुँच योग्यता ऑडिट प्रदान करता है।
रंग कंट्रास्ट के लिए सर्वोत्तम अभ्यास
- उच्च-कंट्रास्ट रंग संयोजन चुनें: ऐसे कंट्रास्ट अनुपातों का लक्ष्य रखें जो WCAG दिशा-निर्देशों को पूरा करते हों या उनसे बेहतर हों।
- पर्याप्त टेक्स्ट आकार का उपयोग करें: बड़ा टेक्स्ट पढ़ने में आसान होता है, खासकर कम दृष्टि वाले उपयोगकर्ताओं के लिए।
- केवल रंग पर निर्भर रहने से बचें: जानकारी देने के लिए टेक्स्ट लेबल या आइकन जैसे अतिरिक्त दृश्य संकेतों का उपयोग करें।
- विभिन्न रंग दृष्टि कमियों के साथ अपने डिज़ाइन का परीक्षण करें: यह सुनिश्चित करने के लिए कि आपकी सामग्री अभी भी सुलभ है, रंग अंधापन का अनुकरण करें।
- उच्च-कंट्रास्ट मोड प्रदान करें: उपयोगकर्ताओं को आपकी वेबसाइट या एप्लिकेशन के उच्च-कंट्रास्ट संस्करण पर स्विच करने दें।
- एक उच्च-कंट्रास्ट मोड प्रदान करें: उपयोगकर्ताओं को आपकी वेबसाइट या एप्लिकेशन के उच्च-कंट्रास्ट संस्करण पर स्विच करने दें।
- ** * संदर्भ पर विचार करें: कुछ संदर्भों में दूसरों की तुलना में उच्च कंट्रास्ट अनुपात की आवश्यकता हो सकती है। उदाहरण के लिए, महत्वपूर्ण जानकारी या इंटरैक्टिव तत्वों में मजबूत कंट्रास्ट होना चाहिए।
- वास्तविक डिवाइस पर परीक्षण करें: अलग-अलग स्क्रीन पर रंग अलग-अलग दिखाई दे सकते हैं।
उदाहरण
- काली पृष्ठभूमि पर सफ़ेद पाठ: 21:1 का कंट्रास्ट अनुपात (AAA आवश्यकताओं को पूरा करता है)।
- हल्के भूरे रंग की पृष्ठभूमि पर गहरा भूरा पाठ: 4.5:1 से कम कंट्रास्ट अनुपात हो सकता है (सामान्य पाठ के लिए AA आवश्यकताओं को पूरा नहीं करता है)।
- सफ़ेद पृष्ठभूमि पर नीला पाठ: नीले रंग की छाया के आधार पर, 4.5:1 कंट्रास्ट आवश्यकता को पूरा कर सकता है या नहीं भी कर सकता है।
WCAG रंग कंट्रास्ट दिशानिर्देशों का पालन करके, आप ऐसी वेबसाइटें और एप्लिकेशन बना सकते हैं जो उपयोगकर्ताओं की एक विस्तृत श्रृंखला के लिए सुलभ हों, यह सुनिश्चित करते हुए कि हर कोई आपकी सामग्री को देख और समझ सके।
