कंट्रास्ट चेकर – Contrast Checker

यह कॉन्ट्रास्ट चेकर ADA अनुपालन के लिए WCAG और APCA रंग कॉन्ट्रास्ट का ऑडिट करता है - किसी भी वेबसाइट के लिए एक रंग अभिगम्यता…

✅ इस कॉन्ट्रास्ट चेकर से आपको ये मिलेगा: - WCAG 2.2 कंट्रास्ट अनुपात और APCA Lc, - पृष्ठ पर उजागर की गई समस्याओं वाले तत्व, - रंग उत्पन्न करने वाले सीएसएस नियम, स्रोत मानचित्रों के माध्यम से ट्रेस किए गए (यदि उपलब्ध हो), - कॉन्ट्रास्ट एनालाइजर और सुझाए गए विकल्पों के साथ अंतर्निर्मित कलर पिकर टूल। - सुधारों का लाइव पूर्वावलोकन, - CSS में सुधारों का निर्यात (स्रोत का पता लगाने वाली टिप्पणियों के साथ)। 🔍 इसे एक वेबसाइट कलर कंट्रास्ट चेकर के रूप में बनाया गया है जो स्यूडो-स्टेट्स, शैडो DOM, समान-ओरिजिन iframe और छवियों और ग्रेडिएंट्स पर टेक्स्ट की जांच करता है - न कि केवल सपाट पृष्ठभूमि की। ⚠️ डिबगर अनुमति आवश्यक है। इस कॉन्ट्रास्ट चेकर की कवरेज केवल क्रोम डेवलपर टूल्स प्रोटोकॉल के माध्यम से ही संभव है, जिसके लिए 'डिबगर' अनुमति की आवश्यकता होती है। एक बार कनेक्ट होने पर, क्रोम सभी टैब पर एक इन्फोबार दिखाता है और डिस्कनेक्ट होने पर भी उसे छुपाता नहीं है। ⚡ अत्यधिक अनुकूलित कार्यप्रवाह: • रंग संबंधी अभिगम्यता समस्याओं वाले सभी तत्वों को एक नज़र में देखें। • पूर्वावलोकन में बदलाव तुरंत दिखाई देते हैं, और कंट्रास्ट अनुपात और परिणाम की पुनर्गणना की जाती है। • स्टाइलशीट टैब पर कस्टम सीएसएस लागू करें; प्रभावित समस्याओं को सूची में चिह्नित किया गया है। • रंग कंट्रास्ट को मैन्युअल रूप से जांचने के लिए, बिल्ट-इन कलर पिकर टूल का उपयोग करें: अग्रभूमि सेट करने के लिए बाएं क्लिक करें, पृष्ठभूमि के लिए दाएं क्लिक करें, और अनुपात तुरंत अपडेट हो जाएगा। • एक्सक्लूज़न टैब का उपयोग करके उन सभी चीज़ों को छिपा दें जिन्हें आप ठीक नहीं कर रहे हैं, सिवाय उन चीज़ों के जिन्हें आप ठीक कर रहे हैं। 📐 निर्णयों के पीछे के मापदंड। यह कॉन्ट्रास्ट रेशियो चेकर WCAG और APCA आवश्यकताओं के अनुसार रंगों की स्पष्टता का परीक्षण करता है। APCA Lc का मूल्यांकन ब्रिज-PCA मानकों के आधार पर किया जाता है, जो WCAG मानकों से अधिक सख्त होते हैं — इसलिए ब्रिज-PCA पास होने का अर्थ हमेशा WCAG पास होना ही होता है। 🔬 APCA क्या है? APCA (एक्सेसिबल परसेप्चुअल कॉन्ट्रास्ट एल्गोरिदम) एक ऐसा मॉडल है जो यह ट्रैक करता है कि लोग स्क्रीन पर टेक्स्ट को कैसे पढ़ते हैं। समान wcag अनुपात वाले दो रंग जोड़े देखने में काफी अलग लग सकते हैं, और उनका APCA Lc (ल्यूमिनेंस कॉन्ट्रास्ट) इसे दर्शाता है: एक जोड़ा wcag मानकों को पूरा कर सकता है, फिर भी पढ़ने में मुश्किल महसूस हो सकता है। यह वेबसाइट कलर एक्सेसिबिलिटी चेकर इन दोनों संख्याओं की गणना करता है। 🚧 सीमाएँ: 1. अन्य सभी वेबसाइट एक्सेसिबिलिटी चेकर की तरह, यह भी सर्वोत्तम प्रयास के आधार पर अनुमान देता है, न कि अनुपालन प्रमाणपत्र। 2. कवरेज केवल पाठ-आधारित है; गैर-पाठ तत्वों (wcag 1.4.11) की जाँच कार्यसूची में है। 3. क्रॉस-ओरिजिन आईफ्रेम में प्रवेश नहीं किया जाता है। 4. जटिल पृष्ठभूमि और एनिमेशन को सीमित संख्या में स्थानिक और लौकिक बिंदुओं पर सैंपल किया जाता है; सबसे खराब सैंपल का अनुपात बताया जाता है लेकिन फिर भी आशावादी हो सकता है; सैंपलर रेंडरिंग कलाकृतियों से भी गुमराह हो सकता है। 5. अत्यधिक गतिशील साइटें भ्रामक समस्याएं उत्पन्न कर सकती हैं। 6. यह कलर कॉन्ट्रास्ट चेकर छवियों पर स्वचालित रूप से OCR नहीं चलाता है; शामिल कलर पिकर टूल के माध्यम से सार्थक टेक्स्ट वाली छवियों का परीक्षण करें। 🔒 गोपनीयता और अनुमतियाँ। ▸ यह आपके कंप्यूटर पर ही चलता है; वेबपेज का कोई भी डेटा कभी भी आपके कंप्यूटर से बाहर नहीं जाता है। ▸ 'activeTab' के लिए ही: टूलबार आइकन पर क्लिक करने पर विश्लेषण स्क्रिप्ट इंजेक्ट की जाती है। ▸ शैडो DOM और iframe में प्रवेश करने, CSS स्रोतों का पता लगाने और जटिल पृष्ठभूमि का नमूना लेने के लिए 'डीबगर' अनुमति आवश्यक है। 🧮 सटीकता संबंधी विवरण। अर्ध-पारदर्शी टेक्स्ट और पूर्ववर्ती अपारदर्शिता को सही ढंग से संभाला जाता है: चमक मापने से पहले अग्रभूमि को उसकी वास्तविक पृष्ठभूमि पर संयोजित किया जाता है, इसलिए रिपोर्ट किया गया अनुपात वही होता है जो उपयोगकर्ता वास्तव में देखते हैं। व्यापक रंग संयोजन फ़ंक्शन — oklch, lab, lch, color(display-p3) — भी समर्थित हैं, जो रंग संयोजन से बाहर होने पर sRGB में परिवर्तित हो जाते हैं। 🎨 छवियों और ग्रेडिएंट के ऊपर टेक्स्ट। अधिकांश समान टूल के विपरीत, यह टूल नॉन-फ्लैट बैकग्राउंड को अनदेखा नहीं करता और न ही 'getComputedStyle' / 'CSS.getBackgroundColors' द्वारा दी गई जानकारी पर भरोसा करता है। यह ब्राउज़र के पेंट ऑर्डर की जांच करके वास्तविक बैकड्रॉप तैयार करता है — अपारदर्शिता, ब्लेंड मोड, लीनियर ग्रेडिएंट, बैकड्रॉप-फ़िल्टर — और जब यह पर्याप्त नहीं होता, तो यह कलर कंट्रास्ट टूल टेक्स्ट के स्थान पर रेंडर किए गए पिक्सल का सैंपल लेता है। ❓ प्रश्नोत्तर 📌 एक ही रंग के जोड़े को कभी-कभी WCAG और APCA के तहत अलग-अलग फैसले क्यों मिलते हैं? WCAG चमक को मापता है; APCA अवधारणात्मक कंट्रास्ट को मापता है। 4.5:1 से अधिक का अनुपात होने पर भी यह ब्रिज-PCA Lc सीमा से कम पड़ सकता है — जो एक अधिक सख्त मॉडल है। 📌 क्या APCA, WCAG का स्थान लेता है? नहीं — APCA इसका विकल्प नहीं है, बल्कि एक उपयोगी दूसरी राय है। यह कॉन्ट्रास्ट चेकर दोनों की रिपोर्ट देता है। 📌 क्या मैं इस एक्सेसिबिलिटी चेकर से किसी लोकल फ़ाइल या अपने डेवलपमेंट सर्वर को स्कैन कर सकता हूँ? ↳ हां। एक्सटेंशन सेटिंग में "फ़ाइल URL तक पहुंच की अनुमति दें" विकल्प को सक्षम करें। file:// या localhost URL खोलें और टूलबार आइकन पर क्लिक करें। केवल chrome://, Chrome वेब स्टोर और अन्य प्रतिबंधित स्कीमों को ही एक्सेस नहीं किया जाएगा। 📌 क्या यह टूल एडीए अनुपालन को प्रमाणित करता है? नहीं। यह केवल रंग कंट्रास्ट की जाँच करता है — जो कि अभिगम्यता का एक पहलू है। ADA अनुपालन एक कानूनी निर्धारण है जिसमें कई मानक और मानदंड (शब्दार्थ, कीबोर्ड एक्सेस, ऑल्ट टेक्स्ट, कैप्शन आदि) शामिल होते हैं और इसका मूल्यांकन एक योग्य पेशेवर द्वारा किया जाना चाहिए।