WCAG कंट्रास्ट चेकिंग: एक प्रैक्टिकल गाइड
प्रकाशित 2026-07-15
कंट्रास्ट रेशियो सिर्फ़ एक कम्प्लायंस चेकबॉक्स नहीं है, यह ऐसे टेक्स्ट के बीच का फ़र्क़ है जिसे लोग पढ़ सकते हैं और जिसे नहीं पढ़ सकते। यहां है कि यह कैसे कैलकुलेट होता है और थ्रेशोल्ड असल में क्या मतलब रखते हैं।
कंट्रास्ट क्यों मायने रखता है
ऐसा टेक्स्ट जो अपने बैकग्राउंड के साथ पर्याप्त कंट्रास्ट नहीं करता, सभी के लिए पढ़ना मुश्किल होता है, और कम दृष्टि या कलर ब्लाइंडनेस वाले लोगों के लिए पूरी तरह अपठनीय हो सकता है। वेब कंटेंट एक्सेसिबिलिटी गाइडलाइंस (WCAG) ख़ास तौर पर न्यूनतम कंट्रास्ट रेशियो सेट करती हैं ताकि टेक्स्ट विज़ुअल क्षमताओं की सबसे व्यापक संभव रेंज के लिए पठनीय रहे, और इन्हें पूरा करना एक असली यूज़ेबिलिटी सुधार भी है और, कई क्षेत्राधिकारों में, पब्लिक-फ़ेसिंग वेबसाइटों के लिए एक क़ानूनी ज़रूरत भी है।
कंट्रास्ट रेशियो असल में कैसे कैलकुलेट होता है
कंट्रास्ट रेशियो टेक्स्ट कलर और बैकग्राउंड कलर की रिलेटिव ल्यूमिनेंस (परसीव्ड ब्राइटनेस) के बीच एक तुलना है, जिसे 1:1 (एक जैसा, बिल्कुल कोई कंट्रास्ट नहीं) से लेकर 21:1 (शुद्ध सफ़ेद पर शुद्ध काला, अधिकतम संभव कंट्रास्ट) तक की रेशियो के रूप में व्यक्त किया जाता है। यह एक सिंपल ब्राइटनेस तुलना नहीं है, ल्यूमिनेंस एक फ़ॉर्मूला इस्तेमाल करके कैलकुलेट होती है जो लाल, हरे, और नीले को अलग-अलग वेट देता है, क्योंकि मानव आंख उसी इंटेंसिटी पर हरे को लाल या नीले से ज़्यादा चमकीला महसूस करती है, और यह इस बात को ध्यान में रखने के लिए एक गामा करेक्शन लागू करता है कि मॉनिटर असल में रंग कैसे दिखाते हैं। आपको इसे हाथ से कैलकुलेट करने की ज़रूरत नहीं है, लेकिन यह जानना कि यह परसीव्ड ब्राइटनेस के बारे में है (सिर्फ़ रॉ RGB वैल्यूज़ नहीं), कुछ वाक़ई काउंटरइंट्यूटिव नतीजों को समझने में मदद करता है, जैसे कुछ मिड-टोन रंग जो काफ़ी अलग दिखते हैं फिर भी क्यों फ़ेल हो सकते हैं।
असली थ्रेशोल्ड
WCAG 2.1 दो कॉन्फ़ॉर्मेंस लेवल परिभाषित करता है। AA, वह स्टैंडर्ड जिसे ज़्यादातर संगठन टारगेट करते हैं, नॉर्मल टेक्स्ट के लिए कम से कम 4.5:1 और बड़े टेक्स्ट के लिए 3:1 (18pt रेगुलर या 14pt बोल्ड और उससे बड़ा के रूप में परिभाषित) कंट्रास्ट रेशियो की मांग करता है। AAA, एक स्ट्रिक्टर लेवल, नॉर्मल टेक्स्ट के लिए 7:1 और बड़े टेक्स्ट के लिए 4.5:1 की मांग करता है। ज़्यादातर लीगल एक्सेसिबिलिटी रिक्वायरमेंट्स (जैसे US में ADA, WCAG के ज़रिए इंटरप्रेट की गई, या EU में EN 301 549 स्टैंडर्ड) बेसलाइन के रूप में AA को रेफ़र करती हैं, AAA को आम तौर पर एक सख़्त ज़रूरत के बजाय एक स्ट्रेच गोल की तरह ट्रीट किया जाता है।
कॉमन कंट्रास्ट ग़लतियां
सफ़ेद बैकग्राउंड पर हल्का ग्रे टेक्स्ट अब तक की सबसे कॉमन फ़ेलियर है, यह अक्सर डिज़ाइन मॉकअप में "क्लीन" और "मॉडर्न" दिखता है लेकिन AA में बुरी तरह फ़ेल होता है और कई यूज़र्स के लिए वाक़ई पढ़ना मुश्किल होता है। फ़ॉर्म फ़ील्ड्स के अंदर प्लेसहोल्डर टेक्स्ट अक्सर बहुत कम-कंट्रास्ट होता है, और चूंकि टाइप करना शुरू करते ही यह ग़ायब हो जाता है, डिज़ाइनर अक्सर नोटिस नहीं करते कि यह एक समस्या है। फ़ोटो या ग्रेडिएंट पर ओवरलेड टेक्स्ट रिस्की होता है क्योंकि कंट्रास्ट रेशियो इमेज के एक हिस्से में पास हो सकती है और दूसरे में फ़ेल, टेक्स्ट के पीछे एक सॉलिड-कलर ओवरले या टेक्स्ट शैडो जोड़ना एक कॉमन फ़िक्स है। ब्रांड कलर, ख़ासकर पेस्टल या मिड-सैचुरेशन ब्रांड पैलेट, टेक्स्ट कलर के रूप में इस्तेमाल होने पर अक्सर कंट्रास्ट रिक्वायरमेंट्स में फ़ेल हो जाते हैं और उन्हें ख़ास तौर पर टेक्स्ट के लिए रिज़र्व्ड एक डार्कर या लाइटर वैरिएंट की ज़रूरत होती है।
अपने ख़ुद के रंगों को कैसे चेक करें
अपना फ़ोरग्राउंड (टेक्स्ट) कलर और बैकग्राउंड कलर चुनें, फिर उस टेक्स्ट साइज़ के लिए जो आप इस्तेमाल कर रहे हैं, नतीजे में मिली रेशियो को AA और AAA दोनों थ्रेशोल्ड के मुक़ाबले चेक करें। अगर कोई कॉम्बिनेशन फ़ेल होता है, तो सबसे भरोसेमंद फ़िक्स आमतौर पर टेक्स्ट कलर को डार्क करना (हल्के बैकग्राउंड के लिए) या हल्का करना (डार्क बैकग्राउंड के लिए) होता है जब तक कि यह थ्रेशोल्ड पार न कर जाए, बैकग्राउंड बदलने के बजाय, क्योंकि बैकग्राउंड कलर अक्सर टेक्स्ट कलर से ज़्यादा ब्रांड आइडेंटिटी से जुड़ा होता है।