कलर और कंट्रास्ट की सुलभता

Dave Gash

Meggin Kearney

Rachel Andrew

Rob Dodson

अगर आपकी दृष्टि अच्छी है, तो आप मान सकते हैं कि सभी को रंगों या टेक्स्ट की पढ़ने में कठिनाई महसूस होती है. जैसा कि आपने सोचा होगा, कुछ ऐसे रंगों के कॉम्बिनेशन को कुछ लोगों के लिए मुश्किल या नामुमकिन होता है, जिन्हें कुछ लोग अच्छे से पढ़ पाते हैं. आम तौर पर, ऐसा कलर कंट्रास्ट, फ़ोरग्राउंड और बैकग्राउंड के रंगों की चमक के बीच संबंध की वजह से होता है. जब रंग एक जैसे होते हैं, तो कंट्रास्ट का अनुपात कम होता है. इन रंगों के ज़्यादा अंतर होने पर, कंट्रास्ट का अनुपात ज़्यादा होता है.

WebAIM के दिशा-निर्देश सभी टेक्स्ट के लिए, AA (कम से कम) कंट्रास्ट अनुपात को 4.5:1 रखने का सुझाव देते हैं. हालांकि, इसके कुछ अपवाद भी हैं. जैसे, बहुत बड़े टेक्स्ट (डिफ़ॉल्ट तौर पर इस्तेमाल किए गए मुख्य टेक्स्ट से 120-150% बड़ा), जिसके लिए अनुपात नीचे 3:1 तक जा सकता है. यहां दिखाए गए कंट्रास्ट रेशियो में अंतर पर ध्यान दें:

बैकग्राउंड के कम कंट्रास्ट अनुपात वाले टेक्स्ट को पढ़ना मुश्किल होता है.

लेवल AA के लिए, 4.5:1 का कंट्रास्ट अनुपात चुना गया था, क्योंकि यह कंट्रास्ट संवेदनशीलता में होने वाले उस नुकसान की भरपाई करता है जिसका अनुभव आम तौर पर, दृष्टिहीनता से 20/40 के बराबर होता है. आम तौर पर, 20/40 को आम तौर पर, 80 साल की उम्र के लोगों में देखने की सामान्य क्षमता के तौर पर रिपोर्ट किया जाता है. जिन लोगों को देखने में परेशानी होती है या जिनमें रंग की कमी होती है उनके लिए, हम बॉडी टेक्स्ट के कंट्रास्ट को 7:1 तक बढ़ा सकते हैं.

अपने कलर कंट्रास्ट की जांच करने के लिए, लाइटहाउस में सुलभता ऑडिट का इस्तेमाल करें. रिपोर्ट चलाने के लिए:

1. DevTools खोलें.
2. ऑडिट पर क्लिक करें.
3. सुलभता चुनें.

लाइटहाउस सुलभता रिपोर्ट से मिला कलर कंट्रास्ट सही नहीं है.

Chrome में प्रयोग के तौर पर एक सुविधा भी शामिल है, जो आपके पेज पर कम कंट्रास्ट वाले सभी टेक्स्ट का पता लगाने में आपकी मदद करती है. कम कंट्रास्ट वाले टेक्स्ट को ठीक करने के लिए, रंगों के ऐक्सेस किए जा सकने वाले सुझाव का भी इस्तेमाल किया जा सकता है.

ऐक्सेस किए जा सकने वाले रंग का सुझाव.

ज़्यादा जानकारी वाली रिपोर्ट के लिए, सुलभता इनसाइट एक्सटेंशन इंस्टॉल करें. इसकी फ़ास्टपास रिपोर्ट में, उन सभी एलिमेंट की जानकारी शामिल होती है जो कलर कंट्रास्ट की जांच में फ़ेल हो जाते हैं.

सुलभता इनसाइट की कलर कंट्रास्ट रिपोर्ट.

ऐडवांस पर्सेप्चुअल कंट्रास्ट एल्गोरिदम (एपीसीए)

ऐडवांस परसेप्चुअल कॉन्ट्रास्ट एल्गोरिदम (एपीसीए), रंगों की पहचान करने पर आधारित मॉडर्न रिसर्च के आधार पर, कंट्रास्ट का पता लगाने का एक नया तरीका है.

AA और AAA के दिशा-निर्देशों की तुलना में, एपीसीए, कॉन्टेक्स्ट पर निर्भर करता है.

कंट्रास्ट का हिसाब इन सुविधाओं के आधार पर लगाया जाता है:

• स्पेशल प्रॉपर्टी (फ़ॉन्ट की मोटाई और टेक्स्ट का साइज़)
• टेक्स्ट का रंग (टेक्स्ट और बैकग्राउंड के बीच हल्के-फुल्के अंतर का अनुमान)
• कॉन्टेक्स्ट (आस-पास की रोशनी, आस-पास की रोशनी, और टेक्स्ट का मकसद)

Chrome में AA/AAA कंट्रास्ट अनुपात के दिशा-निर्देशों को APCA से बदलने के लिए, एक प्रयोग के तौर पर उपलब्ध सुविधा शामिल है.

एपीसीए कंट्रास्ट रिपोर्ट.

सिर्फ़ रंग का इस्तेमाल करके जानकारी न दें

दुनिया भर में करीब 32 करोड़ ऐसे लोग हैं जिन्हें रंगों की पहचान करने में समस्या है. 12 में से 1 पुरुष और 200 में से 1 महिला में किसी न किसी रूप में वर्णांधता होती है, इसका मतलब है कि करीब पांच प्रतिशत उपयोगकर्ता आपकी साइट को उम्मीद के मुताबिक नहीं अनुभव करेंगे. जानकारी देने के लिए रंग पर निर्भर रहने से, वह संख्या अस्वीकार किए जाने वाले लेवल पर पहुंच जाती है.

ध्यान दें: कलरब्लाइंडनेस शब्द का इस्तेमाल, अक्सर ऐसी विज़ुअल स्थिति के लिए किया जाता है जिसमें व्यक्ति को रंगों में फ़र्क़ करने में परेशानी होती है. ऐसे बहुत कम लोग होते हैं जिन्हें रंगों की पहचान नहीं होती है. रंगों की कमी वाले ज़्यादातर लोगों को कुछ या ज़्यादातर रंग दिख सकते हैं. हालांकि, लाल और हरा (सबसे ज़्यादा देखा जाने वाला), भूरा और नारंगी, नीला, और बैंगनी जैसे कुछ रंगों के बीच फ़र्क़ करने में उन्हें दिक्कत होती है.

उदाहरण के लिए, इनपुट फ़ॉर्म में टेलीफ़ोन नंबर को लाल रंग से अंडरलाइन किया जा सकता है, ताकि यह पता चल सके कि वह अमान्य है. रंग की कमी महसूस करने वाले या स्क्रीन रीडर के उपयोगकर्ता को, वह जानकारी गलत तरीके से या बिलकुल भी नहीं दी जाती है. इसलिए, आपको हमेशा उपयोगकर्ता को अहम जानकारी ऐक्सेस करने के कई तरीके उपलब्ध कराने चाहिए.

कुछ उपयोगकर्ताओं को गड़बड़ी दिखाने वाली लाल लाइन नज़र नहीं आती.

WebAIM की चेकलिस्ट में सेक्शन 1.4.1 में बताया गया है कि "रंग का इस्तेमाल कॉन्टेंट को बताने या विज़ुअल एलिमेंट की पहचान करने के इकलौते तरीके के तौर पर नहीं किया जाना चाहिए." इसमें यह भी बताया गया है कि "सिर्फ़ रंग का इस्तेमाल लिंक से आस-पास के टेक्स्ट में अंतर करने के लिए नहीं किया जाना चाहिए" जब तक कि वे कुछ कंट्रास्ट वाली ज़रूरी शर्तें पूरी न करते हों. इसके बजाय, इस चेकलिस्ट में एक और इंडिकेटर जोड़ने का सुझाव दिया गया है, जैसे कि अंडरस्कोर (सीएसएस text-decoration प्रॉपर्टी का इस्तेमाल करके), ताकि यह पता चल सके कि लिंक कब चालू होगा.

पिछले उदाहरण को ठीक करने का एक बुनियादी तरीका यह है कि फ़ील्ड में एक अतिरिक्त मैसेज जोड़कर यह बताया जाए कि यह अमान्य है और क्यों.

टेक्स्ट के बारे में जानकारी जोड़ने से, न सिर्फ़ दृष्टि बाधित उपयोगकर्ताओं को गड़बड़ी की जानकारी मिलती है, बल्कि पूरी तरह से दिखने वाले लोगों को गड़बड़ी को ठीक करने के बारे में अहम जानकारी भी मिलती है.

कोई ऐप्लिकेशन बनाते समय, इस तरह की बातों का ध्यान रखें. साथ ही, ज़रूरी जानकारी इकट्ठा करने के लिए, रंगों का इस्तेमाल करते समय सावधानी बरतें.

अगर आपकी यह जानने में दिलचस्पी है कि आपकी साइट अलग-अलग लोगों को कैसी दिखती है या आपको यूज़र इंटरफ़ेस (यूआई) में रंगों के इस्तेमाल पर बहुत ज़्यादा भरोसा है, तो DevTools का इस्तेमाल करके, देखने में परेशानी होने के अलग-अलग तरीकों को सिम्युलेट किया जा सकता है. Chrome में 'देखने की क्षमता में कमी' सुविधा शामिल है. इसे ऐक्सेस करने के लिए, DevTools खोलें. इसके बाद, ड्रॉर में रेंडरिंग टैब खोलें. इसके बाद, रंगों की इन कमियों को एम्युलेट किया जा सकता है:

• प्रोटानोपिया: लाल रंग की किसी भी लाइट को महसूस न कर पाना.
• लाल रंग न देख पाने की समस्या: इसमें हरी रोशनी को महसूस न कर पाना.
• नीला रंग न देख पाने की समस्या: इसमें किसी भी नीली रोशनी को महसूस न कर पाना.
• ऐक्रोमटॉप्सिया: ग्रे रंग के शेड को छोड़कर, किसी भी रंग को देख न पाना. यह बहुत कम होता है.

Looker का इस्तेमाल करके, यह देखें कि अलग-अलग तरह के कलर ब्लाइंडनेस वाले लोगों को आपका पेज कैसा दिखता है.

हाई कॉन्ट्रास्ट मोड

हाई कंट्रास्ट मोड की मदद से उपयोगकर्ता, फ़ोरग्राउंड और बैकग्राउंड कलर को उलट सकता है. इससे टेक्स्ट को अलग दिखाने में अक्सर मदद मिलती है. कम दृष्टि वाले व्यक्ति के लिए, हाई कंट्रास्ट मोड की मदद से पेज पर मौजूद कॉन्टेंट को नेविगेट करना आसान हो जाता है. मशीन पर हाई कंट्रास्ट सेटअप करने के कुछ तरीके यहां दिए गए हैं:

Mac PostgreSQL और Windows जैसे ऑपरेटिंग सिस्टम हाई-कंट्रास्ट मोड ऑफ़र करते हैं जिन्हें सिस्टम के हर लेवल पर हर चीज़ के लिए चालू किया जा सकता है.

हाई-कंट्रास्ट सेटिंग को चालू करके, यह पुष्टि की जा सकती है कि आपके ऐप्लिकेशन में मौजूद सभी यूज़र इंटरफ़ेस (यूआई) अब भी दिख रहे हैं और इस्तेमाल किए जा सकते हैं या नहीं.

उदाहरण के लिए, कौनसा पेज चुना गया है, यह बताने के लिए नेविगेशन बार की ओर से एक हल्के बैकग्राउंड के रंग का इस्तेमाल किया जा सकता है. अगर आपको इसे किसी हाई-कंट्रास्ट वाले एक्सटेंशन में दिखता है, तो उनकी बारीकियां पूरी तरह से गायब हो जाती हैं और इसके साथ ही, पाठक को यह समझ आ जाता है कि कौनसा पेज ऐक्टिव है.

हो सकता है कि हाई कंट्रास्ट मोड में हल्के रंग के कंट्रास्ट न दिखें.

इसी तरह, पहले दिए गए उदाहरण में, अमान्य फ़ोन नंबर फ़ील्ड पर लाल अंडरलाइन को आसानी से पहचान में न आने वाले नीले-हरे रंग में दिखाया जा सकता है.

हाई कंट्रास्ट मोड में इन्वर्टेड कलर से कंट्रास्ट से जुड़ी नई समस्याएं हो सकती हैं.

अगर आपने पहले कवर किए गए कंट्रास्ट अनुपातों को पूरा कर लिया है, तो हाई-कंट्रास्ट मोड के साथ काम करने के लिए आपको ठीक होना चाहिए. हालांकि, मन की शांति के लिए, हाई कंट्रास्ट Chrome एक्सटेंशन इंस्टॉल करें और अपने पेज को एक बार फिर से लोड करके देखें कि सब कुछ ठीक से काम कर रहा है और दिख रहा है या नहीं.