10 उपकरण अपने "पठनीयता" में सुधार करने के लिए अपने डिजाइन के विपरीत की जांच करने के लिए

हम आपको रोजर जोहानसन द्वारा आपके डिजाइन की पहुंच में सुधार करने के लिए लेख 10 रंग कंट्रास्ट चेकिंग टूल का अनुवाद प्रदान करते हैं। Alexbig से अनुवाद

10 उपकरण अपने "पठनीयता" में सुधार करने के लिए अपने डिजाइन के विपरीत की जांच करने के लिए

मेरे दैनिक कार्य में, हम अपने ग्राहकों की अधिकांश साइटों के लिए ग्राफिक डिज़ाइन बनाते हैं, लेकिन सभी के लिए नहीं। उनमें से कुछ स्वयं या डिज़ाइन स्टूडियो की सहायता से दृश्य डिज़ाइन करते हैं और हमारे लिए HTML + CSS + जावास्क्रिप्ट और CMS में संक्रमण छोड़ते हैं। जब ऐसा होता है, तो मैं लगभग हमेशा डिजाइन में अपर्याप्त रंग विपरीत की समस्याओं का सामना करता हूं। कभी-कभी ये समस्याएं काफी गौण और अनुमेय होती हैं, लेकिन अक्सर ऐसे क्षेत्र होते हैं जिन्हें ठीक करने की आवश्यकता होती है।



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







लेकिन आप यह नहीं चाहते हैं, है ना? यदि आप साइट पर कोई पाठ प्रकाशित करते हैं, जैसा कि हम में से अधिकांश करते हैं, तो मुझे लगता है कि यह इसलिए है क्योंकि आप पढ़ना चाहते हैं। इसलिए, रंग विपरीत, चाहे आप इसके बारे में सोचते हैं या नहीं, आपके लिए, आपके ग्राहकों और अंतिम उपयोगकर्ताओं के लिए बहुत महत्वपूर्ण है।



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



रंग गुणांक की सही गणना कैसे की जाती है, इसकी बहुत संक्षिप्त व्याख्या: कई अलग-अलग एल्गोरिदम हैं, कुछ एप्लिकेशन WCAG 2.0 ड्राफ्ट में उल्लिखित चमकदार विपरीत अनुपात एल्गोरिथ्म का उपयोग करते हैं, जबकि अन्य रंग चमक और रंग अंतर एल्गोरिथ्म का उपयोग करते हैं। और रंग अंतर एल्गोरिदम) साथ दस्तावेज़ WCAG 1.0 में उल्लेख किया है। उनमें से कुछ दोनों का उपयोग करते हैं।



मैं ध्यान देता हूं कि उनमें से कोई भी W3C (कम से कम अभी के लिए) द्वारा अनुमोदित नहीं है, लेकिन वे यह निर्धारित करने के लिए काफी उपयुक्त हैं कि क्या पाठ रंग और पृष्ठभूमि का संयोजन रंग दृष्टिहीन लोगों या अन्य दृश्य दोष वाले लोगों में समस्या पैदा कर सकता है।



इस सब का उल्लेख करते हुए, आइए हम स्वयं टूल पर चलते हैं। उनमें से कुछ का उपयोग वेब के माध्यम से किया जा सकता है, जबकि अन्य ब्राउज़र के लिए अलग-अलग अनुप्रयोग या परिवर्धन हैं।



और यहाँ सूची है:

• कलर कंट्रास्ट चेक : जोनाथन स्नू से पहला वास्तव में सहज ऑनलाइन टूल, रंग की जांच के लिए जो मुझे पता है कि आप हेक्साडेसिमल प्रारूप में आगे और पीछे की पृष्ठभूमि के रंग को जोड़ने या स्लाइडर्स की मदद से अनुमति देते हैं। उपकरण एक त्वरित परिणाम देता है - दिखाता है कि यह संयोजन कैसा दिखता है और क्या यह परीक्षण पास करता है।
• कलर कंट्रास्ट एनालाइजर : गीज लेमन का कलर कंट्रास्ट एनालाइजर पहले की तरह ही एल्गोरिथ्म का उपयोग करता है, इसलिए परिणाम समान होने चाहिए। अंतर यह है कि कोई त्वरित प्रभाव नहीं है और कोई स्लाइडर्स नहीं है। इसका मतलब यह है कि आपको पहले फ़ॉर्म में मान दर्ज करने और यह देखने के लिए सबमिट करने की आवश्यकता है कि क्या हुआ था।
• रंग कंट्रास्ट विज़ुअलाइज़र : थोड़े अलग दृष्टिकोण का उपयोग करते हुए, टॉम हूपर का रंग कंट्रास्ट विज़ुअलाइज़र आपको रंगों को हाइलाइट करने के लिए स्वीकार्य रंग संयोजन खोजने में मदद करता है जो रंग पैलेट के लिए पर्याप्त विपरीत देता है। रंग कंट्रास्ट विज़ुअलाइज़र फ्लैश और एडोब आकाशवाणी में उपलब्ध है, अगर वे नहीं हैं तो काम करने के लिए उचित ऐड-ऑन (प्लग इन) स्थापित करें।
• कलर कंट्रास्ट एनालाइज़र फ़ायरफ़ॉक्स एक्सटेंशन : मैन्युअल रूप से रंगों में प्रवेश करने के बजाय, गीज़ लेमन के फ़ायरफ़ॉक्स प्लगइन को दस्तावेज़ में सभी पाठ तत्व मिलेंगे और पाठ की पृष्ठभूमि और रंग में अंतर की जांच करेंगे। वह रंगों के पूर्वावलोकन के साथ एक नए टैब में परिणाम खोलेगा। यह थोड़ा थकाऊ लग सकता है, लेकिन यह डिजाइन में समस्याग्रस्त स्थानों को खोजने का एक अच्छा तरीका है। दुर्भाग्य से, यह टूल छवियों को नहीं पहचानता है, इसलिए इसे ग्राफिक्स के बिना HTML दस्तावेज़ पर उपयोग करें।
• CSS विश्लेषक : Gez नींबू का एक और उपकरण, CSS विश्लेषक, जो आपके CSS के रंग विपरीत का परीक्षण करता है। यह सीएसएस को भी मान्य करता है और यह पुष्टि करता है कि सापेक्ष इकाइयों में उपयुक्त पाठ आकार निर्दिष्ट है।
• ल्यूमिनोसिटी कॉन्ट्रास्ट रेशियो एनालाइजर : यह टूल गीज़ लेमन द्वारा भी बनाया गया था - ट्रेस आरएंडडी सेंटर द्वारा विकसित एल्गोरिथम के अनुसार अग्रभूमि और पृष्ठभूमि के रंग की जांच करता है।
• विस्किट : रंग अंधा सिम्युलेटर जिसे ऑनलाइन या फ़ोटोशॉप में ऐड-ऑन के रूप में इस्तेमाल किया जा सकता है ("फ़िल्टर" मेनू में दिखाई देता है)। ऑनलाइन संस्करण आपके द्वारा अपलोड की गई छवि के आधार पर प्रभाव को अनुकरण करता है, और फ़ोटोशॉप प्लगइन आपके द्वारा काम कर रहे दस्तावेज़ के रंगों को बदलता है।
• कंट्रास्ट एनालाइजर, वर्जन 2.0 : विंडोज और मैक ओएस एक्स एप्लिकेशन। एक बहुत ही खूबसूरत एप्लिकेशन जो आपके लिए एक वेब पेज का विश्लेषण करने के अलावा काफी कुछ कर सकता है। आप संख्या या स्लाइडर्स के साथ अग्रभूमि और पृष्ठभूमि का रंग निर्दिष्ट कर सकते हैं, यह निर्दिष्ट करने के लिए कि कौन सा एल्गोरिदम लागू करना है - रंग / चमक या रोशनी, फिर अलग-अलग प्रकार के दृश्य हानि की तुलना में चयनित रंगों को देखें और दिखाएं।
• ग्रेबिट : एक ऑनलाइन टूल, लेखक: जोना फेनोची और माइक चेरिम। यह वही करता है जो नाम आपको बताता है - आप URL को वेब पेज पर दर्ज करते हैं, जिसे ग्रे के रंगों में बदल दिया जाएगा और ब्राउज़र में प्रदर्शित किया जाएगा।
• सिम डाल्टनवाद : केवल मैक ओएस एक्स के लिए उपलब्ध, यह एप्लिकेशन कंट्रास्ट की गणना नहीं करता है, लेकिन कुछ उपयोगी है। यह वास्तविक समय में विभिन्न प्रकार के रंग अंधापन का अनुकरण करता है, जिससे यह जांचना आसान हो जाता है कि क्या डिजाइन समस्याएं पैदा करता है।

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



कलर ब्लाइंडनेस का अनुकरण करने वाले उपकरण आपको यह बताएंगे कि इससे पीड़ित व्यक्ति के लिए वास्तव में कितना कठिन हो सकता है कि वह उन लिंक्स को अलग कर सके जो उनके आसपास के पाठ से केवल रंग में भिन्न होते हैं।



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



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



Alexbig से : डिजाइन के बाद जाम की तलाश न करने के लिए, इसे बहुत शुरुआत से ही सही करें (या डिजाइनरों को यह समझाएं कि इसका उपयोग कैसे करें, अगर यह आप पर निर्भर नहीं करता है!)।