यहाँ हमारे दूत सेवा का पैलेट है। वेब पर कई रंग योजनाओं की तरह, इसमें कॉर्पोरेट रंग (लाल), सूचना रंग (नीला), सफल संचालन रंग (हरा), चेतावनी रंग (पीला), और ग्रे के विभिन्न रंग शामिल हैं।

यद्यपि ये रंग एक महान पैलेट की तरह लगते हैं, समय के साथ हमें एहसास हुआ कि वे हमारे उपयोगकर्ता इंटरफ़ेस की सभी आवश्यकताओं के लिए पर्याप्त लचीले नहीं हैं। एक ही टिप्पणी लगातार समीक्षाओं में पॉप अप हुई: "पाठ अपर्याप्त रूप से विपरीत है।"



[ कम विपरीत: पाठ और पृष्ठभूमि रंग बहुत समान हैं, जिससे पाठ पढ़ना मुश्किल हो जाता है]।

मौजूदा पैलेट में, रंगों के विपरीत बहुत कम है, जिसके परिणामस्वरूप साइट पर कई संदेश पढ़ना मुश्किल है। मैंने सिर्फ बेहतर पठनीयता के लिए रंग योजना को बदलने का फैसला किया। लेकिन मैं यह भी चाहता था कि यह वेब एक्सेसिबिलिटी पर सिफारिशों का पालन करे, यानी यह दृश्य हानि वाले लोगों के लिए मुश्किलें पैदा नहीं करेगा।

वेब एक्सेसिबिलिटी के आधार पर डिज़ाइन का मतलब है कि आपको सभी उपयोगकर्ताओं द्वारा साइट की धारणा को ध्यान में रखने की आवश्यकता है, चाहे उनकी दृश्यता, श्रवण, मोटर या संज्ञानात्मक क्षमताओं की परवाह किए बिना। एक्सेसिबिलिटी मानकों को वर्ल्ड वाइड वेब कंसोर्टियम (W3C) जैसे संगठनों द्वारा विकसित किया गया है, प्रत्येक साइट इन मानकों को लागू कर सकती है।

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

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

मैंने अधिक विषम, अधिक किफायती रंगों के साथ एक नई रंग योजना विकसित करना शुरू किया। सब कुछ सही करने के लिए, मुझे कुछ समय और विचार चाहिए जो मैं साझा करना चाहता हूं।

शुरुआत के लिए, कौन से रंगों को सस्ती माना जाता है?

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

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

नीचे दिए गए उदाहरण में, बाईं ओर का पाठ पृष्ठभूमि के रंग (कम विपरीत) के समान है, और दाईं ओर का पाठ बहुत भिन्न (उच्च विपरीत) और पढ़ने में बहुत आसान है।



डब्ल्यू 3 सी द्वारा विकसित वेब कंटेंट एक्सेसिबिलिटी गाइडलाइंस (डब्ल्यूसीएजी) दो रंगों के बीच विपरीत अनुपात की गणना के लिए एक सूत्र प्रदान करता है ।

इसके विपरीत अनुपात 1: 1 (कोई अंतर नहीं) से 21: 1 (उच्चतम संभव मूल्य) तक भिन्न होता है। वे कई मुफ्त उपकरणों में गणना करना आसान है: हमें तनागुरु , कंट्रास्ट और स्टार्क स्केच प्लगइन पसंद हैं।

WCAG सटीक रूप से पढ़ने वाले पाठ के विपरीत अनुपात को परिभाषित करता है :

एए स्तर: न्यूनतम मानक
ठीक प्रिंट का अनुपात विपरीत अनुपात 4.5: 1 या अधिक होना चाहिए।
बड़ा फ़ॉन्ट 3: 1 या उच्चतर

एएए स्तर: उन्नत मानक
छोटा प्रिंट कंट्रास्ट अनुपात 7: 1 या अधिक होना चाहिए
बड़े फ़ॉन्ट 4.5: 1 या उच्चतर

नोट: "बड़ा", आकार का गैर-बोल्ड फ़ॉन्ट 18pt (24px) या बड़ा आकार या बड़ा फ़ॉन्ट 14pt (~ 19px) या उससे बड़ा योग्य है अन्यथा यह एक "छोटा" फ़ॉन्ट है। W3C एक बिंदु को इंच के 1/72 और पिक्सेल को 1/96 इंच के रूप में परिभाषित करता है , इसलिए पिक्सेल को बिंदुओं में बदलने के लिए, पिक्सेल मान को 0.75 से गुणा करें।

हमने एक और सस्ती रंग योजना कैसे बनाई

जब हमने समझा कि मानक क्या हैं और उनकी आवश्यकता क्यों है, तो मैं आपको बताता हूं कि हमने उन्हें कैसे अभ्यास में रखा।

सभी मौजूदा रंगों के कंट्रास्ट अनुपात की गणना

मौजूदा रंग योजना में उन सभी रंगों की जांच करें जो मैंने ऊपर उल्लेखित उपकरण ( तनागुरु , कंट्रास्ट , स्टार्क ) का उपयोग करके किए हैं।



मैंने पाया कि हमारे जीवंत रंगों में से कोई भी पाठ के लिए 4.5: 1 मानक को पूरा नहीं करता है, हालांकि हमने उन्हें हमारी साइट पर पाठ के लिए उपयोग किया है। हमने पाठ के लिए कुछ हल्के भूरे रंगों का भी उपयोग किया। यह स्पष्ट हो गया कि आपको ग्रे के रंगों और रंगों दोनों को समायोजित करना होगा।

ग्रेस्केल चयन

मैंने उन स्थानों की एक सूची तैयार की है, जहाँ पर हमारी साइट पर ग्रे टेक्स्ट है:

• पैरा का शरीर, आमतौर पर ग्रे की सबसे गहरी छाया में होता है
  
• अतिरिक्त पाठ या उपशीर्षक, आमतौर पर ग्रे की दूसरी सबसे गहरी छाया में
  
• निष्क्रिय कार्यों और प्लेसहोल्डर्स का पाठ, आमतौर पर ग्रे की तीसरी सबसे गहरी छाया में

प्राथमिक हेडर, माध्यमिक होस्ट जानकारी और तृतीयक अशक्त अवस्था

इस तरह का 1/2/3 टेम्प्लेट इंटरनेट पर काफी सामान्य है, इसलिए यदि हम इसे खरोंच से पैलेट विकसित कर रहे हैं तो इसके साथ शुरू करना सुविधाजनक है।


अस्पष्टता को कम करके ग्रे के विभिन्न रंगों का परीक्षण करना

हमें तीन रंगों के ग्रे की आवश्यकता है जो उन्हें प्राथमिक, द्वितीयक और तृतीयक स्थिति प्रदान करने के लिए एक दूसरे से पर्याप्त रूप से भिन्न हैं, और यह कि वे पहुंच के मानकों को पूरा करते हैं।


स्टार्क स्केच प्लगइन का उपयोग करके विपरीत अनुपात की गणना

स्केच का उपयोग करते हुए, मैंने ग्रे के सबसे गहरे शेड से भरे कुछ वर्गों को आकर्षित किया। मैंने वर्गों में से एक की अस्पष्टता को 50% तक कम कर दिया और देखा कि हेक्स कोड में कौन सा शुद्ध रंग करीब है। (आप केवल विभिन्न रंगों को बनाने के लिए अस्पष्टता का उपयोग कर सकते हैं, लेकिन शुद्ध रंग अधिक लचीले हैं, उन्हें मज़बूती से सभी उपकरणों और परियोजनाओं पर लागू किया जा सकता है)।

तब मैंने स्टार्क प्लगइन का उपयोग करके इस लाइटर शेड के विपरीत अनुपात की गणना की। मैंने बेतरतीब ढंग से 50% को चुना, लेकिन यह पता चला कि यह एक सफेद पृष्ठभूमि पर 3: 1 अनुपात से बिल्कुल मेल खाती है। इसलिए, मैंने इसे निचली सीमा के रूप में लिया: यह ग्रे की सबसे हल्की छाया होगी जिसे हम साइट पर उपयोग करेंगे। यह बड़े पाठ के लिए AA स्तर के मानकों को पारित करता है, और इसका उपयोग प्रपत्र क्षेत्र और अन्य छोटे पाठ में प्लेसहोल्डर्स के लिए किया जा सकता है।



अब आपको द्वितीयक पाठ के लिए 100% से 50% के बीच का मान ज्ञात करना होगा। विशुद्ध रूप से गणितीय रूप से, 75% एक अच्छा विकल्प लगता है, लेकिन विभिन्न रंगों का अनुभव होने के बाद, मैं 65% पर रुक गया, क्योंकि यह बिल्कुल 4.5: 1 के विपरीत से मेल खाता है।



प्रक्रिया में कुछ समय लगता है, लेकिन जब तक आप जिस अनुपात के लिए लक्ष्य कर रहे हैं उस अनुपात से मेल नहीं खाते, तब तक इसके विपरीत अनुपात की गणना करते रहें।

जब मेरे पास ग्रे के तीन बुनियादी शेड्स थे, तो मैंने आइकन, बॉर्डर्स और बैकग्राउंड के लिए कुछ और शेड्स (सिर्फ टेक्स्ट के लिए नहीं!) को परिभाषित करने के लिए उसी प्रक्रिया का उपयोग किया।

चमकीले रंग चयन

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

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


यदि स्केच आरजीबी दिखाता है, तो एचएसबी मोड में प्रवेश करने के लिए आरजीबी लेबल पर क्लिक करें।

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

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



परिणाम नीले और हरे रंग के तीन रंगों का है, जिसका उपयोग विभिन्न विपरीत बिंदुओं के साथ पाठ के लिए किया जा सकता है।

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

मैंने मूल कॉर्पोरेट रंग नहीं बदला, लेकिन दो गहरे संस्करण बनाए जो पाठ के लिए उपयोग किए जा सकते हैं।

मैंने कुछ चमकीले कम-कंट्रास्ट शेड्स भी नोट किए हैं जो केवल आइकन या ग्राफिक डिजाइन के लिए रंग लहजे के रूप में इस्तेमाल किए जा सकते हैं।

अंत में, मैंने प्रत्येक रंग के बहुत हल्के रंगों का निर्माण किया, जो कि यदि आवश्यक हो, तो पृष्ठभूमि के रूप में उपयोग किया जा सकता है।

संक्षेप में देना

परिणाम एक पूर्ण रंग योजना है, जो अब पहुंच के लिए सिफारिशों को पूरा करती है और पाठ और यूआई में हमारी सभी आवश्यकताओं के लिए कई विकल्प प्रदान करती है।





हमने सीएसएस में नए रंगों को ध्यान से रखा है और अभी भी परिणामों से बहुत प्रसन्न हैं और पठनीयता में सुधार किया है।


पहले और बाद में

रंग चुनने की इस प्रक्रिया के दौरान, बहुत सारे परीक्षण और त्रुटि हुई, लेकिन परिणाम हमारे सभी उपयोगकर्ताओं के लिए एक पठनीय और सुलभ साइट थी।