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

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

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

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

दिखने वाला रंग

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

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

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

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

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

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

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

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

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

ड्यूटरनोपिया

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

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

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

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

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

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

रंग को ध्यान में रखकर बनाई गई मीडिया क्वेरी

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

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

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

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

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

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

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

नियमित और उच्च कंट्रास्ट की तुलना करें.

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

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

रंग और कंट्रास्ट की तुलना करना.

देखें कि आपको कितना समझ आया है

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