दो रंगों के बीच कंट्रास्ट अनुपात जाँचें और देखें कि वह WCAG AA और AAA पास करता है या नहीं — लाइव, आपके ब्राउज़र में।
कंट्रास्ट अनुपात वही संख्या है जिससे WCAG तय करता है कि टेक्स्ट पढ़ने लायक़ है या नहीं। यह दो रंगों की सापेक्ष ल्यूमिनेंस की तुलना 1:1 (एक जैसे) से 21:1 (शुद्ध सफ़ेद पर शुद्ध काला) के पैमाने पर करता है। स्तर AA पर WCAG सामान्य टेक्स्ट के लिए कम से कम 4.5:1 और बड़े टेक्स्ट के लिए 3:1 माँगता है; स्तर AAA इन्हें बढ़ाकर 7:1 और 4.5:1 कर देता है। इंटरफ़ेस के घटकों — आइकन बटन, इनपुट की किनारियाँ, फ़ोकस रिंग — को अपने बग़ल वाले रंग के मुक़ाबले 3:1 चाहिए।
यह गणित चमक का सीधा अंतर नहीं है। पहले हर sRGB चैनल को रैखिक किया जाता है: 0.03928 की सीमा से नीचे उसे 12.92 से भाग दिया जाता है, वरना सामान्यीकृत करके 2.4 की घात पर उठाया जाता है। यह क़दम इसलिए है क्योंकि स्क्रीन के मान गामा-एनकोडेड होते हैं और उत्सर्जित रोशनी के समानुपाती नहीं होते। फिर रैखिक चैनलों को लाल के लिए 0.2126, हरे के लिए 0.7152 और नीले के लिए 0.0722 का भार दिया जाता है, जो दिखाता है कि हर मूल रंग अनुभूत चमक में कितना योगदान देता है — इसमें हरा बहुत आगे है। आख़िर में दोनों ल्यूमिनेंस (L1 + 0.05) / (L2 + 0.05) में जाते हैं, जहाँ 0.05 वाला पद उस रोशनी का मॉडल है जो असली स्क्रीन काला दिखाते हुए भी परावर्तित करती है। यही स्थिरांक वजह है कि सफ़ेद पर काला ठीक 21:1 होता है, अनंत नहीं।
इसे रिलीज़ से पहले इस्तेमाल करें, क्योंकि ब्रांड पैलेट लोगों की उम्मीद से कहीं ज़्यादा बार फ़ेल होते हैं। सफ़ेद पर #777777 जैसा मध्यम धूसर 4.48:1 पर पहुँचता है — चमकीले मॉनिटर पर आरामदायक, AA की सीमा से सौवें हिस्से भर कम, और धूप में फ़ोन पर सचमुच एक समस्या। सुझाव बटन ठीक इसी स्थिति के लिए है: यह टेक्स्ट रंग की HSL लाइटनेस को आधा-आधा प्रतिशत ऊपर-नीचे चलाता है और 4.5:1 तक पहुँचने वाले पहले मान पर रुक जाता है, आपके चुने ह्यू और सैचुरेशन को बनाए रखते हुए। एक ईमानदार सीमा: यह अनुपात सिर्फ़ ल्यूमिनेंस मापता है, इसलिए यह वर्णांध पाठकों के लिए ह्यू की उलझन के बारे में कुछ नहीं कहता, और बड़े-टेक्स्ट नियम से आगे फ़ॉन्ट की मोटाई के बारे में भी नहीं। सब कुछ आपके ब्राउज़र में लोकल चलता है।
सापेक्ष ल्यूमिनेंस: 0–1 में सामान्यीकृत हर sRGB चैनल c के लिए, c ≤ 0.03928 होने पर c / 12.92 और अन्यथा ((c + 0.055) / 1.055)^2.4 लें; फिर L = 0.2126·R + 0.7152·G + 0.0722·B। कंट्रास्ट अनुपात = (L1 + 0.05) / (L2 + 0.05), जहाँ L1 दोनों में से हल्का रंग है। सीमाएँ: सामान्य टेक्स्ट AA के लिए 4.5:1, सामान्य टेक्स्ट AAA के लिए 7:1, बड़े टेक्स्ट AA और UI घटकों के लिए 3:1, और बड़े टेक्स्ट AAA के लिए 4.5:1।
18pt (24px) या उससे बड़ा टेक्स्ट, या बोल्ड होने पर 14pt (लगभग 18.7px) या उससे बड़ा। बड़े टेक्स्ट को AA पर सिर्फ़ 3:1 और AAA पर 4.5:1 चाहिए, क्योंकि मोटे और बड़े अक्षर कम कंट्रास्ट पर भी पढ़ने लायक़ रहते हैं।
क्योंकि सीमा एकदम कड़ी है। सफ़ेद पर #777777 देता है 4.48:1 और AA माँगता है 4.5:1, यानी दो सौवें हिस्से से फ़ेल। उसे एक क़दम गहरा करके #767676 करने पर 4.54:1 मिलता है और वह पास हो जाता है — सुझाव बटन ठीक यही करता है।
हाँ। WCAG की सफलता कसौटी 1.4.11 किसी यूज़र इंटरफ़ेस घटक या अर्थपूर्ण ग्राफ़िक और उसके बग़ल के रंगों के बीच 3:1 माँगती है। इनपुट की किनारियाँ, टॉगल की स्थितियाँ, फ़ोकस संकेतक और सिर्फ़-आइकन वाले बटन सब इसी में आते हैं।
यह टूल WCAG 2.x वाला अनुपात लागू करता है, जिसे अभी सुलभता क़ानून, ऑडिट और डिज़ाइन सिस्टम संदर्भ मानते हैं। APCA वह अवधारणात्मक एल्गोरिदम है जो WCAG 3 के लिए प्रस्तावित है; वह अलग संख्याएँ देता है और अभी अनुपालन की शर्त नहीं है।
नहीं। ल्यूमिनेंस और अनुपात आपके डिवाइस पर JavaScript में गिने जाते हैं। कुछ भी किसी सर्वर को नहीं भेजा जाता और कहीं सहेजा नहीं जाता।
Vai.la किसी भी URL को क्लिक आंकड़ों, QR Code और आपके अपने बायोलिंक के साथ एक शॉर्ट लिंक में बदल देता है।
टूल्स का इस्तेमाल कैसे होता है या उनके परिणामों के आधार पर लिए गए निर्णयों के लिए Vai.la ज़िम्मेदार नहीं है।