अभिगम्यता के लिए रंग कंट्रास्ट कैसे जाँचें
लगभग 12 में से 1 पुरुष और 200 में से 1 महिला को किसी प्रकार की रंग दृष्टि कमी होती है। लाखों और लोगों की दृष्टि कम है, उम्र बढ़ती आँखें हैं, या तेज धूप में स्क्रीन देख रहे हैं। यदि आपके टेक्स्ट में इसके पृष्ठभूमि के साथ पर्याप्त कंट्रास्ट नहीं है, तो ये लोग इसे नहीं पढ़ सकते। रंग कंट्रास्ट सिर्फ अच्छा-होना नहीं है, यह एक मुख्य पहुँच आवश्यकता है। ब्राउज़र-आधारित कंट्रास्ट चेकर पूरा काम स्थानीय रूप से संभालता है, बिना किसी रंग या डेटा को सर्वर पर अपलोड किए।
WCAG क्या आवश्यक है
वेब सामग्री पहुँच दिशानिर्देश (WCAG) टेक्स्ट और उसके पृष्ठभूमि के बीच न्यूनतम कंट्रास्ट अनुपात परिभाषित करते हैं:
| स्तर | सामान्य टेक्स्ट | बड़ा टेक्स्ट | गैर-टेक्स्ट UI |
|---|---|---|---|
| AA (न्यूनतम) | 4.5:1 | 3:1 | 3:1 |
| AAA (बेहतर) | 7:1 | 4.5:1 | 3:1 |
«बड़ा टेक्स्ट» का अर्थ है 18px बोल्ड या 24px नियमित और उससे अधिक। कंट्रास्ट अनुपात 1:1 (कोई कंट्रास्ट नहीं, सफेद पर सफेद) से 21:1 (अधिकतम कंट्रास्ट, सफेद पर काला) तक होता है।
कंट्रास्ट कैसे जांचें
- अपने रंग चुनें: HEX कोड, RGB मान, या रंग चयनकर्ता का उपयोग करके अग्रभूमि (टेक्स्ट) और पृष्ठभूमि रंग दर्ज करें।
- परिणाम जांचें: उपकरण तुरंत कंट्रास्ट अनुपात दिखाता है और बताता है कि क्या आपका संयोजन सामान्य और बड़े टेक्स्ट दोनों के लिए WCAG AA और AAA पास करता है।
- यदि आवश्यक हो तो समायोजित करें: यदि कंट्रास्ट विफल होता है, तो आवश्यक स्तर तक पहुंचने तक टेक्स्ट को गहरा करें या पृष्ठभूमि को हल्का करें (या इसके विपरीत)।
रंग कंट्रास्ट मानकों का संक्षिप्त इतिहास
WCAG से पहले, वेब पहुँच विक्रेता-विशिष्ट नियमों की एक पैचवर्क थी। W3C ने 1999 में WCAG 1.0 प्रकाशित किया, कंट्रास्ट मार्गदर्शन के साथ लेकिन कोई विशिष्ट अनुपात नहीं। WCAG 2.0 (2008) ने डॉ. Lillian Yetenekian और IBM रिसर्च लैब से रंग विज्ञान पर आधारित 4.5:1 / 7:1 सूत्र पेश किया, कम दृष्टि के शोधकर्ताओं के इनपुट के साथ। सूत्र इस तरह डिज़ाइन किया गया है कि 20/40 दृष्टि (हल्की कम दृष्टि) वाला व्यक्ति AA-अनुपालन टेक्स्ट पढ़ सकता है, और 20/80 दृष्टि (महत्वपूर्ण कम दृष्टि) वाला व्यक्ति AAA-अनुपालन टेक्स्ट पढ़ सकता है।
WCAG 2.1 (2018) ने UI घटकों (गैर-टेक्स्ट के लिए 3:1), ग्राफिकल ऑब्जेक्ट्स और फोकस संकेतक के लिए कंट्रास्ट आवश्यकताएँ जोड़ीं। WCAG 2.2 (2023) ने लक्ष्य आकार और फोकस दृश्यता के आसपास अधिक आवश्यकताएँ जोड़ीं।
वर्तमान WCAG 3.0 कार्य मसौदा एक नया कंट्रास्ट सूत्र (APCA, सुलभ संवेदी कंट्रास्ट एल्गोरिथम) प्रस्तावित करता है जो मानव धारणा से बेहतर मेल खाता है, विशेष रूप से गहरे टेक्स्ट के लिए। APCA अभी तक W3C सिफारिश नहीं है लेकिन पहले से ही कुछ उपकरणों द्वारा पूर्वावलोकन के रूप में समर्थित है।
WCAG का कानूनी अपनापन स्थिर रहा है:
- अमेरिका: पुनर्वास अधिनियम का खंड 508 (संघीय) और ADA केस लॉ WCAG 2.0 / 2.1 AA की आवश्यकता है
- EU: वेब पहुँच निर्देश (2016/2102) और यूरोपीय पहुँच अधिनियम (2025) EN 301 549 की आवश्यकता है, जो WCAG 2.1 AA है
- UK: सार्वजनिक क्षेत्र निकाय पहुँच नियम WCAG 2.1 AA की आवश्यकता है
- कनाडा: संघीय क्षेत्र के लिए ACA (एक्सेसिबल कनाडा अधिनियम), व्यवसायों के लिए AODA (ओंटारियो)
- ऑस्ट्रेलिया: DDA केस लॉ WCAG 2.1 AA को मानक के रूप में मानता है
- जापान: JIS X 8341-3:2016 (WCAG 2.0 पर आधारित)
अधिकांश सार्वजनिक वेबसाइटों के लिए, WCAG 2.1 AA वास्तविक कानूनी न्यूनतम है।
कंट्रास्ट अनुपात कैसे गणना किया जाता है
कंट्रास्ट अनुपात प्रत्येक रंग की सापेक्ष चमक का उपयोग करके गणना किया जाता है:
- प्रत्येक रंग को sRGB से रैखिक RGB में परिवर्तित करें (गामा सुधार)
- सापेक्ष चमक की गणना करें: L = 0.2126 R + 0.7152 G + 0.0722 B
- कंट्रास्ट = (L_उजला + 0.05) / (L_गहरा + 0.05)
परिणाम 1 (कोई कंट्रास्ट नहीं) से 21 (अधिकतम कंट्रास्ट) तक की संख्या है। 0.05 ऑफसेट शून्य से विभाजन को रोकते हैं और कथित कंट्रास्ट में परिवेश प्रकाश के योगदान को थोड़ा मॉडल करते हैं।
सूत्र को जानबूझकर निर्धारक और गणनीय होने के लिए डिज़ाइन किया गया था, ताकि वही रंग हमेशा वही अनुपात उत्पन्न करें। यह इन का हिसाब नहीं रखता:
- रंग अंधापन: एक लाल/हरा जोड़ी 7:1 अनुपात हो सकता है लेकिन लाल/हरे रंग अंधेपन वाले व्यक्ति के लिए अदृश्य हो सकता है
- बोल्ड से परे फ़ॉन्ट वज़न: अति-पतले या हेयरलाइन फ़ॉन्ट को उच्च कंट्रास्ट की आवश्यकता होती है
- एंटी-एलियासिंग कलाकृतियाँ: बहुत पतले स्ट्रोक रंग मान से सुझाए गए हल्के दिखाई दे सकते हैं
- पृष्ठभूमि पैटर्न: टेक्स्ट के पीछे ग्रेडिएंट, चित्र, या शोर प्रभावी कंट्रास्ट को कम करते हैं
इसीलिए WCAG जाँच आवश्यक है लेकिन पर्याप्त नहीं। विविध उपयोगकर्ताओं (रंग अंधेपन वाले लोगों सहित) के साथ दृश्य समीक्षा बाकी को पकड़ती है।
सामान्य कंट्रास्ट गलतियाँ
सफेद पर हल्का ग्रे टेक्स्ट: #ffffff पर #999999 का अनुपात केवल 2.8:1 है। यह WCAG AA विफल करता है। यह सही दृष्टि वाले डिज़ाइनर के लिए «स्वच्छ» दिख सकता है, लेकिन कई लोगों के लिए अपठनीय है।
रंगीन पृष्ठभूमि पर रंगीन टेक्स्ट: सफेद टेक्स्ट के साथ एक नीला बटन अक्सर पास होता है, लेकिन सफेद टेक्स्ट वाला हरा बटन नहीं हो सकता। हमेशा जांचें, आप आँख से कंट्रास्ट अनुपात का निर्णय नहीं ले सकते।
प्लेसहोल्डर टेक्स्ट: फॉर्म फ़ील्ड प्लेसहोल्डर कुख्यात रूप से कम कंट्रास्ट के होते हैं। हालांकि WCAG प्लेसहोल्डर को कंट्रास्ट अनुपात पूरा करने की कड़ाई से आवश्यकता नहीं करता है, उपयोगकर्ताओं को अभी भी उन्हें पढ़ने की आवश्यकता है।
डार्क मोड: डिज़ाइनर अक्सर «सूक्ष्म» लुक के लिए डार्क ग्रे पृष्ठभूमि पर मध्यम ग्रे टेक्स्ट का उपयोग करते हैं। यह कंट्रास्ट जाँच को बार-बार विफल करता है।
चित्रों पर टेक्स्ट: हीरो छवि पर रखा गया टेक्स्ट अक्सर तब पास होता है जब छवि गहरी होती है और तब विफल होता है जब छवि हल्की होती है। छवियों पर टेक्स्ट के पीछे एक गहरा/हल्का ग्रेडिएंट ओवरले या ठोस पृष्ठभूमि का उपयोग करें।
ब्रांड रंग बदलाव: कॉर्पोरेट पहचान अक्सर एक प्राथमिक ब्रांड रंग निर्धारित करती है। यदि वह रंग बॉडी टेक्स्ट के रूप में विफल होता है, तो इसे शीर्षकों के लिए उपयोग करें (बड़ा टेक्स्ट, 3:1 सीमा) और बॉडी के लिए गहरा शेड का उपयोग करें।
लिंक रंग: लिंक आसपास के टेक्स्ट से अलग होने चाहिए। WCAG को लिंक और बॉडी टेक्स्ट के बीच 3:1 अनुपात की आवश्यकता है, साथ ही एक और दृश्य संकेत (अंडरलाइन, बोल्ड, या आइकन)।
फोकस संकेतक: फोकस किए गए बटन या लिंक के चारों ओर की रूपरेखा को इसकी पृष्ठभूमि के विरुद्ध 3:1 कंट्रास्ट को पूरा करना चाहिए। ब्राउज़र डिफ़ॉल्ट फोकस रिंग आमतौर पर सुरक्षित होते हैं; कस्टम फोकस शैलियाँ अक्सर विफल होती हैं।
सामान्य चूक
- केवल शीर्षकों का परीक्षण: पृष्ठ पर प्रत्येक टेक्स्ट आकार और वजन संयोजन के लिए कंट्रास्ट जाँच की जानी चाहिए। बॉडी टेक्स्ट, कैप्शन, लेबल, बटन, आइकन और फॉर्म फ़ील्ड सभी की जाँच आवश्यक है।
- हॉवर और सक्रिय अवस्थाओं को भूलना: डिफ़ॉल्ट के रूप में कंट्रास्ट पास करने वाला एक लिंक हॉवर (हल्का रंग) या सक्रिय (विभिन्न पृष्ठभूमि) पर विफल हो सकता है। सभी अवस्थाओं की जाँच करें।
- अक्षम अवस्थाएँ अनदेखी: WCAG स्पष्ट रूप से कंट्रास्ट आवश्यकताओं से अक्षम अवस्थाओं को बाहर करता है, लेकिन सुलभ डिज़ाइन अभी भी कुछ दृश्य भेद का लक्ष्य रखता है।
- पारभासी ओवरले: 50% पारदर्शी गहरे ओवरले पर टेक्स्ट इसके प्रभावी रंग की तरह व्यवहार करता है, इनपुट रंग नहीं। जांच से पहले प्रभावी रंग की रचना करें।
- एंटी-एलियास्ड पतला टेक्स्ट: 12px Inter Thin 8.5:1 अनुपात पर अभी भी पढ़ना कठिन है। केवल रंग मान नहीं, वास्तविक प्रस्तुत फ़ॉन्ट के साथ जाँच करें।
- HSL रूपांतरण विचलन: HSL अंतरिक्ष में रंगों को ट्यून करना ऐसे मान उत्पन्न कर सकता है जो समान दिखते हैं लेकिन कंट्रास्ट विफल होते हैं। रंग समायोजन के बाद हमेशा फिर से जाँचें।
- हितधारकों द्वारा बंद ब्रांड रंग: जब ब्रांड रंग नहीं बदला जा सकता है, इसका रणनीतिक रूप से उपयोग करें (केवल बड़ा टेक्स्ट) और बॉडी के लिए एक अलग रंग चुनें। हितधारकों के लिए तर्क का दस्तावेज़ बनाएँ।
- प्रिंट कंट्रास्ट भूलना: एक वेबसाइट स्क्रीन पर कंट्रास्ट पास कर सकती है लेकिन ग्रेस्केल में मुद्रित होने पर विफल हो सकती है। प्रिंट के लिए अभिप्रेत दस्तावेज़ों के लिए मुद्रित आउटपुट का परीक्षण करें।
- वीडियो पर टेक्स्ट: वीडियो पृष्ठभूमि लगातार बदलती है। या तो एक स्थिर फ्रेम पिन करें, एक ग्रेडिएंट ओवरले जोड़ें, या एक ठोस पृष्ठभूमि का उपयोग करें।
- अंतर्राष्ट्रीयकरण वर्ण घनत्व बदलता है: चीनी, जापानी, कोरियाई वर्ण लैटिन की तुलना में सघन होते हैं। 4.5:1 अनुपात जो अंग्रेजी में अच्छी तरह से पढ़ा जाता है, उसी आकार में CJK भाषाओं के पाठकों पर दबाव डाल सकता है। अंतर्राष्ट्रीय टेक्स्ट के लिए 7:1 तक बढ़ाएँ।
WCAG से परे: APCA और आधुनिक संवेदी कंट्रास्ट
एक्सेसिबल पर्सेप्चुअल कंट्रास्ट एल्गोरिथम (APCA) एक नया सूत्र है जो Andrew Somers द्वारा WCAG 3.0 के लिए प्रस्तावित है। WCAG 2 सूत्र के विपरीत, APCA:
- कंट्रास्ट स्कोर में फ़ॉन्ट वजन और आकार को ध्यान में रखता है: पतले या छोटे फ़ॉन्ट को अधिक कंट्रास्ट की आवश्यकता होती है
- गैर-रेखीय संवेदी स्केलिंग का उपयोग करता है: मानव दृष्टि वास्तव में चमक का जवाब कैसे देती है, उससे मेल खाता है
- गहरे पृष्ठभूमि को बेहतर तरीके से संभालता है: WCAG 2 गहरे पृष्ठभूमि पर कंट्रास्ट को अधिक रेट करता है; APCA इसे ठीक करता है
- एक ध्रुवीयता-जागरूक स्कोर उत्पन्न करता है: हल्के पृष्ठभूमि पर गहरे टेक्स्ट के लिए सकारात्मक, इसके विपरीत के लिए नकारात्मक
APCA स्कोर लगभग -108 से +108 तक होता है। 60 (सकारात्मक या नकारात्मक) का स्कोर लगभग WCAG 2 के 4.5:1 के बराबर है। APCA अभी तक कहीं भी कानूनी रूप से आवश्यक नहीं है, लेकिन इसे Material Design और IBM Carbon जैसे डिज़ाइन सिस्टम द्वारा एक भविष्योन्मुख मानक के रूप में अपनाया जा रहा है।
आज अधिकांश व्यावहारिक उद्देश्यों के लिए, WCAG 2.1 AA (4.5:1 / 3:1) कानूनी और उद्योग मानक बना हुआ है। कुछ टीम गुणवत्ता जांच के रूप में APCA का समानांतर उपयोग करती हैं।
उपकरण और एकीकरण
| उपकरण | उपयोग का मामला |
|---|---|
| Browser DevTools (Chrome, Firefox) | तत्व का निरीक्षण रीयल टाइम में कंट्रास्ट अनुपात दिखाता है |
| axe DevTools | कंट्रास्ट सहित स्वचालित WCAG ऑडिट |
| WAVE (WebAIM) | कंट्रास्ट त्रुटियों को विज़ुअलाइज़ करने वाला ब्राउज़र एक्सटेंशन |
| Stark (Figma प्लगइन) | डिज़ाइन-समय कंट्रास्ट जांच |
| Color Contrast Analyser (TPGi) | आईड्रॉपर के साथ डेस्कटॉप ऐप |
| Lighthouse (Chrome) | कंट्रास्ट सहित बिल्ट-इन सुलभता ऑडिट |
| ARC Toolkit (Deque) | व्यापक सुलभता ब्राउज़र एक्सटेंशन |
| Polypane | बिल्ट-इन कंट्रास्ट टूलिंग के साथ डिज़ाइनरों के लिए ब्राउज़र |
| GitHub Action: a11y-actions | स्वचालित PR-स्तर जाँच |
| CI: pa11y, axe-core/cli | कंट्रास्ट विफलताओं को पेश करने वाले PR को ब्लॉक करें |
CI में कम से कम एक स्वचालित उपकरण को एकीकृत करें ताकि कंट्रास्ट विफलताएँ बिना पता चले शिप न हो सकें।
सुझाव
- प्रत्येक टेक्स्ट/पृष्ठभूमि संयोजन की जाँच करें: मान न लें। यहाँ तक कि अनुभवी डिज़ाइनर भी आश्चर्यचकित होते हैं कि कौन से संयोजन विफल होते हैं।
- दोनों थीम का परीक्षण करें: यदि आपकी साइट में हल्के और गहरे मोड हैं, तो दोनों में कंट्रास्ट जांचें। एक रंग जो सफेद पर काम करता है, गहरे ग्रे पर विफल हो सकता है।
- अपने ब्रांड रंगों का बुद्धिमानी से उपयोग करें: यदि आपका ब्रांड नीला टेक्स्ट रंग के रूप में विफल होता है, तो इसे बड़े तत्वों (बटन, हेडर) के लिए उपयोग करें जहाँ बड़ा टेक्स्ट सीमा (3:1) लागू होती है, और बॉडी टेक्स्ट के लिए गहरा शेड का उपयोग करें।
- केवल रंग पर निर्भर न रहें: पर्याप्त कंट्रास्ट के अलावा, कभी भी केवल रंग द्वारा जानकारी न दें। यह सुनिश्चित करने के लिए कि हर कोई सामग्री को समझ सके, रंग के साथ-साथ आइकन, टेक्स्ट लेबल या पैटर्न का उपयोग करें।
- सिमुलेटर के साथ परीक्षण करें: एक रंग अंधापन सिमुलेटर दिखाता है कि आपका डिज़ाइन प्रोटानोपिया, ड्यूटेरानोपिया या ट्रिटानोपिया वाले उपयोगकर्ताओं को कैसा दिखता है। सामान्य जोड़े (लाल/हरा) अक्सर विफल होते हैं।
- धूप में परीक्षण करें: चमकीले दिन अपना फोन बाहर ले जाएँ। टेक्स्ट जो मुश्किल से WCAG पास करता है वह सीधी धूप में अपठनीय हो सकता है। AAA कंट्रास्ट (7:1) बाहरी दृश्यता के लिए व्यावहारिक न्यूनतम है।
- सुलभ रंग पैलेट सहेजें: एक पैलेट बनाएँ जहाँ प्रत्येक टेक्स्ट रंग प्रत्येक पृष्ठभूमि रंग के विरुद्ध पास होता है। आगे की बाधा, बाद में कोई कंट्रास्ट आश्चर्य नहीं।
- हितधारकों को शिक्षित करें: कम कंट्रास्ट ब्रांड रंग की मांग करने वाले हितधारक अक्सर अपना मन बदल लेते हैं जब उन्हें कम दृष्टि सिमुलेटर के माध्यम से डिज़ाइन दिखाया जाता है।
गोपनीयता और डिज़ाइन डेटा
रंग कंट्रास्ट चेकर पूरी तरह से आपके ब्राउज़र में चलता है। आप जो रंग और मान दर्ज करते हैं, गणना, और कंट्रास्ट परिणाम सभी आपके डिवाइस पर रहते हैं। कुछ भी सर्वर पर अपलोड नहीं किया जाता, लॉग नहीं किया जाता, या किसी के साथ साझा नहीं किया जाता।
यह व्यक्तिगत रंगों के लिए कम मायने रखता है (वे गुप्त नहीं हैं) और बैच जाँच या डिज़ाइन-सिस्टम कार्य के लिए अधिक जहाँ आप एक पूर्ण ब्रांड पैलेट, आंतरिक उत्पाद मॉकअप रंग, या अप्रकाशित उत्पाद UI विनिर्देश पेस्ट कर सकते हैं। क्लाउड कंट्रास्ट उपकरण अपने अनुरोध लॉग में प्रत्येक पेस्ट को लॉग करते हैं, कभी-कभी उन्हें «सेवा सुधार» के लिए बनाए रखते हैं, और अप्रकाशित ब्रांड रंगों या UI डिज़ाइनों को लीक कर सकते हैं। ब्राउज़र-आधारित चेकर में शून्य एक्सपोज़र है: रंग कभी आपकी मशीन नहीं छोड़ते।
ब्राउज़र-आधारित कंट्रास्ट जाँच पृष्ठ लोड होने के बाद ऑफ़लाइन भी काम करती है, विमानों पर डिज़ाइन समीक्षा के लिए, इंटरनेट एक्सेस के बिना सुरक्षित वातावरण में, या कहीं भी जहाँ आप किसी तृतीय पक्ष सेवा के साथ डिज़ाइन डेटा साझा नहीं कर सकते या नहीं करना चाहिए, उपयोगी।
अक्सर पूछे जाने वाले प्रश्न
किस कंट्रास्ट अनुपात को लक्षित करें?
सामान्य टेक्स्ट के लिए, कम से कम 4.5 : 1 (WCAG AA) लक्षित करें। बड़े टेक्स्ट (18 px बोल्ड या 24 px नियमित) के लिए, 3 : 1 पर्याप्त है। उच्चतम अभिगम्यता स्तर (AAA) के लिए, सामान्य टेक्स्ट के लिए 7 : 1 लक्षित करें।
क्या यह केवल टेक्स्ट पर लागू होता है?
नहीं। WCAG 2.1 इंटरफ़ेस घटकों और ग्राफ़िक वस्तुओं (आइकन, फ़ील्ड बॉर्डर, फ़ोकस संकेतक) के लिए भी पर्याप्त कंट्रास्ट की आवश्यकता है। गैर-टेक्स्ट तत्वों के लिए न्यूनतम 3 : 1 है।
और डार्क मोड के बारे में?
डार्क मोड को समान कंट्रास्ट जाँच की आवश्यकता होती है। गहरी पृष्ठभूमि पर सफ़ेद टेक्स्ट अक्सर आसानी से पास होता है, लेकिन गहरे भूरे पृष्ठभूमि पर भूरा टेक्स्ट अक्सर विफल होता है। दोनों मोड का परीक्षण करें।
क्या रंग कंट्रास्ट एक कानूनी आवश्यकता है?
कई न्यायालयों में, हाँ। ADA (US), EN 301 549 (EU) और समान क़ानून डिजिटल अभिगम्यता को थोपते हैं। WCAG अनुपालन इसे पूरा करने के लिए मान्यता प्राप्त मानक है।