परिणाम केवल जानकारी के उद्देश्य से दिए गए हैं और उनमें त्रुटियाँ हो सकती हैं। महत्वपूर्ण जानकारी की स्वतंत्र रूप से पुष्टि करें। इस टूल का उपयोग आपके अपने जोखिम पर है।
यह टूल क्या करता है
कलर कंट्रास्ट चेकर मापता है कि किसी बैकग्राउंड पर टेक्स्ट कितना पढ़ने लायक है। एक टेक्स्ट रंग और एक बैकग्राउंड रंग चुनें, और यह 1:1 (एक जैसे रंग) से लेकर 21:1 (सफ़ेद पर काला) तक का कंट्रास्ट अनुपात, एक लाइव प्रीव्यू, और यह दिखाता है कि यह जोड़ी WCAG की चारों सीमाएँ पार करती है या नहीं: सामान्य टेक्स्ट और बड़े टेक्स्ट दोनों के लिए AA और AAA।
अनुपात WCAG 2 के रिलेटिव-ल्यूमिनेंस फ़ॉर्मूले से निकाला जाता है: हर कलर चैनल को लीनियराइज़ किया जाता है, उसे वज़न दिया जाता है (हरे का वज़न सबसे ज़्यादा, नीले का सबसे कम), और दोनों में 0.05 जोड़कर हल्की ल्यूमिनेंस को गहरी ल्यूमिनेंस से भाग दिया जाता है। AA के लिए सामान्य टेक्स्ट पर 4.5:1 और बड़े टेक्स्ट (कम से कम 24px, या बोल्ड में 18.66px) पर 3:1 चाहिए। AAA इन्हें बढ़ाकर 7:1 और 4.5:1 कर देता है। गणना आपके ब्राउज़र में होती है।
कब इस्तेमाल करें
- बटनों के लिए ब्रांड रंग चुनते समय यह जाँचना कि उस पर सफ़ेद लेबल पढ़ने लायक रहते हैं।
- Lighthouse या axe के ऐसे एक्सेसिबिलिटी ऑडिट को ठीक करना जो कम कंट्रास्ट वाला टेक्स्ट बताता है।
- सेकेंडरी टेक्स्ट के लिए ऐसा ग्रे चुनना जो सेकेंडरी दिखने लायक हल्का हो, फिर भी AA पास करे।
- डार्क थीम डिज़ाइन करना, जहाँ मध्यम टोन वाले एक्सेंट रंग अक्सर गहरे बैकग्राउंड पर फ़ेल हो जाते हैं।
उदाहरण
#3b82f6 पर #ffffff
3.68:1 - AA large only
#ffffff पर #767676
4.54:1 - AA normal and large, fails AAA normal
#ffffff पर #1e293b
14.63:1 - passes all four
इस टूल के बारे में सवाल
चमकीले नीले बटन पर सफ़ेद टेक्स्ट फ़ेल क्यों होता है?
संतृप्त (saturated) मध्यम टोन वाले रंगों की ल्यूमिनेंस काफ़ी ज़्यादा होती है, इसलिए उन पर सफ़ेद टेक्स्ट अक्सर 3:1 और 4.5:1 के बीच आता है। यह बड़े, बोल्ड लेबल के लिए तो पास होता है, लेकिन बॉडी टेक्स्ट के लिए नहीं। बैकग्राउंड को एक-दो स्टेप गहरा करें, जब तक अनुपात 4.5:1 तक न पहुँच जाए।
मुझे किस स्तर का लक्ष्य रखना चाहिए, AA या AAA?
ज़्यादातर एक्सेसिबिलिटी कानून और नीतियाँ AA स्तर का ही हवाला देती हैं, इसलिए इसे न्यूनतम मानें। AAA एक सख्त लक्ष्य है जिसे लंबे पढ़े जाने वाले टेक्स्ट के लिए पूरा करना फ़ायदेमंद है, लेकिन यह हर एलिमेंट के लिए ज़रूरी नहीं है।
क्या कंट्रास्ट आइकन और बॉर्डर पर भी लागू होता है?
WCAG 2.1 अर्थपूर्ण ग्राफ़िक्स और इंटरफ़ेस कंपोनेंट्स के लिए कम से कम 3:1 माँगता है, जैसे इनपुट बॉर्डर, फ़ोकस रिंग और जानकारी देने वाले आइकन। इनके लिए बड़े टेक्स्ट वाले AA नतीजे को पैमाना मानें।
क्या मैं RGB या HSL में लिखा रंग जाँच सकता हूँ?
कलर पिकर हेक्स मानों के साथ काम करते हैं। दूसरे रूपों को पहले HEX से RGB कलर कन्वर्टर जैसे टूल्स या कलर कन्वर्टर से बदलें, फिर हेक्स कोड पेस्ट करें।
क्या यह टूल मुफ़्त है?
हाँ, यह मुफ़्त है। पंजीकरण या ईमेल की ज़रूरत नहीं। परिणाम इसी पेज पर मिलता है।
मेरा परिणाम कहाँ मिलेगा?
इसी पेज पर टूल का उपयोग करें। परिणाम यहीं दिखता है, ईमेल से प्राप्त करने की ज़रूरत नहीं है।