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

क्या आपको कभी स्क्रीन पर मौजूद टेक्स्ट को पढ़ने में मुश्किल हुई है? ऐसा कलर स्कीम की वजह से हो सकता है. इसके अलावा, बहुत ज़्यादा रोशनी या कम रोशनी वाली जगह पर स्क्रीन देखने में भी परेशानी हो सकती है. ऐसा भी हो सकता है कि आपको कलर विज़न से जुड़ी कोई स्थायी समस्या हो. जैसे, अनुमान के मुताबिक 30 करोड़ लोगों को कलर ब्लाइंडनेस है या 25.3 करोड़ लोगों की नज़र कमज़ोर है.

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

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

रंग की पहचान करना

क्या आपको पता है कि ऑब्जेक्ट में रंग नहीं होता, बल्कि वे रोशनी की वेवलेंथ को दिखाते हैं? जब आपको कोई रंग दिखता है, तो आपकी आंखें उन वेवलेंथ को पाती हैं और उन्हें प्रोसेस करती हैं. इसके बाद, उन्हें रंगों में बदल देती हैं.

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

ध्यान दें: सीएसएस में, रंग को कई तरीकों से तय किया जा सकता है. जैसे, रंग के नाम, आरजीबी, आरजीबीए, हेक्स, एचएसएल, एचएसएलए, एचएसवी या एचएसवीए वैल्यू. HSLa, HSL मॉडल है. इसमें ऐल्फ़ा वैल्यू होती है. यह ओपैसिटी को 0.0 (पूरी तरह से पारदर्शी) से 1.0 (पूरी तरह से अपारदर्शी) के बीच मापती है.

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

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

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

कलर कंट्रास्ट मेज़र करना

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

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

यह फ़ोटो Unsplash से ली गई है, जिसे ऐलेक्ज़ेंडर ग्रे ने खींचा है.

यह फ़ोटो Unsplash से ली गई है, जिसे क्लार्क वैन डर बेकन ने खींचा है.

बाईं ओर, इमेज में बैंगनी, लाल, नारंगी, पीले, नीले-हरे, हल्के नीले, और गहरे नीले रंग की रेत दिख रही है. दाईं ओर, ज़्यादा चमकदार और कई रंगों वाला इंद्रधनुष पैटर्न है.

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

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

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

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

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

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

कलर ब्लाइंडनेस (एक्रोमटॉप्सिया) या मोनोक्रोमैटिज़्म

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

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

कलर कंट्रास्ट का हिसाब लगाना

कलर कंट्रास्ट फ़ॉर्मूला, कंट्रास्ट तय करने के लिए रंगों की रिलेटिव ल्यूमिनेंस का इस्तेमाल करता है. यह 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 का कंट्रास्ट रेशियो होना चाहिए. इससे WCAG की रंग से जुड़ी ज़रूरी शर्तें पूरी होती हैं. बड़े साइज़ के टेक्स्ट और ज़रूरी आइकॉन के लिए, कलर कंट्रास्ट रेशियो 3:1 होना चाहिए. बड़े साइज़ के टेक्स्ट की पहचान, कम से कम 18 पॉइंट / 24 पिक्सल या 14 पॉइंट / 18.5 पिक्सल बोल्ड किए गए टेक्स्ट से होती है. लोगो और सजावटी एलिमेंट को, रंग के कंट्रास्ट से जुड़ी इन ज़रूरी शर्तों को पूरा करने की ज़रूरत नहीं है.

अच्छी बात यह है कि इसके लिए, आपको गणित के मुश्किल फ़ॉर्मूले इस्तेमाल करने की ज़रूरत नहीं है. ऐसे कई टूल उपलब्ध हैं जो आपके लिए, रंग के कंट्रास्ट की गणना कर सकते हैं. Adobe Color, Color Contrast Analyzer, Leonardo, और Chrome के DevTools में मौजूद कलर पिकर जैसे टूल, आपको कलर कंट्रास्ट रेशियो के बारे में तुरंत बता सकते हैं. साथ ही, ऐसे सुझाव दे सकते हैं जिनसे सभी के लिए सही कलर पेयर और पैलेट बनाने में मदद मिलती है.

रंगों का इस्तेमाल

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

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

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

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

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

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

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

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

Browser Support

• 76
• 79
• 67
• 12.1

Source

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

macOS में दिखने से जुड़ी सामान्य सेटिंग.

हल्के और गहरे रंग वाले मोड की तुलना करें.

लाइट मोड.

गहरे रंग वाला मोड.

कंट्रास्ट को प्राथमिकता देता है

Browser Support

• 96
• 96
• 101
• 14.1

Source

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

सामान्य और ज़्यादा कंट्रास्ट वाले मोड की तुलना करें.

हल्के रंग वाला मोड, कंट्रास्ट के लिए कोई प्राथमिकता नहीं.

गहरे रंग वाला मोड, ज़्यादा कंट्रास्ट की सेटिंग.

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

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

रंग और कंट्रास्ट, दोनों की तुलना करें.

हल्के रंग वाला मोड, कंट्रास्ट के लिए कोई प्राथमिकता नहीं.

गहरे रंग वाला मोड, कॉन्ट्रास्ट की कोई सेटिंग नहीं.

हल्के रंग वाला मोड, ज़्यादा कॉन्ट्रास्ट की सेटिंग.

गहरे रंग वाला मोड, ज़्यादा कंट्रास्ट की सेटिंग.