WCAG कंट्रास्ट चेकर क्या है?

एक WCAG रंग कंट्रास्ट चेकर जो अग्रभूमि और पृष्ठभूमि रंगों के बीच कंट्रास्ट अनुपात की गणना करता है और बताता है कि यह संयोजन सामान्य एवं बड़े टेक्स्ट के लिए WCAG 2.1 लेवल AA और AAA एक्सेसिबिलिटी मानकों को पूरा करता है या नहीं।

यह चेकर WCAG 2.1 के रिलेटिव लुमिनेंस फ़ॉर्मूले से दो रंगों के बीच का अनुपात निकालता है — इन्हें hex, rgb(), hsl() या CSS नाम के रूप में लिखा जा सकता है — और उसे AA (बॉडी टेक्स्ट 4.5:1, बड़े टेक्स्ट 3:1) तथा AAA (7:1, 4.5:1) के विरुद्ध आँकता है। फ़ॉर्म बॉर्डर और आइकन जैसे UI एलिमेंट के लिए 3:1 की निचली सीमा भी जाँचता है। कोई जोड़ी फ़ेल हो तो सुझाव पैनल फ़ोरग्राउंड को छोटे-छोटे क़दमों में हल्का/गहरा करके पास होने वाले रंग की ओर खींचता है और AA व AAA दोनों लक्ष्य देता है।

उपयोग कैसे करें

1. अग्रभूमि (टेक्स्ट) रंग और पृष्ठभूमि रंग दर्ज करें या चुनें — hex, rgb(), hsl() या CSS रंग का नाम पेस्ट करें, या कलर पिकर का उपयोग करें।
2. सामान्य टेक्स्ट, बड़े टेक्स्ट और UI घटकों में WCAG AA और AAA अनुपालन के लिए कंट्रास्ट अनुपात और पास/फेल परिणाम देखें।
3. यदि कंट्रास्ट विफल होता है, तो निकटतम एक्सेसिबल रंग संयोजन खोजने के लिए सुझाए गए रंग समायोजन का उपयोग करें।

कब उपयोग करें

• लैंडिंग पेज लाइव करने से पहले सफ़ेद या डार्क बैकग्राउंड पर ब्रांड कलर की जाँच।
• बटन के डिफ़ॉल्ट, होवर और डिसेबल्ड स्टेट के लिए एक्सेसिबल रंग चुनना।
• प्लेसहोल्डर टेक्स्ट और डिसेबल्ड इनपुट जाँचना, जो अक्सर 4.5:1 से नीचे चले जाते हैं।

परिणाम

एक UI डिज़ाइनर सफेद #FFFFFF पर अपने ब्रांड का नीला #3B82F6 जाँचता है — 4.5:1 अनुपात बड़े टेक्स्ट के लिए AA पास करता है लेकिन सामान्य टेक्स्ट के लिए AAA फेल होता है। दोनों पास करने के लिए वे #2563EB (5.3:1) पर गहरा करते हैं।

अक्सर पूछे जाने वाले प्रश्न

बॉडी टेक्स्ट को WCAG AA पास करने के लिए कितना अनुपात चाहिए?

बैकग्राउंड के मुक़ाबले 4.5:1। बड़ा टेक्स्ट (18pt रेगुलर या 14pt बोल्ड या उससे ऊपर) 3:1 तक काम चलाता है। AAA इन्हें क्रमशः 7:1 और 4.5:1 कर देता है। इनपुट बॉर्डर जैसे UI एलिमेंट को सिर्फ़ 3:1 चाहिए।

मुझे तो साफ़ दिखता है, फिर मेरा डार्क ग्रे × व्हाइट फ़ेल क्यों होता है?

व्यक्तिगत अनुभूति और मापा अनुपात जल्दी ही जुदा हो जाते हैं। कैलिब्रेटेड स्क्रीन और अच्छी रौशनी में 4:1 खरा लगता है, पर कमज़ोर दृष्टि, चकाचौंध या पुराने मॉनिटर पर बिखर जाता है। WCAG बेस्ट केस नहीं, वर्स्ट केस के हिसाब से सीमा तय करता है।

क्या आइकन और फ़ॉर्म बॉर्डर के लिए भी टेक्स्ट जैसा कंट्रास्ट चाहिए?

नहीं। WCAG 2.1 ने नॉन-टेक्स्ट कंपोनेंट के लिए 3:1 का नया नियम जोड़ा है, जिसमें बॉर्डर, आइकन, फ़ोकस इंडिकेटर और चार्ट एलिमेंट आते हैं। शुद्ध सजावटी ग्राफ़िक्स छूट में हैं, पर जो भी जानकारी पहुँचाता हो उसे आसपास के रंगों के मुक़ाबले 3:1 चाहिए।

ब्रांड कलर बदले बिना फ़ेल हो रही जोड़ी कैसे ठीक करूँ?

अगर ब्रांड रंग पक्का है तो बैकग्राउंड बदलें। उसे थोड़ा गहरा या हल्का करते जाएँ जब तक अनुपात पास न हो। यहाँ सुझाव पैनल फ़ोरग्राउंड को छोटे-छोटे क़दमों में हिलाता है; इसी सोच को बैकग्राउंड पर भी लागू कर सकते हैं।

क्या WCAG में सेमी-ट्रांसपेरेंट टेक्स्ट या फोटो पर रखे टेक्स्ट के नियम हैं?

WCAG कहता है कि टेक्स्ट के नीचे के सबसे बुरे पिक्सेल पर मूल्यांकन करो। फोटो पर पड़े टेक्स्ट के लिए आमतौर पर पीछे एक हल्की टिंट या ठोस प्लेट रखनी पड़ती है। शुरुआत के hex की नहीं, असल में रेंडर हुए रंग की माप लें।

संबंधित उपकरण