कॉन्ट्रास्ट चेकर
टेक्स्ट रंग और बैकग्राउंड रंग चुनें और सटीक WCAG कॉन्ट्रास्ट रेशियो देखें, साथ ही यह भी कि यह AA या AAA पास करता है या नहीं.
बड़ा टेक्स्ट प्रीव्यू (18pt+)
सामान्य टेक्स्ट प्रीव्यू, जिस साइज़ में ज़्यादातर बॉडी टेक्स्ट होता है.
बैज का मतलब क्या है
WCAG 2.1 के मुताबिक़ AA पूरा करने के लिए नॉर्मल टेक्स्ट के लिए 4.5:1 और बड़े टेक्स्ट (18pt+, या 14pt+ बोल्ड) के लिए 3:1 रेशियो चाहिए. AAA ज़्यादा सख़्त है: नॉर्मल टेक्स्ट के लिए 7:1, बड़े टेक्स्ट के लिए 4.5:1.
यह कैसे काम करता है
रेश्यो WCAG के असली रिलेटिव-लुमिनेंस फ़ॉर्मूले से कैलकुलेट होता है, कोई अनुमान नहीं. हर चैनल को 255 से डिवाइड किया जाता है, फिर sRGB गामा कर्व को हटाने के लिए लीनियरली ट्रांसफ़ॉर्म किया जाता है, और लीनियर चैनलों को 0.2126 रेड, 0.7152 ग्रीन और 0.0722 ब्लू से वेट किया जाता है, जो दिखने वाली ब्राइटनेस में हर रंग के योगदान को दिखाता है. कॉन्ट्रास्ट रेश्यो है (हल्का + 0.05) / (गहरा + 0.05), जो एक जैसे रंगों के लिए 1:1 और शुद्ध काले पर शुद्ध सफ़ेद के लिए 21:1 के बीच होता है.
'लार्ज टेक्स्ट' की एक सटीक परिभाषा है जो अक्सर सही तरीके से नहीं बताई जाती: 18pt (लगभग 24px) रेगुलर, या 14pt (लगभग 18.7px) बोल्ड. यही वजह है कि 3.2:1 वाला कलर पेयर एक हेडलाइन के लिए पूरी तरह पास हो सकता है और बॉडी टेक्स्ट के लिए फेल. फ़ॉर्मूला सिमेट्रिक है: फ़ोरग्राउंड और बैकग्राउंड स्वैप करने से रेश्यो कभी नहीं बदलता, इसलिए स्वैप बटन सिर्फ़ प्रीव्यू के लिए है. एक ईमानदार लिमिट: यह रेश्यो सिर्फ़ ब्राइटनेस का अंतर मापता है, इसलिए लाल पर हरा थ्योरी में 4.5:1 पास कर सकता है और फिर भी कलर विज़न डेफिशिएंसी वाले किसी व्यक्ति के लिए पढ़ना मुश्किल हो सकता है.
दोनों रंग हर बदलाव पर इस पेज के जावास्क्रिप्ट में इन्हीं फ़ॉर्मूलों से गुज़रते हैं. कोई कलर वैल्यू कहीं भेजी नहीं जाती, यह आप कलर पिकर घुमाते समय नेटवर्क टैब में देख सकते हैं.
सामान्य प्रश्न
AA और AAA में क्या फ़र्क़ है?
AA वह बेसलाइन है जिसे ज़्यादातर साइट टारगेट करती हैं: नॉर्मल टेक्स्ट के लिए 4.5:1, बड़े टेक्स्ट (18pt+, या बोल्ड 14pt+) के लिए 3:1. AAA ज़्यादा सख़्त है, कम दृष्टि वाले यूज़र के लिए बनाए गए कंटेंट के लिए: नॉर्मल 7:1, बड़ा 4.5:1.
क्या यह इमेज चेक करता है या सिर्फ़ फ़्लैट रंग?
सिर्फ़ दो सॉलिड रंग, बैकग्राउंड पर टेक्स्ट. किसी फ़ोटो या ग्रेडिएंट पर टेक्स्ट के लिए, उन सबसे गहरे और सबसे हल्के हिस्सों के मुक़ाबले कॉन्ट्रास्ट जांचें जिन पर वह बैठ सकता है.
क्या यह वही फ़ॉर्मूला है जो ब्राउज़र और ऑडिट इस्तेमाल करते हैं?
हां. यह स्टैंडर्ड WCAG 2.1 रिलेटिव ल्यूमिनेंस और कॉन्ट्रास्ट रेशियो फ़ॉर्मूला है, वही जो Lighthouse और axe इस्तेमाल करते हैं.