WCAG कंट्रास्ट चेकर — AA/AAA ऑनलाइन _

WCAG कंट्रास्ट जाँच कुछ सीधे चरणों से गुज़रती है। कुछ भी आपके ब्राउज़र से बाहर नहीं जाता।

1. आप एक अग्रभूमि और एक पृष्ठभूमि रंग दर्ज करते हैं। टूल hex, rgb(), hsl(), या नामित CSS रंगों को उनके लाल, हरे और नीले चैनल मानों में पार्स करता है।
2. प्रत्येक RGB चैनल को sRGB स्थानांतरण फ़ंक्शन का उपयोग करके रेखीयकृत किया जाता है। यह गामा-एन्कोडेड डिस्प्ले मानों को रेखीय प्रकाश तीव्रता में बदलता है।
3. रेखीय मानों को मानव आँख की प्रत्येक चैनल के प्रति संवेदनशीलता द्वारा भारित किया जाता है — लाल के लिए 0.2126, हरे के लिए 0.7152, नीले के लिए 0.0722। योग रंग की सापेक्ष प्रदीप्ति है।
4. कंट्रास्ट अनुपात (L1 + 0.05) ÷ (L2 + 0.05) है, जहाँ L1 हल्के रंग की प्रदीप्ति है और L2 गहरे रंग की प्रदीप्ति है। अतिरिक्त 0.05 शुद्ध काले के लिए सूत्र को मान्य रखता है।
5. अनुपात की तुलना WCAG सीमाओं से की जाती है: AA सामान्य टेक्स्ट को कम से कम 4.5:1, AA बड़े टेक्स्ट को 3:1, AAA सामान्य टेक्स्ट को 7:1, और AAA बड़े टेक्स्ट को 4.5:1 चाहिए। बड़े टेक्स्ट का अर्थ कम से कम 18pt या 14pt बोल्ड है।

FAQ

WCAG कंट्रास्ट जाँच के बारे में सामान्य प्रश्न।

AA और AAA में क्या अंतर है?

AA अधिकांश वेब सामग्री के लिए न्यूनतम अनुरूपता स्तर है। इसके लिए सामान्य टेक्स्ट के लिए कम से कम 4.5:1 और बड़े टेक्स्ट के लिए 3:1 कंट्रास्ट अनुपात आवश्यक है। AAA एक उच्च मानक है जिसके लिए सामान्य टेक्स्ट के लिए 7:1 और बड़े टेक्स्ट के लिए 4.5:1 आवश्यक है। आप मुख्य सामग्री जैसे किसी समाचार साइट पर बॉडी कॉपी के लिए AAA को लक्षित कर सकते हैं, जबकि व्यापक डिज़ाइन के लिए AA का उपयोग कर सकते हैं। ब्रांड रंगों के साथ हर जगह AAA पूरा करना कठिन हो सकता है, इसलिए कई टीमें पूरी साइट पर AA को लक्षित करती हैं और जहाँ संभव हो प्रमुख टेक्स्ट को AAA तक बढ़ा देती हैं।

WCAG के अंतर्गत "बड़े टेक्स्ट" से क्या अभिप्राय है?

WCAG 2.x बड़े टेक्स्ट को सामान्य भार के लिए कम से कम 18 पॉइंट (24px), या बोल्ड भार के लिए 14 पॉइंट (लगभग 19px) के रूप में परिभाषित करता है। प्रतीक और आइकन जो किसी फ़ॉन्ट फ़ेस का भाग हैं, वही सीमाएँ अपनाते हैं। यदि आप सुनिश्चित नहीं हैं कि आपके UI पर कौन सी सीमा लागू होती है, तो दोनों जाँचें — AA Large की सीमा कम (3:1) है, इसलिए अधिकांश रंग जोड़ियाँ जो AA Normal में फ़ेल होती हैं, वास्तव में AA Large पास कर जाती हैं जब टेक्स्ट काफ़ी बड़ा हो।

मेरी रंग जोड़ी AA Large क्यों पास करती है लेकिन AA Normal में फ़ेल हो जाती है?

क्योंकि AA Large को केवल 3:1 अनुपात चाहिए जबकि AA Normal को 4.5:1 चाहिए। WCAG बड़े टेक्स्ट के लिए कम सीमा निर्धारित करता है क्योंकि बड़े अक्षर कम कंट्रास्ट के बावजूद पढ़ने में आसान होते हैं। एक रंग जोड़ी जो मान लीजिए 4.0:1 स्कोर करती है, वह AA Large (3:1 सीमा) पास करती है लेकिन AA Normal (4.5:1 सीमा) में फ़ेल हो जाती है। यह सफ़ेद पृष्ठभूमि पर अग्रभूमि के रूप में उपयोग किए जाने वाले हल्के ब्रांड रंगों के साथ बहुत सामान्य है।

क्या मैं अभिगम्यता ऑडिटिंग के लिए केवल इस टूल पर भरोसा कर सकता हूँ?

यह टूल एक चीज़ जाँचता है — दो ठोस रंगों के बीच WCAG 2.x कंट्रास्ट अनुपात। वास्तविक अभिगम्यता में और भी बहुत कुछ शामिल है: फ़ोकस संकेतक, फ़ॉन्ट आकार और भार, सूचना देने के एकमात्र तरीके के रूप में रंग, और स्क्रीन रीडर तथा ज़ूम टूल के साथ संगतता। अपने एप्लिकेशन की अभिगम्यता की पूरी तस्वीर के लिए इस कंट्रास्ट जाँच को अन्य ऑडिट विधियों के साथ उपयोग करें।

इनपुट कौन से रंग प्रारूप स्वीकार करता है?

आप 3, 4, 6, या 8 अंकों वाले hex कोड (# के साथ या बिना), पारंपरिक कॉमा सिंटैक्स या आधुनिक स्पेस-सेपरेटेड सिंटैक्स में rgb() और rgba() मान, किसी भी मानक ह्यू इकाई (deg, rad, grad, turn) के साथ hsl() और hsla(), hsv(), hwb(), और CSS Color Module Level 4 स्पेक के 150 नामित CSS रंगों में से कोई भी पेस्ट कर सकते हैं। रंग पूरी तरह से आपके डिवाइस पर पार्स किया जाता है।