आप यह मान सकते हैं कि सभी को रंगों या टेक्स्ट की स्वाभाविकता को एक जैसा लगता है. रंगों को देखने का हमारा तरीका हमारे आस-पास के माहौल (कम या तेज़ रोशनी) और देखने की हमारी क्षमताओं पर निर्भर करता है. आप या आपके उपयोगकर्ता लाखों लोगों में से एक हो सकते हैं, जिन्हें वर्णांधता या कम दृष्टि मिलती है.
अलग-अलग तरह की विज़ुअल दिव्यांगता वाले लोगों की मदद करने के लिए, WAI ग्रुप ने एक कलर कंट्रास्ट फ़ॉर्मूला बनाया है, ताकि यह पक्का किया जा सके कि टेक्स्ट और उसके बैकग्राउंड के बीच ज़रूरत के मुताबिक कंट्रास्ट मौजूद है. जब इन रंगों के कंट्रास्ट अनुपात का पालन किया जाता है, तो कुछ हद तक कम दृष्टि वाले लोग, कंट्रास्ट को बेहतर बनाने वाली सहायक टेक्नोलॉजी के बिना, बैकग्राउंड पर मौजूद टेक्स्ट को पढ़ सकते हैं.
चित्र 1 में दिखाए गए कंट्रास्ट अनुपातों के अंतर पर ध्यान दें.
4.5:1 का कंट्रास्ट अनुपात कम से कम 4.5:1 होना चाहिए. यह अनुपात, वेब कॉन्टेंट की सुलभता से जुड़े दिशा-निर्देश (डब्ल्यूसीएजी) 2.0 के तहत सेट किया गया है. इस रैशन को चुना गया था, क्योंकि यह करीब 20/40 दृष्टिहीनता के बराबर यानी दृष्टिहीनता से पीड़ित उपयोगकर्ताओं के सामने आने वाली कंट्रास्ट संवेदनशीलता की भरपाई करता है.
फिर से, 4.5:1 सबसे कम है. कम दृष्टि वाले या अन्य कलर ब्लाइंडनेस वाले उपयोगकर्ताओं की मदद करने के लिए, एएए लेवल पूरा करें और 7:1 कंट्रास्ट वाला कॉन्टेंट बनाएं.
DevTools में Lighthouse की सुलभता सुविधाओं के ऑडिट की मदद से, अपने कलर कंट्रास्ट की जांच करें.
ऐडवांस पर्सेप्चुअल कंट्रास्ट एल्गोरिदम
ऐडवांस परसेप्चुअल कंट्रास्ट एल्गोरिदम (एपीसीए) की मदद से, रंगों की पहचान करने पर आधारित आधुनिक रिसर्च के आधार पर कंट्रास्ट का पता लगाया जा सकता है.
एपीसीए, डब्ल्यूसीएजी के AA और एएए लेवल की तुलना में, ज़्यादा कॉन्टेक्स्ट पर निर्भर करता है.
इस मॉडल में, कंट्रास्ट की गणना नीचे दी गई सुविधाओं के आधार पर की जाती है:
- स्पेशल प्रॉपर्टी (फ़ॉन्ट की मोटाई और टेक्स्ट का साइज़)
- टेक्स्ट का रंग (टेक्स्ट और बैकग्राउंड के बीच हल्के-फुल्के अंतर का अनुमान)
- कॉन्टेक्स्ट (आस-पास की रोशनी, आस-पास की रोशनी, और टेक्स्ट का मकसद)
Chrome में AA/AAA कंट्रास्ट अनुपात के दिशा-निर्देशों को APCA से बदलने के लिए, एक प्रयोग के तौर पर उपलब्ध सुविधा शामिल है.
महत्वपूर्ण जानकारी को रंग के साथ-साथ दिखाएं
उपयोगकर्ताओं को ज़रूरी जानकारी देते समय, विज़ुअल संकेतों के अलावा टेक्स्ट या वैकल्पिक टेक्स्ट पर भरोसा करें. विज़ुअल संकेतों में रंग, पैटर्न, इमेज, फ़ॉन्ट स्टाइल, और डायरेक्शनल लैंग्वेज शामिल हैं.
उदाहरण के लिए, आपके पास एक संपर्क फ़ॉर्म हो सकता है, जो अमान्य इनपुट को लाल रंग से अंडरलाइन करके दिखाता है. रंग बताने वाले इस संकेत से स्क्रीन रीडर या रंग देखने में परेशानी वाले उपयोगकर्ताओं को यह नहीं पता चलता है कि कोई चीज़ काम नहीं कर रही है. उपयोगकर्ता यह सोचकर रह सकता है कि फ़ॉर्म सबमिशन काम क्यों नहीं कर रहा है और हार मान लें.
किसी खास गड़बड़ी के बारे में उपयोगकर्ता को अलग-अलग तरीकों से सूचना देना न भूलें. उदाहरण के लिए, गड़बड़ी का मैसेज जोड़कर यह बताया जा सकता है कि कोई इनपुट अमान्य है और क्यों. आपके पास मदद के लिए टेक्स्ट जोड़ने का विकल्प भी है. जैसे, सही इनपुट कैसा दिखना चाहिए.
अमान्य इनपुट को अब भी लाल रंग से अंडरलाइन किया जा सकता है. ऐसा तब तक किया जा सकता है, जब तक बिना विज़ुअल वाले अतिरिक्त संकेत न हों.
अगर आपको अपने इंटरफ़ेस में रंगों का इस्तेमाल बहुत ज़्यादा करना है, तो Chrome DevTools में कंट्रास्ट से जुड़ी समस्याओं का पता लगाएं.
कंट्रास्ट बढ़ाएं और रंग उलटें
कम दृष्टि वाले लोगों के लिए, हाई कंट्रास्ट मोड की मदद से पेज पर मौजूद कॉन्टेंट पर नेविगेट करना आसान हो जाता है. हाई-कंट्रास्ट को सेट अप करने के कुछ तरीके हैं.
macOS और Windows, दोनों ही ऑपरेटिंग सिस्टम में कंट्रास्ट लेवल को बढ़ाने के तरीके ऑफ़र करते हैं.
उपयोगकर्ता फ़ोरग्राउंड और बैकग्राउंड के रंगों को भी बदल सकते हैं (उदाहरण के लिए, macOS पर). यह खास तौर पर उन वेबसाइटों और ऐप्लिकेशन के लिए फ़ायदेमंद है जो गहरे रंग वाले मोड का इस्तेमाल नहीं करते.
डेवलपर के तौर पर, इन सेटिंग को चालू करके और मैन्युअल तरीके से उपयोगिता की पुष्टि करके, यह पक्का किया जा सकता है कि आपका इंटरफ़ेस अब भी दिख रहा है और इस्तेमाल किया जा सकता है.
उदाहरण के लिए, कौनसा पेज चुना गया है, यह बताने के लिए नेविगेशन बार की ओर से एक हल्के बैकग्राउंड के रंग का इस्तेमाल किया जा सकता है. अगर इसे हाई कंट्रास्ट मोड में देखा जाता है, तो वह पूरी तरह से हट जाता है और इसके साथ ही, पाठक को यह समझ आ जाता है कि कौनसा पेज चालू है.
अगर आप AA या इससे ऊपर के कंट्रास्ट वाले लेवल को पूरा करते हैं, तो भी रंग उलटे होने या ज़्यादा कंट्रास्ट होने पर भी आपका कॉन्टेंट उम्मीद के मुताबिक काम करेगा. हालांकि, अभी भी टेस्ट करके यह पक्का किया जा सकता है कि आपको कैसा अनुभव मिल रहा है.