ऐक्सेस किए जा सकने वाले रंगों के साथ डिज़ाइन करना

1. परिचय

पिछला अपडेट: 05/11/22

Material 3 का कलर सिस्टम, डाइनैमिक कलर एल्गोरिदम की मदद से ऐसी कलर स्कीम बनाता है जिन्हें आसानी से ऐक्सेस किया जा सकता है. हालांकि, रंग के लिए ऐक्सेसिबिलिटी का क्या मतलब है? Material Design का नया कलर सिस्टम, ऐक्सेस की जा सकने वाली कलर स्कीम कैसे बनाता है और इसमें कौनसे टूल मदद करते हैं?

आपको क्या सीखने को मिलेगा

• कलर, सुलभता और कंट्रास्ट से जुड़े दिशा-निर्देशों से कैसे जुड़ा है.
• टूल की मदद से, सुलभता वाली कलर स्कीम कैसे बनाई जा सकती है, उसमें बदलाव कैसे किए जा सकते हैं, और कंट्रास्ट की जांच कैसे की जा सकती है.

ज़रूरी शर्तें

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

• Android की मौजूदा कलर स्कीम और भूमिकाओं की जानकारी.
• Figma की जानकारी होनी चाहिए.

आपको किन चीज़ों की ज़रूरत होगी

• Figma खाता
• Figma Designlab फ़ाइल
• Figma प्लगिन Material Theme Builder

2. अपनी प्रोफ़ाइल बनाना शुरू करें

सेटअप

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

सबसे पहले, Figma में साइन इन करें या खाता बनाएं.

Figma Community से डुप्लीकेट बनाना

Designing with accessible colors फ़ाइल पर जाएं या Figma Community में Designing with accessible colors खोजें. फ़ाइल को अपनी फ़ाइलों में कॉपी करने के लिए, सबसे ऊपर दाएं कोने में मौजूद डुप्लीकेट बनाएं पर क्लिक करें.

फ़ाइल का लेआउट

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

इस कोडलैब में, इन कॉन्सेप्ट और एक्सरसाइज़ के बारे में ज़्यादा जानकारी दी गई है. Material You की नई सुविधाओं के बारे में ज़्यादा जानने के लिए, कोडलैब पढ़ें!

Intro आर्टबोर्ड से शुरू करके, ऐसे बटन दिए गए हैं जो आर्टबोर्ड को क्रम से लिंक करते हैं. लिंक ऐक्सेस करने के लिए, बटन पर क्लिक करें.

Figma प्लगइन इंस्टॉल करना

यह कोडलैब, डाइनैमिक कलर स्कीम और टोकन जनरेट करने के लिए, नए Figma प्लगिन पर काफ़ी हद तक निर्भर करता है. Figma कम्यूनिटी पेज से सीधे Figma प्लगिन इंस्टॉल करें या Figma कम्यूनिटी में "Material Theme Builder" खोजें.

3. रंग और सुलभता

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

"क्या मुझे स्क्रीन पर रंग दिख रहा है?" रंग का इस्तेमाल करके डिज़ाइन करते समय, सिर्फ़ इस बात का ध्यान रखना ज़रूरी नहीं है. लोग अपनी देखने की क्षमता के हिसाब से, रंग को अलग-अलग तरह से देखते हैं.

कलर ब्लाइंडनेस का मतलब, कलर कॉम्बिनेशन की जांच करना हो सकता है, ताकि यूज़र इंटरफ़ेस (यूआई) के एलिमेंट एक-दूसरे में न मिलें.

ओपैसिटी और वेट, किसी रंग का असली रंग नहीं होते. हालांकि, इनसे रंग के दिखने के तरीके पर काफ़ी असर पड़ता है.

ओपैसिटी कम होने पर रंग हल्का हो जाता है. इससे टेक्स्ट को पढ़ना मुश्किल हो सकता है. उदाहरण के लिए, अगर किसी व्यक्ति को पास का नहीं दिखता है, तो उसे कुछ दूरी से 30% ओपैसिटी पर सेट किया गया टेक्स्ट पढ़ने में परेशानी होगी.

ओपैसिटी का इस्तेमाल सावधानी से करें और सुझाए गए दिशा-निर्देशों के तहत कभी भी इसका इस्तेमाल न करें.

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

गहरे रंग के बैकग्राउंड पर पतला टाइप होने से, घुटन महसूस होती है.

पढ़ने में आसानी बनाम समझने में आसानी. इस लैब में, हम पूरे समय टेक्स्ट के पढ़ने में आसान होने की बात करेंगे. पढ़ने में आसानी का मतलब है कि कॉन्टेंट को कितनी आसानी से पढ़ा जा सकता है. वहीं, समझने में आसानी का मतलब है कि कॉन्टेंट को कितनी आसानी से समझा जा सकता है.

4. कलर कंट्रास्ट

सुलभता के दिशा-निर्देश, डिज़ाइनर और डेवलपर को विशेषज्ञों की बनाई चेकलिस्ट देते हैं. इससे यह पक्का किया जा सकता है कि सभी के लिए बनाए गए प्रॉडक्ट बनाने के सबसे सही तरीकों का पालन किया जा रहा है. WCAG, सामान्य स्टैंडर्ड है और यह लैब इसी को रेफ़र करती है.

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

कलर कंट्रास्ट के फ़ेल होने का उदाहरण.

कलर कंट्रास्ट के दिशा-निर्देशों को टेक्स्ट और नॉन-टेक्स्ट में बांटा गया है. हर एक के लिए, ग्रेड का अपना सेट होता है.

टेक्स्ट

	AA	AAA
बड़ा टेक्स्ट	3:1	4.5:1
सामान्य टेक्स्ट (मुख्य लेख)	4.5:1	7:1

टेक्स्ट के अलावा अन्य कॉन्टेंट

	AA
टेक्स्ट के अलावा अन्य कॉन्टेंट (ग्राफ़िक एलिमेंट)	3:1

आइए, कुछ कंट्रास्ट की जांच करें और देखें कि इसे मैन्युअल तरीके से कैसे ठीक किया जाता है.

1. Figma में, यूज़र इंटरफ़ेस (यूआई) एलिमेंट में मौजूद रंग ढूंढें. यह इमेज, बड़े टेक्स्ट (#C0BEC5) से शुरू होती है. यह (#F5F5FF) बैकग्राउंड कलर पर दिखता है. ऑनलाइन कंट्रास्ट चेक करने वाले टूल का इस्तेमाल करके, इन रंगों को फ़ोरग्राउंड और बैकग्राउंड में डालने पर पता चलता है कि यह सभी रेटिंग में फ़ेल हो जाता है.
2. बैकग्राउंड के रंग के हिसाब से टेक्स्ट बहुत ज़्यादा चमकदार है. ऑनलाइन कंट्रास्ट चेकर पर रहते हुए, कलर पिकर की मदद से फ़ोरग्राउंड के रंग को गहरे रंग में बदलें. ऐसा तब तक करें, जब तक कि वह AAA के स्टैंडर्ड को पूरा न कर ले.
3. Figma में वापस जाकर, बड़े टेक्स्ट पर पासिंग कलर लागू करें.
4. बॉडी कॉपी और बटन के लिए भी यही प्रोसेस अपनाएं. साथ ही, यह पक्का करें कि आपने हर बटन के टेक्स्ट और बैकग्राउंड, दोनों के रंग की जांच कर ली हो.
5. ,आइकॉन पर भी यही प्रोसेस लागू करने के लिए, ग्राफ़िकल ऑब्जेक्ट और यूज़र इंटरफ़ेस कॉम्पोनेंट में दिए गए नतीजे का इस्तेमाल करें**.**
6. हर एलिमेंट के लिए, नए रंग को Figma में लाएं. अब सभी एलिमेंट, कंट्रास्ट रेटिंग के मानकों को पूरा कर रहे होंगे!

कलर कंट्रास्ट के पास होने का उदाहरण.

यह प्रोसेस शायद लंबी लगी हो. साथ ही, हो सकता है कि नतीजों में एक-दूसरे के पूरक रंगों वाला रंग पटल न बना हो. ऐसे में, टूल आपकी मदद कर सकते हैं!

5. रोशनी के साथ बनाया गया

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

किसी रंग को निकालने पर, उससे पांच मुख्य रंग मिलते हैं. इनसे टोनल पैलेट जनरेट होते हैं. टोनल पैलेट में सफ़ेद और काले रंग के साथ-साथ 13 टोन होते हैं. टोन की वैल्यू 100 का मतलब है कि रोशनी सबसे ज़्यादा है. इससे रंग सफ़ेद हो जाता है. टोन की हर वैल्यू, रंग में मौजूद रोशनी की मात्रा को दिखाती है. यह वैल्यू 0 से 100 के बीच होती है.

टोनल पैलेट का सिस्टम, किसी भी कलर स्कीम को डिफ़ॉल्ट रूप से ऐक्सेस करने लायक बनाने के लिए ज़रूरी है.

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

जिन एलिमेंट की ल्यूमिनेंस एक जैसी होती है उनमें पढ़ने के लिए सही कंट्रास्ट नहीं होता. वहीं, जिन एलिमेंट की ल्यूमिनेंस अलग-अलग होती है उन्हें आसानी से पहचाना जा सकता है.

ल्युमिनेंस या टोन से पता चलता है कि डिजिटल कलर वैल्यू, रोशनी के किस लेवल को दिखाती है.

Material You के डाइनैमिक कलर को इस तरह से बनाया गया है कि यह अलग-अलग कॉन्टेक्स्ट में काम कर सके. अलग-अलग कॉन्टेक्स्ट में कंट्रास्ट रेशियो को मैनेज करने के लिए, ल्यूमिनेंस लेवल एक अहम एट्रिब्यूट है. इससे, हर रंग के कॉम्बिनेशन की जांच किए बिना भी, रंगों को एक साथ इस्तेमाल किया जा सकता है.

ग्रेस्केल से शुरुआत करना

क्या आपको नहीं पता कि इसकी शुरुआत कहां से करनी है? ग्रेस्केल से शुरुआत करें! इससे रंग को हटा दिया जाता है, ताकि आप हैरारकी और यूज़र एक्सपीरियंस पर फ़ोकस कर सकें. इसके बाद, यह तय करें कि कौनसे रंग सबसे ज़्यादा ज़रूरी हैं, ताकि यह तय किया जा सके कि कलर मैपिंग के लिए कौनसी रंग भूमिकाएं सही हैं.

6. सुलभ थीम बनाना

थीम बिल्डर, मटीरियल डिज़ाइन टोकन को Figma स्टाइल के तौर पर जनरेट करता है. इससे डाइनैमिक कलर को विज़ुअलाइज़ किया जा सकता है और पसंद के मुताबिक थीम बनाई जा सकती है. ऐसा Material 3 के कलर सिस्टम के हिसाब से किया जाता है, ताकि कलर स्कीम में सुलभता के लिए सही रंग जनरेट किए जा सकें.

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

एमटीबी में रंग जोड़ें.

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

कनेक्ट किए गए मॉकअप के साथ कलर स्कीम.

इन एक्सरसाइज़ के लिए, Material Theme Builder ने Figma फ़ाइल में ज़रूरी टोकन पहले से ही जनरेट कर दिए हैं.

7. Material Theme Builder की मदद से कंट्रास्ट की जांच करना

बहुत बढ़िया, लेकिन हम समझते हैं कि आपको इनमें से कुछ स्टाइल को अलग-अलग रंगों के साथ मैन्युअल तरीके से अपडेट करना होगा. Material Theme Builder में, मुख्य स्कीम के रंगों के लिए कंट्रास्ट की जांच करने की सुविधा पहले से मौजूद होती है. इससे ये फ़ैसले लेने में मदद मिलती है.

1. टोकन को स्टाइल के तौर पर बनाया जाता है. इसलिए, जनरेट किए गए रंग की वैल्यू भी सेट की जा सकती है. Figma स्टाइल में, मौजूदा थीम के प्राइमरी कलर पर टॉगल करें. इसके बाद, दाईं ओर मौजूद 'स्टाइल में बदलाव करें' आइकॉन चुनें.
2. प्रॉपर्टी में मुख्य रंग अपडेट करें. यह रंग के आउटपुट और ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) में दिखता है. कलर एल्गोरिदम ने इस रंग को जनरेट नहीं किया है. इसलिए, हम इसकी सुलभता की गारंटी नहीं दे सकते.
3. प्लगिन मेन्यू में, Check Contrast पर क्लिक करें. इसके बाद, प्राइमरी के लिए Edit style modal को फिर से खोलें. इससे कंट्रास्ट की जांच की जाती है और कंट्रास्ट रेटिंग दिखती है.

Figma स्टाइल वाले डायलॉग में कंट्रास्ट.

खास बातें

• मटेरियल थीम बिल्डर, ऐक्सेस की जा सकने वाली थीम बनाता है.
• स्टाइल पैनल में, कोर स्कीम के रंगों के लिए कलर कंट्रास्ट की जांच करने की सुविधा होती है.

8. बधाई हो

बहुत बढ़िया! सुलभता, आपकी प्रोसेस का अहम हिस्सा होनी चाहिए. Material Design और Material Theme Builder की मदद से, इसे लागू करना और भी आसान हो जाता है.

अगले चरण

• Material 3 की सुलभता से जुड़े नए दिशा-निर्देश देखें.
• ऐप्लिकेशन की जांच करने के लिए, Accessibility Scanner का इस्तेमाल करें.
• आइए, निजी तौर पर बात करते हैं: अलग-अलग लोगों के लिए सुलभता डिज़ाइन करना सेशन
• Material Design Kit का फ़ायदा लें. इसमें पहले से कनेक्ट किए गए कॉम्पोनेंट होते हैं, ताकि आप सीधे थीम बनाने और उन्हें लिंक करने का काम शुरू कर सकें.
• इन्हें अपने डिज़ाइन पर लागू करें!

अगर आपका कोई सवाल है, तो @MaterialDesign on Twitter पर जाकर, हमसे कभी भी पूछें.

डिज़ाइन से जुड़े ज़्यादा कॉन्टेंट और ट्यूटोरियल के लिए, youtube.com/MaterialDesign पर बने रहें