ऐसी रंग-आधारित दृष्टि बाधा (color-blind) को ध्यान में रखकर डिज़ाइन की गई पेज बनाइए जो फिर भी दमकें

ऐसी रंग-आधारित दृष्टि बाधा (color-blind) को ध्यान में रखकर डिज़ाइन की गई पेज बनाइए जो फिर भी दमकें

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

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

इसे करने का एक व्यावहारिक तरीका यह है—एक खास स्थिति लेकर: एक छोटा बिज़नेस जो हीरो बैनर, प्रोडक्ट कार्ड्स, डिस्काउंट लेबल, और एक मुख्य कॉल-टू-एक्शन बटन के साथ समर सेल लैंडिंग पेज बना रहा है।

पैलेट चुनने से पहले संदेश से शुरू कीजिए

रंग चुनने से पहले लिखिए कि पेज को क्या-क्या बताना है। डिज़ाइन की भाषा में नहीं। सीधे साधे शब्दों में।

हमारे उदाहरण में पेज को यह कहना है: समर सेल, 25% ऑफ, तीन फीचर्ड प्रोडक्ट्स, एक प्रोडक्ट लगभग बिक चुका है, और विज़िटर को “Shop the sale” पर क्लिक करना चाहिए। बस। यही डिज़ाइन का काम है।

यह इसलिए महत्वपूर्ण है क्योंकि रंग अक्सर शॉर्टकट की तरह घुस आता है। लाल चेतावनी का मतलब होता है। हरा “अच्छा”। नीला “शांत”। पीला “सेल”। ठीक है, लेकिन अगर संदेश सिर्फ इसलिए काम करता है क्योंकि कोई व्यक्ति वही खास hue देख सकता है, तो यह नाज़ुक हो जाता है। कलर-ब्लाइंड शॉपर को लाल बैज लाल की तरह न दिखे, या अगर वह समान बैकग्राउंड पर बैठा हो तो हरे “available” लेबल और नारंगी “limited stock” लेबल के बीच का फर्क भी नज़र न आए।

तो पहला कदम “accessible colors चुनना” नहीं है। पहला कदम है—“यह सुनिश्चित करना कि रंग के बिना भी संदेश मौजूद रहे।” छोटा सा बदलाव है, लेकिन यह पूरे पेज को बदल देता है।

एक छोटा वॉकथ्रू: सेल वाले प्रोडक्ट कार्ड को ठीक करना

मान लीजिए एक प्रोडक्ट कार्ड में हल्का हरा बैकग्राउंड है, लाल “Limited stock” लेबल है, डार्क ग्रे में प्रोडक्ट नाम है, एक प्राइस है, और एक हरा बटन है जो “Add to cart” कहता है। यह टीम को उत्सव जैसा लगता है। लेकिन यह जोखिम भरा है।

1. स्टेटस को टेक्स्ट की तरह पठनीय बनाइए। “Limited stock” शब्दों को दिखता रहने दीजिए। उन्हें सिर्फ लाल डॉट या लाल बॉर्डर से रिप्लेस न कीजिए। अगर कोई आइकन है, तो उसे लेबल के साथ जोड़िए।
2. रंग के अलावा एक संकेत (cue) जोड़िए। “Limited stock” लेबल को पिल शेप में रखिए, छोटा घड़ी या अलर्ट आइकन जोड़िए, या dashed outline का उपयोग कीजिए। फॉर्म का कोई न कोई हिस्सा ऐसा होना चाहिए जो रंग मिल जाने पर भी कहे—“यह अलग है।”
3. टेक्स्ट को बैकग्राउंड के खिलाफ जांचिए। प्रोडक्ट नाम, प्राइस, और बटन लेबल को मजबूत कॉन्ट्रास्ट चाहिए। छोटे सेल लेबल्स को तो और भी ज्यादा ध्यान देना पड़ता है, क्योंकि छोटा टेक्स्ट जल्दी धुंधला हो जाता है।
4. बटन का रंग स्टेटस के रंग से अलग रखिए। अगर हरा रंग “available” और “click here”—दोनों का मतलब बन जाए, तो पेज शोर जैसा हो जाता है। एक कंसिस्टेंट बटन स्टाइल उपयोग कीजिए और शब्दों को अपना काम करने दीजिए।
5. कार्ड को ग्रेस्केल में टेस्ट कीजिए। यह एक तेज़ रियलिटी चेक है। अगर रंग हटाने के बाद भी लेबल, प्राइस, और बटन एक-दूसरे से अलग दिखते हैं, तो डिज़ाइन शायद सही दिशा में जा रहा है।

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

कॉन्ट्रास्ट को एक डिज़ाइन मटेरियल की तरह इस्तेमाल कीजिए, नहीं कि केवल कंप्लायंस का काम

कॉन्ट्रास्ट ही वह जगह है जहाँ एक्सेसिबल पेज या तो साफ़-सुथरे और आत्मविश्वासी बनते हैं, या फिर “सूप” बन जाते हैं। और कॉन्ट्रास्ट सिर्फ सफेद पर काला टेक्स्ट नहीं है। यह foreground और background के बीच का रिश्ता है, बटन टेक्स्ट और बटन फिल का रिश्ता, लिंक टेक्स्ट और बॉडी कॉपी का रिश्ता, आइकन्स और उनके कंटेनर का रिश्ता, और डिसेबल्ड स्टेट्स व ऐक्टिव स्टेट्स का रिश्ता।

एक सरल नियम: अगर यह इतना ज़रूरी है कि क्लिक किया जाए, पढ़ा जाए या तुलना की जाए, तो वह बिना आंखें सिकोड़ें और बिना सिर्फ hue पर भरोसा किए साफ़ दिखना चाहिए। यही याद रखने वाली बात है।

नॉर्मल बॉडी टेक्स्ट के लिए डिज़ाइनर्स आम तौर पर कम-से-कम 4.5:1 की कॉन्ट्रास्ट रेशियो टारगेट करते हैं। बड़ा टेक्स्ट अक्सर 3:1 पर भी काम कर सकता है, हालांकि messy असली दुनिया में मजबूत होना आमतौर पर बेहतर होता है। इंटरफेस कंपोनेंट्स, जैसे बटन बॉर्डर्स और फोकस आउटलाइन, को भी इतना कॉन्ट्रास्ट चाहिए कि वे नोटिस हो सकें। ये नंबर कोई जादूई मंत्र नहीं हैं, लेकिन ये काम के “गार्डरेल” हैं—खासकर तब, जब ब्रांड का कोई रंग सुंदर तो हो लेकिन उतना मजबूत न हो।

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

ब्रांड के रंग रखें, लेकिन उन्हें बेहतर काम दें

अगर एक रंग कॉन्ट्रास्ट में फेल हो रहा है, तो आपको ब्रांड पैलेट को फेंकने की जरूरत नहीं है। आम तौर पर आप भूमिकाएँ (roles) बदल सकते हैं। कमजोर पीला रंग टेक्स्ट की बजाय बैकग्राउंड वॉश की तरह काम कर सकता है। चमकीला नारंगी आइकन्स या एक्सेंट के लिए सही हो सकता है, जबकि डार्क नारंगी बटन फिल्स संभाल सकता है। ब्रांड ग्रीन इलस्ट्रेशन्स में बना रह सकता है, लेकिन अहम “सफलता वाला” संदेश को डार्क बॉर्डर, टेक्स्ट लेबल और आइकन भी चाहिए।

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

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

स्टेट्स इस तरह डिज़ाइन कीजिए कि लोग उन्हें जल्दी तुलना कर सकें

कई एक्सेसिबिलिटी समस्याएँ तब सामने आती हैं जब किसी पेज में “स्टेट्स” हों: selected बनाम unselected, available बनाम sold out, error बनाम success, current step बनाम upcoming step। अगर ये स्टेट्स सिर्फ लाल/हरा या नीला/बैंगनी के फर्क से अलग हों, तो कुछ यूज़र्स यह फर्क मिस कर देंगे।

सेल पेज पर, sold-out प्रोडक्ट के पास सिर्फ ग्रेइश इमेज ओवरले नहीं होना चाहिए। “Sold out” शब्द जोड़िए। बटन को “Notify me” कर दीजिए या उसे एक स्पष्ट लेबल के साथ डिसेबल कर दीजिए। शायद डायगोनल पैटर्न इस्तेमाल करें या इमेज की ओपेसिटी कम कर दें, लेकिन यहीं मत रुकिए। सेल टैग्स के साथ भी ऐसा ही करें। 25% डिस्काउंट के लिए बोल्ड लेबल और उसका सही पोज़िशन होना चाहिए—सिर्फ गर्म रंग नहीं।

अगर आप कॉम्बिनेशन्स चुनते समय एक तेज़ अतिरिक्त चेक चाहते हैं, तो color blindness contrast checker उन पेयरिंग्स को पकड़ने में मदद कर सकता है जो एक व्यक्ति को ठीक लगती हैं, लेकिन दूसरों के लिए टूट जाती हैं।

पेज को वैसा देखिए जैसा एक थका हुआ विज़िटर देखेगा

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

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

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