इस्तेमाल करने का तरीका
- टेक्स्ट (फ़ोरग्राउंड) और बैकग्राउंड का रंग HEX, rgb(), hsl() या किसी अन्य CSS फ़ॉर्मैट में दर्ज करें, या कलर पिकर इस्तेमाल करें।
- हर WCAG आवश्यकता के लिए कॉन्ट्रास्ट अनुपात और पास या फ़ेल नतीजा देखें।
- अगर कोई आवश्यकता पूरी नहीं होती, तो लक्ष्य चुनें और सुझाया गया रंग लागू करें। इससे ह्यू वही रहता है और सिर्फ़ हल्कापन बदलता है।
- उलटे रंग संयोजन को जाँचने के लिए “अदला-बदली” करें, जैसे गहरे बटन पर हल्का टेक्स्ट।
यह कैसे काम करता है
यह अनुपात WCAG 2.2 की परिभाषा के अनुसार है: हर रंग की सापेक्ष ल्यूमिनेंस की गणना उसके sRGB चैनलों से की जाती है, और अनुपात (हल्का + 0.05) ÷ (गहरा + 0.05) होता है। इसकी सीमा 1:1 (एक जैसे रंग) से 21:1 (सफेद पर काला) तक है।
जाँची गई आवश्यकताएँ: सफलता मानदंड 1.4.3 (AA) के तहत सामान्य टेक्स्ट के लिए 4.5:1 और बड़े टेक्स्ट के लिए 3:1 आवश्यक है; 1.4.6 (AAA) के तहत क्रमशः 7:1 और 4.5:1 आवश्यक है; 1.4.11 के तहत यूज़र इंटरफ़ेस के हिस्सों और अर्थपूर्ण ग्राफ़िक्स, जैसे इनपुट बॉर्डर और आइकन, के लिए 3:1 आवश्यक है। बड़ा टेक्स्ट कम-से-कम 24px सामान्य या लगभग 18.66px बोल्ड होता है। WCAG में मान को ऊपर की ओर राउंड करना मान्य नहीं है, इसलिए 4.49:1, 4.5:1 के करीब होने पर भी AA में विफल होता है; यहाँ दिखाया गया अनुपात राउंड नहीं, बल्कि काटकर छोटा किया गया है।
सुझाव में टेक्स्ट के रंग का ह्यू और क्रोमा OKLCH में बरकरार रखते हुए, लक्ष्य पूरा करने वाली सबसे नज़दीकी लाइटनेस खोजी जाती है—चाहे वह गहरी हो या हल्की। कॉन्ट्रास्ट अनुपात पठनीयता का केवल एक पहलू है: फ़ॉन्ट का वज़न, आकार और रंग देखने की क्षमता में अंतर भी मायने रखते हैं। WCAG 2.2 W3C की मौजूदा अनुशंसा है, जिसका संदर्भ ज़्यादातर सुलभता कानूनों में दिया जाता है।
उदाहरण
लगभग पास होने वाला ग्रे टेक्स्ट
सफेद पर #777777 का अनुपात 4.48:1 है। यह बड़े टेक्स्ट और UI घटकों के लिए पास होता है, लेकिन सामान्य टेक्स्ट के लिए AA में विफल होता है। पास होने वाला सबसे नज़दीकी ग्रे लगभग #767676 है, जिसका अनुपात 4.54:1 है।
ब्रांड बटन पर सफेद टेक्स्ट
#ff8800 पर सफेद टेक्स्ट का अनुपात लगभग 2.4:1 है, जो बड़े टेक्स्ट के 3:1 स्तर पर भी विफल होता है। आम तौर पर नारंगी रंग को गहरा करना या उसकी जगह गहरे रंग का टेक्स्ट इस्तेमाल करना इसका समाधान है; सुझाव दिखाता है कि टेक्स्ट का रंग कितना गहरा होना चाहिए।
फ़ॉर्म फ़ील्ड के बॉर्डर की जाँच
सफेद पर हल्के ग्रे बॉर्डर #cccccc का अनुपात लगभग 1.6:1 है। मानदंड 1.4.11 के तहत इनपुट की पहचान कराने वाले बॉर्डर के लिए 3:1 आवश्यक है, इसलिए लगभग #949494 या इससे गहरा रंग चाहिए।
अक्सर पूछे जाने वाले सवाल
WCAG AA के लिए कितना कॉन्ट्रास्ट अनुपात चाहिए?
सामान्य बॉडी टेक्स्ट के लिए 4.5:1, बड़े टेक्स्ट (24px या 18.66px बोल्ड) और UI घटकों तथा अर्थपूर्ण ग्राफ़िक्स के लिए 3:1। AAA में टेक्स्ट के लिए अनुपात 7:1 और बड़े टेक्स्ट के लिए 4.5:1 होना चाहिए।
क्या लोगो के टेक्स्ट या डिसेबल बटन के टेक्स्ट को भी मानक पूरा करना चाहिए?
नहीं। WCAG लोगो और ब्रांड नामों के टेक्स्ट, केवल सजावट के लिए इस्तेमाल किए गए टेक्स्ट और निष्क्रिय (डिसेबल किए गए) यूज़र इंटरफ़ेस घटकों के टेक्स्ट को छूट देता है।
दूसरे चेकर से मेरे नतीजे में थोड़ा अंतर क्यों है?
कुछ टूल अनुपात को एक दशमलव तक राउंड करते हैं या ऊपर की ओर राउंड कर देते हैं। WCAG सटीक मान की तुलना करता है, इसलिए यह टूल अनुपात को दो दशमलव तक काटकर दिखाता है। alpha के साथ दर्ज किए गए रंगों के कारण भी थोड़ा अंतर आ सकता है।
नई APCA कॉन्ट्रास्ट विधि के बारे में क्या?
APCA एक अलग तरीका है, जिसे WCAG के भविष्य के संस्करण के लिए प्रस्तावित किया गया है। यह WCAG 2.2 का हिस्सा नहीं है। यह टूल WCAG 2.2 को मापता है और मौजूदा एक्सेसिबिलिटी नियम इसी का संदर्भ देते हैं।
गोपनीयता
रंगों की जाँच आपके ब्राउज़र में होती है। कुछ भी अपलोड या सेव नहीं किया जाता।