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

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

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

ज़्यादा रंगों वाली इमेज देखें और तुलना करें कि रंगों को ठीक से न देखने वाले लोगों को वह इमेज कैसी दिखेगी.

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

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

ड्यूटेरानोपिया (इसे आम तौर पर ग्रीन ब्लाइंड कहा जाता है) 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

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

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

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

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

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

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

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

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

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

पसंदीदा कलर स्कीम

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

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

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

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

सामान्य और हाई कंट्रास्ट की तुलना करें.

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

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

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

देखें कि आपको क्या समझ आया

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