रंग और कंट्रास्ट

क्या आपने कभी स्क्रीन पर मौजूद टेक्स्ट को पढ़ने की कोशिश की है और उस कलर स्कीम की वजह से उसे पढ़ना मुश्किल हुआ है या फिर स्क्रीन को बहुत ज़्यादा या कम रोशनी में देखने में परेशानी हुई है? या हो सकता है कि आपको रंगों से जुड़ी चीज़ों की समस्या लगातार हो, जैसे कि कलर ब्लाइंडनेस वाले 30 करोड़ लोग या कम दृष्टि वाले 25 करोड़ 30 लाख लोग?

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

यह मॉड्यूल आपको कुछ ऐक्सेस किए जा सकने वाले रंग और कंट्रास्ट से जुड़ी बुनियादी बातों के बारे में बताएगा.

रंग महसूस हो रहा है

क्या आपको पता है कि वस्तुओं में रंग नहीं होता, लेकिन वे रोशनी की तरंगदैर्ध्य को परावर्तित करते हैं? जब आप रंग देखते हैं, तो आपकी आंखें उन तरंगदैर्ध्य को प्राप्त और संसाधित करती हैं और उन्हें रंगों में बदल देती हैं.

जब डिजिटल सुलभता की बात आती है, तो हम रंग, संतृप्ति, और लाइटनेस (एचएसएल) के मामले में इन तरंगदैर्ध्य के बारे में बात करते हैं. एचएसएल मॉडल को आरजीबी कलर मॉडल के विकल्प के तौर पर बनाया गया था. यह मॉडल, इंसान के रंग को समझने के तरीके के साथ ज़्यादा मेल खाता है.

ह्यू, रंग को गुणा करके बताने का एक तरीका है, जैसे कि लाल, हरा या नीला. यहां हर रंग के लिए कलर स्पेक्ट्रम पर एक खास स्पॉट होता है. इसकी वैल्यू 0 से 360 तक होती है. लाल रंग 0 से लेकर 120 होता है, हरा 120 होता है, और नीला 240 होता है.

किसी रंग के गहरेपन को 0% से 100% के बीच मापा जाता है. फ़ुल सैचुरेशन (100%) वाला रंग बहुत चमकदार होगा, जबकि बिना सैचुरेशन (0%) वाला रंग ग्रेस्केल या ब्लैक ऐंड व्हाइट होगा.

रोशनी किसी रंग का हल्का या गहरा वर्ण है, जिसे 0% (काला) से 100% (सफ़ेद) के बीच प्रतिशत में मापा जाता है.

रंग कंट्रास्ट को मापना

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

चलिए, वाइब्रेंट कलर पटल वाली इमेज पर नज़र डालते हैं और तुलना करते हैं कि कलर ब्लाइंडनेस वाले कुछ लोगों को वह इमेज कैसी दिखेगी.

बाईं ओर, इस इमेज में बैंगनी, लाल, नारंगी, पीला, ऐक्वा ग्रीन, हल्का नीला, और गहरे नीले रंग के साथ इंद्रधनुष के रंगों वाली रेत है. दाईं ओर चमकदार और कई रंगों वाला इंद्रधनुष का पैटर्न मौजूद है.

लाल-हरे रंग न देख पाने की समस्या

ड्यूटरनोपिया (आम तौर पर, इसे ग्रीन ब्लाइंड कहा जाता है) यह समस्या 1% से 5% पुरुषों में और 0.35% से 0.1% महिलाओं में होती है.

इससे पीड़ित लोगों को हरी रोशनी से परेशानी कम हो जाती है. कलर ब्लाइंडनेस वाला यह फ़िल्टर बताता है कि इस तरह का कलर ब्लाइंडनेस कैसा दिखता है.

लाल रंग न देख पाने की समस्या

प्रोटानोपिया (आम तौर पर, इसे रेड ब्लाइंड कहा जाता है) 1.01% से 1.08% पुरुषों और 0.03% महिलाओं में 0.02% होता है.

प्रोटनोपिया से पीड़ित लोगों को लाल लाइट से कम परेशानी होती है. कलर ब्लाइंडनेस वाला यह फ़िल्टर बताता है कि इस तरह का कलर ब्लाइंडनेस कैसा दिखता है.

एक्रोमाटॉप्सिया या मोनोक्रोमैटिज़्म

अक्रोमाटॉप्सिया या मोनोक्रोमैटिज़्म (पूरी तरह से कलर ब्लाइंडनेस) बहुत कम मामलों में होता है.

एक्रोमाटॉप्सिया या मोनोक्रोमैटिज़्म से पीड़ित लोगों को लाल, हरी या नीली रोशनी के बारे में करीब-करीब कोई धारणा नहीं होती है. कलर ब्लाइंडनेस वाला यह फ़िल्टर बताता है कि इस तरह का कलर ब्लाइंडनेस कैसा दिखता है.

रंग कंट्रास्ट की गणना करना

कलर कंट्रास्ट फ़ॉर्मूला, कंट्रास्ट तय करने के लिए रंगों की रिलेटिव चमक का इस्तेमाल करता है. यह 1 से 21 तक हो सकता है. इस फ़ॉर्मूला को अक्सर छोटा करके [color value]:1 कर दिया जाता है. उदाहरण के लिए, 21:1 के मुकाबले शुद्ध सफ़ेद रंग के कंट्रास्ट का अनुपात सबसे ज़्यादा है.

(L1 + 0.05) / (L2 + 0.05)
L1 is the relative luminance of the lighter color
L2 is the relative luminance of the darker colors

रंग के लिए तय की गई डब्ल्यूसीएजी की ज़रूरी शर्तों को पूरा करने के लिए, सामान्य साइज़ के टेक्स्ट का कलर कंट्रास्ट अनुपात 4.5:1 होना चाहिए. इसमें टेक्स्ट की इमेज भी शामिल हैं. बड़े साइज़ के टेक्स्ट और ज़रूरी आइकॉन का कलर कंट्रास्ट अनुपात 3:1 होना चाहिए. बड़े साइज़ के टेक्स्ट की खासियत यह है कि इसे कम से कम 18pt / 24px या 14pt / 18.5px बोल्ड किया जाता है. लोगो और सजावटी चीज़ों पर इन रंगों के कंट्रास्ट की शर्तें लागू नहीं होती हैं.

शुक्र है कि इसके लिए किसी ऐडवांस मैथ की ज़रूरत नहीं है, क्योंकि ऐसे कई टूल हैं जिनकी मदद से कलर कंट्रास्ट का हिसाब लगाया जा सकता है. Adobe Color, कलर कंट्रास्ट ऐनालाइज़र, लियोनार्डो, और Chrome के DevTools कलर पिकर आपको तुरंत कलर कंट्रास्ट अनुपात बता सकते हैं और सुझाव देकर, ऐसे कलर पेयर और पैलेट बनाने के सुझाव दे सकते हैं जिन्हें बेहतर तरीके से समझा जा सके.

रंग का इस्तेमाल किया जा रहा है

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

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

ग्रेस्केल में अपने डिजिटल प्रॉडक्ट की समीक्षा करना, रंग से जुड़ी संभावित समस्याओं का जल्दी से पता लगाने का एक अच्छा तरीका है.

रंग पर फ़ोकस करने वाली मीडिया क्वेरी

कलर कंट्रास्ट अनुपात और स्क्रीन पर रंगों के इस्तेमाल की जांच करने के अलावा, आपको बढ़ती लोकप्रिय और इस्तेमाल की जा रही मीडिया क्वेरी लागू करने के बारे में भी सोचना चाहिए. इनसे उपयोगकर्ताओं को स्क्रीन पर दिखने वाली चीज़ों पर ज़्यादा कंट्रोल मिलता है.

उदाहरण के लिए, @prefers-color-scheme मीडिया क्वेरी का इस्तेमाल करके, गहरे रंग वाली थीम बनाई जा सकती है. इससे फ़ोटोफ़ोबिया या रोशनी की संवेदनशीलता से जुड़े लोगों को मदद मिलती है. @prefers-contrast की मदद से, हाई कंट्रास्ट वाली थीम भी बनाई जा सकती है. इससे उन लोगों को मदद मिलती है जिन्हें रंगों की पहचान करने में दिक्कत होती है और वे कंट्रास्ट सेंसिटिविटी पर ध्यान देते हैं.

कलर स्कीम को प्राथमिकता देता है

मीडिया क्वेरी @prefers-color-scheme की मदद से, लोग उस वेबसाइट या ऐप्लिकेशन का हल्के या गहरे रंग की थीम वाला वर्शन चुन सकते हैं जिस पर वे जा रहे हैं. इस थीम में बदलाव होते हुए देखा जा सकता है. इसके लिए, लाइट/गहरे रंग की प्राथमिकता वाली सेटिंग को बदलें और ऐसे ब्राउज़र में जाएं जो इस मीडिया क्वेरी को सपोर्ट करता हो. गहरे रंग वाले मोड के लिए, Mac और Windows के लिए निर्देश देखें.

कंट्रास्ट ज़्यादा पसंद है

@prefers-contrast मीडिया क्वेरी, उपयोगकर्ता के ओएस की सेटिंग की जांच करती है. इससे यह पता चलता है कि हाई कंट्रास्ट को चालू या बंद किया गया है या नहीं. कंट्रास्ट मोड की सेटिंग में बदलाव करके, थीम में हुए इस बदलाव को देखा जा सकता है. इसके लिए, उस मीडिया क्वेरी के साथ काम करने वाले ब्राउज़र (Mac और Windows की कंट्रास्ट मोड की सेटिंग) में बदलाव करें.

मीडिया क्वेरी की लेयर बनाना

आप अपने उपयोगकर्ताओं को ज़्यादा विकल्प देने के लिए रंग पर फ़ोकस करने वाली मीडिया क्वेरी का इस्तेमाल कर सकते हैं. इस उदाहरण में, हमने @prefers-color-scheme और @prefers-contrast को एक साथ स्टैक किया है.

आपने जो सीखा है उसकी जांच करें

रंग और कंट्रास्ट के बारे में अपनी जानकारी देखें