अभिगम्यता के लिए रंग कंट्रास्ट कैसे जाँचें
12 में से लगभग 1 पुरुष और 200 में से 1 महिला को किसी प्रकार का रंग दृष्टि दोष है। लाखों अन्य लोगों की दृष्टि कम है, उम्र के साथ दृष्टि खराब हो रही है या धूप में अपनी स्क्रीन देखते हैं। यदि आपके टेक्स्ट का अपनी पृष्ठभूमि के साथ पर्याप्त कंट्रास्ट नहीं है, तो ये लोग इसे पढ़ नहीं सकते।
रंग कंट्रास्ट एक «प्लस» नहीं है — यह अभिगम्यता की एक केंद्रीय आवश्यकता है।
WCAG क्या माँगता है
Web Content Accessibility Guidelines (WCAG) टेक्स्ट और पृष्ठभूमि के बीच न्यूनतम कंट्रास्ट अनुपात परिभाषित करते हैं:
| स्तर | सामान्य टेक्स्ट | बड़ा टेक्स्ट | गैर-टेक्स्ट तत्व |
|---|---|---|---|
| AA (न्यूनतम) | 4.5 : 1 | 3 : 1 | 3 : 1 |
| AAA (उन्नत) | 7 : 1 | 4.5 : 1 | — |
«बड़ा टेक्स्ट» का अर्थ है 18 px बोल्ड या 24 px नियमित और अधिक।
कंट्रास्ट अनुपात 1 : 1 (कोई कंट्रास्ट नहीं — सफ़ेद पर सफ़ेद) से 21 : 1 (अधिकतम कंट्रास्ट — सफ़ेद पर काला) तक जाता है।
कंट्रास्ट कैसे जाँचें
- अपने रंग चुनें — HEX कोड, RGB मान या रंग चयनकर्ताओं के माध्यम से टेक्स्ट (अग्रभूमि) रंग और पृष्ठभूमि रंग दर्ज करें।
- परिणाम देखें — टूल तुरंत कंट्रास्ट अनुपात प्रदर्शित करता है और क्या आपका संयोजन सामान्य और बड़े टेक्स्ट में WCAG AA और AAA पास करता है।
- यदि आवश्यक हो तो समायोजित करें — यदि कंट्रास्ट विफल होता है, तो आवश्यक स्तर तक पहुँचने तक टेक्स्ट को गहरा करें या पृष्ठभूमि को हल्का करें (या इसके विपरीत)।
सामान्य कंट्रास्ट त्रुटियाँ
सफ़ेद पर हल्का भूरा टेक्स्ट — #ffffff पर #999999 का अनुपात केवल 2.8 : 1 है। यह WCAG AA में विफल होता है। यह सही दृष्टि वाले डिज़ाइनर को «परिष्कृत» लग सकता है, लेकिन कई लोगों के लिए यह अपठनीय है।
रंगीन पृष्ठभूमि पर रंगीन टेक्स्ट — सफ़ेद टेक्स्ट वाला एक नीला बटन अक्सर पास होता है, लेकिन सफ़ेद टेक्स्ट वाला एक हरा बटन नहीं। हमेशा जाँचें — आप कंट्रास्ट अनुपात को आँख से नहीं आँक सकते।
संकेत टेक्स्ट — फ़ील्ड संकेत टेक्स्ट कंट्रास्ट में कुख्यात रूप से कमज़ोर है। हालाँकि WCAG इसे सख्ती से नहीं थोपता, उपयोगकर्ताओं को अभी भी इसे पढ़ना चाहिए।
डार्क मोड — डिज़ाइनर अक्सर «सूक्ष्म» लुक के लिए गहरे भूरे पर मध्यम भूरे का उपयोग करते हैं। यह अक्सर कंट्रास्ट जाँच में विफल होता है।
सुझाव
- प्रत्येक टेक्स्ट/पृष्ठभूमि संयोजन की जाँच करें — कुछ भी न मानें। अनुभवी डिज़ाइनर भी उन संयोजनों से आश्चर्यचकित होते हैं जो विफल होते हैं।
- दोनों थीम का परीक्षण करें — यदि आपकी साइट पर एक हल्का मोड और एक डार्क मोड है, तो दोनों में कंट्रास्ट जाँचें। एक रंग जो सफ़ेद पर काम करता है वह गहरे भूरे पर विफल हो सकता है।
- अपने ब्रांड रंगों का विवेक से उपयोग करें — यदि आपका ब्रांड नीला टेक्स्ट रंग के रूप में विफल होता है, तो इसका उपयोग बड़े तत्वों (बटन, हेडर) के लिए करें जहाँ «बड़ा टेक्स्ट» सीमा (3 : 1) लागू होती है, और मुख्य टेक्स्ट के लिए एक गहरे शेड का उपयोग करें।
- केवल रंग पर निर्भर न रहें — पर्याप्त कंट्रास्ट के अलावा, कभी भी केवल रंग से जानकारी संप्रेषित न करें। पूरक के रूप में आइकन, लेबल या पैटर्न का उपयोग करें।
अक्सर पूछे जाने वाले प्रश्न
किस कंट्रास्ट अनुपात को लक्षित करें?
सामान्य टेक्स्ट के लिए, कम से कम 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 अनुपालन इसे पूरा करने के लिए मान्यता प्राप्त मानक है।