उपलब्ध रंग प्रणाली डिजाइनिंग

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



रंग के साथ सही विपरीत प्राप्त करना चुनौतीपूर्ण है, और विशेष रूप से क्योंकि रंग अविश्वसनीय रूप से व्यक्तिपरक है और उत्पाद के सौंदर्यशास्त्र पर बड़ा प्रभाव पड़ता है। हम हाथ से उठाए गए, जीवंत रंगों के साथ एक रंग प्रणाली बनाना चाहते थे जो सुलभता और विपरीतता के मानकों को भी पूरा करे।

जब हमने अपने उत्पादों में रंग विपरीत को बेहतर बनाने के लिए बाहरी उपकरणों का मूल्यांकन किया, तो हमने समस्या को हल करने के लिए दो सामान्य तरीकों पर ध्यान दिया:

1. रंगों का मैनुअल चयन और मानक के साथ उनके विपरीत की जांच करना। हमारे अनुभव ने हमें बताया कि इस दृष्टिकोण ने रंगों की पसंद को भी परीक्षण और त्रुटि पर निर्भर बना दिया।
2. बेस रंगों के एक सेट से लाइटर और गहरे रंगों को बनाएं। दुर्भाग्य से, सरल डिमिंग या हल्का रंग सुस्त या मफलर रंगों को जन्म दे सकता है जो एक-दूसरे से अलग करना मुश्किल है, और अक्सर वे बहुत अच्छे नहीं लगते हैं।

मौजूदा उपकरणों के साथ जो हमें मिला, एक रंग प्रणाली बनाना मुश्किल था जो हमें मानकों के आधार पर उनकी उपलब्धता सुनिश्चित करते हुए भव्य रंगों का चयन करने की अनुमति देगा। हमने एक नया उपकरण बनाने का फैसला किया है जो वास्तविक समय में उनकी उपलब्धता के बारे में परिणाम प्राप्त करने के लिए धारणा के रंग मॉडल का उपयोग करता है। इसने हमें जल्दी से एक रंग योजना बनाने की अनुमति दी जो हमारी आवश्यकताओं को पूरा करती है और हमें भविष्य में कुछ कर सकती है।

प्रागितिहास

हम अपने उत्पादों में जिन रंगों का उपयोग करते हैं, वे हमारे ब्रांड के रंग पैलेट पर आधारित होते हैं। हमारे उत्पादों में इन रंगों का उपयोग हमें स्ट्राइप की कॉर्पोरेट पहचान के कुछ तत्वों को अपने इंटरफेस में लाने की अनुमति देता है।



दुर्भाग्य से, इन रंगों के विपरीत नियमों का पालन करना (और बनाए रखना) मुश्किल था। इंटरनेट एक्सेसिबिलिटी दिशानिर्देश छोटे पाठ के लिए 4.5 और बड़े पाठ के लिए 3.0 के न्यूनतम अनुपात का सुझाव देते हैं। जब हमने अपने उत्पादों में रंगों के उपयोग का लेखा-परीक्षण किया, तो हमने पाया कि छोटे पाठ (काले को छोड़कर) के लिए हमारे द्वारा उपयोग किए गए किसी भी रंग के विपरीत की दहलीज पूरी नहीं हुई।



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

जब हमने पहली बार अपने उत्पादों में टेक्स्ट कंट्रास्ट को बेहतर बनाने के तरीकों पर ध्यान दिया, तो हमने शुरू में अपने पैमाने पर टेक्स्ट वन स्टेप डार्क के लिए डिफ़ॉल्ट रंग ऑफसेट की जांच की - यह नीचे के बाएं कॉलम में देखा जा सकता है।



दुर्भाग्य से, हमारे कुछ रंगों में अभी भी अगले अंधेरे छाया में पर्याप्त विपरीत नहीं था। जैसे ही हमें अपने मौजूदा तराजू (दाएं स्तंभ) पर पर्याप्त विपरीत के साथ एक रंग मिला, हमने अपने रंगों में पर्याप्त चमक खो दी। रंग एक सफेद पृष्ठभूमि पर अनुशंसित हैं, लेकिन वे गहरे और बादलदार हैं, और रंगों को भेद करना मुश्किल है।

आगे जाने के बिना, आपको उपलब्ध रंगों या रंगों में से किसी एक को चुनने के लिए आवश्यक समझौते को स्वीकार करना आसान होगा। दोनों प्राप्त करने के लिए, हमें अपने रंग प्रणाली को खरोंच से फिर से डिज़ाइन करने की आवश्यकता है।

हम एक नई रंग प्रणाली विकसित करना चाहते थे जो तीन बुनियादी नियम प्रदान करेगी:

1. अभिगम्यता की पहुँच: रंगों में पहुँच के नियमों का पालन करने के लिए पर्याप्त विपरीत है।
2. स्पष्ट, जीवंत रंग: उपयोगकर्ता आसानी से एक दूसरे से रंग भेद कर सकते हैं।
3. स्थायी दृश्य वजन: प्रत्येक स्तर पर, किसी भी रंग में दूसरे पर प्राथमिकता नहीं होती है।

रंग स्थानों के बारे में संक्षिप्त परिचय

हमें RGB कलर स्पेस के संदर्भ में स्क्रीन पर रंग के साथ काम करने की आदत है । रंग बनाने के लिए स्क्रीन पर कितना लाल, हरा और नीला प्रकाश मिलाया जाता है, इसके आधार पर रंग निर्धारित किए जाते हैं।



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

हम समझते हैं कि रंगों को तीन तरीकों से व्यवस्थित किया जाता है:

रंग: यह किस रंग का है?
रंग: यह कितना रंगीन है?
चमक: यह कितना उज्ज्वल है?



एक लोकप्रिय रंग स्थान जो इस तरह से रंगों को निर्दिष्ट करने का समर्थन करता है, वह है HSL । यह अच्छी तरह से डिजाइन उपकरण और लोकप्रिय रंग प्रबंधन कोड पुस्तकालयों में समर्थित है। केवल एक ही समस्या है: एचएसएल जिस तरह से लपट की गणना करता है वह अपूर्ण है। अधिकांश रंग रिक्त स्थान इस तथ्य को ध्यान में नहीं रखते हैं कि मानव आंखें अलग-अलग रंगों को रोशनी के विभिन्न स्तरों के रूप में अलग-अलग रूप में अनुभव करती हैं - गणितीय चमक के समान स्तर पर, पीले नीले से हल्का दिखाई देता है।

नीचे दी गई छवि प्रदर्शन के रंग स्थान में समान चमक और संतृप्ति के साथ रंगों का एक सेट है। जबकि रंग अंतरिक्ष का दावा है कि संतृप्ति और लपट समान हैं, हमारी आँखें इससे सहमत नहीं हैं। ध्यान दें कि इनमें से कुछ रंग दूसरों की तुलना में हल्के या अधिक संतृप्त दिखाई देते हैं। उदाहरण के लिए, नीला विशेष रूप से गहरा लगता है, और पीला और हरा विशेष रूप से हल्का लगता है।



रंग रिक्त स्थान हैं जो रंग की मानव धारणा को अनुकरण करने की कोशिश करते हैं। समान रूप से कथित रंग रिक्त स्थान मॉडल रंग उन कारकों पर आधारित होते हैं जो मानव दृष्टि से अधिक संबंधित होते हैं और यह सुनिश्चित करने के लिए जटिल रंग परिवर्तन करते हैं कि ये माप मानव दृष्टि के काम को दर्शाते हैं।



जब हम समान चमक वाले अंतरिक्ष में समान चमक और संतृप्ति के साथ रंगों का एक नमूना लेते हैं, तो हम एक महत्वपूर्ण अंतर का निरीक्षण कर सकते हैं। ये रंग आपस में घुलते मिलते हैं, और प्रत्येक रंग हल्का और बाकी की तरह संतृप्त लगता है।

हैरानी की बात है कि, कुछ उपकरण हैं जो कथित समान रंग मॉडल का समर्थन करते हैं, और एक रंग पैलेट विकसित करने के करीब नहीं आया है। फिर हमने अपना बनाने का फैसला किया।

रंग प्रतिपादन

हमने एक वेब इंटरफ़ेस बनाया है जो हमें कथित समान रंग मॉडल का उपयोग करके हमारे रंग प्रणाली की कल्पना और हेरफेर करने की अनुमति देगा। जब हम अपने रंगों के माध्यम से हल करते हैं, तो उपकरण ने हमें तत्काल प्रतिक्रिया दी - हम प्रत्येक परिवर्तन का प्रभाव देख सकते हैं।



ऊपर दिखाया गया रंग स्थान CIELAB या, स्नेहपूर्वक, लैब के रूप में जाना जाता है। एल लैब में लपट के लिए खड़ा है, लेकिन एचएसएल में लाइटनेस के विपरीत, यह धारणा में एकरूप होने के लिए डिज़ाइन किया गया है। लैब कलर स्पेस में हमारे रंग तराजू का अनुवाद करके, हम अपने रंगों को उनके कथित विपरीत के आधार पर अनुकूलित कर सकते हैं और परिणामों की तुलना कर सकते हैं।

नीचे दिए गए चार्ट में हमारे पिछले रंग पैलेट की चमक और कंट्रास्ट वैल्यू को दर्शाया गया है, जो कलर टूल में दिखाई देता है। आप देख सकते हैं कि हमारे प्रत्येक रंग के कथित हल्केपन का अपना वक्र है, और पीले और हरे रंग एक ही बिंदु पर नीले और बैंगनी रंग की तुलना में बहुत हल्के होते हैं।



एक कथित सजातीय रंग अंतरिक्ष में हमारे रंगों को नियंत्रित करके, हम रंगों का एक सेट बनाने में सक्षम थे जो सभी रंगों में समान रूप से विपरीत हैं और जितना संभव हो उतना संभव छाया और हमारे वर्तमान रंगों की संतृप्ति को बनाए रखते हैं। प्रस्तावित रंगों में, पीले में नीले रंग के समान विपरीत सीमा होती है, लेकिन साथ ही वे अभी भी हमारे रंगों की तरह दिखते हैं।

नीचे दिए गए आरेख से पता चलता है कि प्रत्येक रंग की कथित चमक समान वक्र से मेल खाती है, जिसका अर्थ है कि प्रत्येक रंग (बाईं ओर लेबल) का इस स्तर पर एक ही विपरीत मूल्य है (शीर्ष पर संख्यात्मक लेबल)।





हमारे नए उपकरण ने हमें यह भी दिखाया कि यह उचित था। कथित समान रंग मॉडल के विज़ुअलाइज़ेशन ने हमें दृश्य धारणा की सीमाओं को देखने की अनुमति दी। आरेखों पर छायांकित क्षेत्र तथाकथित काल्पनिक रंग हैं जो वास्तव में प्रतिलिपि प्रस्तुत करने योग्य या कथित नहीं हैं।

अधिकांश रंग मिश्रण उपकरण आपको प्रत्येक पैरामीटर के लिए संपूर्ण श्रेणी में मान सेट करने और बस रंगों को क्रॉप करने या सबसे उपयुक्त रंगों को वापस करने की अनुमति देते हैं जो वास्तव में आपके द्वारा निर्दिष्ट मापदंडों से मेल नहीं खाते हैं। उपलब्ध रंग अंतरिक्ष के वास्तविक समय दृश्य में बदलाव करते हुए हमें बहुत तेजी से पुनरावृति की अनुमति दी गई क्योंकि हम बता सकते हैं कि कौन से परिवर्तन संभव थे और कौन से बदलाव हमें अपने लक्ष्य के करीब लाए: उज्ज्वल, विभेदित रंग जो कि संबंधित सिद्धांतों और विपरीत के मानकों के अनुरूप थे।

कुछ बिंदुओं पर, एक साथ काम करने वाले सही रंगों का एक सेट खोजना आँख में सुई को फैलाने जैसा था। यहां, छायांकित क्षेत्र दिखाते हैं कि अंतरिक्ष कितना सीमित है जिसमें मूल्यों के संयोजन स्थित हैं जो सभी रंगों के लिए लगभग समान चमक को ध्यान में रखते हैं।

परिणाम

वास्तविक घटकों और इंटरफेस के साथ कई पुनरावृत्तियों और परीक्षणों के बाद, हम एक रंग पैलेट के साथ आए जिसने हमारे लक्ष्यों को प्राप्त किया: हमारे रंगों, जैसा कि अपेक्षित था, सुलभता के लिए सिफारिशों को पूरा किया, अपने स्पष्ट, जीवंत रंग को बरकरार रखा और सभी रंगों में निरंतर दृश्य भार बनाए रखा।

पाठ और आइकन के लिए हमारे नए डिफ़ॉल्ट रंग अब WCAG 2.0 दिशानिर्देशों में परिभाषित पहुंच विपरीत सीमा से अधिक हैं।





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

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

सिस्टम में निर्मित विपरीत संकेतकों का उपयोग करके, आप आसानी से विभिन्न घटकों में रंग विपरीत को समायोजित कर सकते हैं पूर्वानुमानित परिणाम।



उदाहरण के लिए, हमने प्रत्येक रंग को स्पष्ट रूप से अलग करने के लिए रंगीन पृष्ठभूमि का उपयोग करने के लिए अपने बैज घटक को फिर से डिजाइन किया। सबसे हल्के संभव रंग मूल्य के साथ, एक दूसरे से अंतर करना बहुत मुश्किल था। पृष्ठभूमि और पाठ रंग को एक स्तर पर स्थानांतरित करके, हम अलग-अलग प्रत्येक रंग संयोजन को ठीक किए बिना सभी आइकन रंगों के लिए पाठ विपरीत बनाए रखने में सक्षम थे।

निष्कर्ष

हमने सीखा कि सस्ती रंग प्रणालियों को विकसित करने का मतलब "अंधेरे" में खिलवाड़ नहीं करना चाहिए। हमें केवल रंग के बारे में सोचने के तरीके को बदलना होगा:

1) एक समान वर्दी रंग मॉडल का उपयोग करें

एक सस्ती रंग प्रणाली विकसित करने में, एक समान रूप से समान रंग मॉडल (जैसे CIELAB) का उपयोग करके हमें यह समझने में मदद मिली कि प्रत्येक रंग हमारी आंखों को कैसा दिखता है, न कि यह कंप्यूटर को कैसा दिखता है। इससे हमें अपने अंतर्ज्ञान का परीक्षण करने और हमारे सभी रंगों की चमक और रंगीनता की तुलना करने के लिए संख्याओं का उपयोग करने की अनुमति मिली।

2) सस्ती का मतलब उज्ज्वल नहीं है

WCAG पहुंच मानक जानबूझकर केवल अग्रभूमि रंग और पृष्ठभूमि रंग के बीच विपरीत पर ध्यान केंद्रित करता है, और न कि वे कितने उज्ज्वल हैं। यह समझना कि प्रत्येक रंग कितना उज्ज्वल दिखता है, रंगों को एक दूसरे से अलग करने में मदद करता है।

3) रंग के बारे में बात करना मुश्किल है, उपकरण बोलना चाहिए

एक समान रंग पैटर्न को समझने में नुकसान यह है कि असंभव रंग मौजूद हैं - "बहुत उज्ज्वल गहरे पीले" या "उज्ज्वल प्रकाश शाही नीले" जैसी कोई चीज नहीं है। अपना खुद का उपकरण बनाने से हमें यह पता चलता है कि कौन से रंग संभव थे, और हमें अपने रंग पैलेट के माध्यम से जल्दी से साइकिल चलाने की अनुमति दी, जब तक कि हम एक पैलेट नहीं बना पाए, जो जीवंत, जीवंत और हमारे ब्रांड के अनुरूप हो।