अधिक सुलभ डिजाइन के लिए उच्च रंग कंट्रास्ट का उपयोग करना

रंग कंट्रास्ट के लिए वेब मानक

रंग विपरीत अनुपात दो रंगों के बीच के अंतर को मापता है। मूल्य जितना अधिक होता है, पृष्ठभूमि से अग्रभूमि में ऑब्जेक्ट (पाठ, छवि, ग्राफिक) को अलग करना आसान होता है.

रंग कई अलग-अलग तरीकों से विपरीत हो सकते हैं, जैसे कि रंग, मूल्य तथा परिपूर्णता. रंग विपरीत अनुपात की गणना वर्ल्ड वाइड वेब के लिए मुख्य अंतरराष्ट्रीय मानकों के संगठन डब्ल्यू 3 सी द्वारा प्रदान किए गए एक सूत्र द्वारा की जाती है.

इसके बीच मान ले सकते हैं 1: 1 (कोई विपरीत नहीं, अग्रभूमि और पृष्ठभूमि का रंग समान है) और 21: 1 (अधिकतम विपरीत यह केवल काले और सफेद रंग के बीच मौजूद है).

W3C का सबसे आखिरी वेब कंटेंट एक्सेसिबिलिटी गाइडलाइंस (WCAG) 2.0 वेब डेवलपर्स और कंटेंट क्रिएटर्स को न्यूनतम स्तर (न्यूनतम AA) के लिए मानदंड और स्वीकार्य रंग कंट्रास्ट अनुपात का बढ़ा हुआ (लेवल AAA) मूल्य प्रदान करता है।.

स्तर एए को कम से कम की आवश्यकता होती है नियमित पाठ के लिए 4.5: 1 अनुपात, तथा बड़े पाठ के लिए 3: 1. सबटाइटल्स जैसे बड़े टेक्स्ट को पढ़ना बहुत आसान है, इसीलिए इसे कम कलर कंट्रास्ट की जरूरत होती है.

यदि आप स्तर एएए तक पहुंचना चाहते हैं जो बढ़ाया स्तर है, तो आपको अपनी रंग योजना को अधिक सावधानी से डिजाइन करने की आवश्यकता है, क्योंकि इसमें कम से कम आवश्यकता होती है सामान्य पाठ के लिए 7: 1 विपरीत अनुपात, तथा 4.5: 1 बड़े के लिए. यदि कोई पाठ लोगो या ब्रांड नाम का हिस्सा है, तो WCAG स्तर पर न्यूनतम रंग विपरीत आवश्यकता नहीं है.

हम केवल वेबसाइट को नेत्रहीन सुलभ कह सकते हैं यदि हर अग्रभूमि वस्तु और उसकी पृष्ठभूमि के बीच का रंग विपरीत अनुपात कम से कम स्तर एए तक पहुंचता है.

उच्च रंग कंट्रास्ट अनुपात के लाभ

बेहतर पठनीयता सुनिश्चित करके आप न केवल दृष्टिबाधित उपयोगकर्ताओं को शामिल करते हैं, बल्कि यह भी जो लोग आपकी सामग्री को छोटे स्क्रीन पर पढ़ते हैं जैसे कि स्मार्टफोन या स्मार्टवॉच के बीच में खराब रोशनी की स्थिति, और इसपर कम गुणवत्ता मॉनिटर.

पाठ और पृष्ठभूमि के बीच उच्च विपरीत होने पर लोग तेजी से पढ़ते हैं, इसलिए साइट की सामग्री से ऊबने में उन्हें अधिक समय लगेगा।.

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

रंग कंट्रास्ट की जाँच के लिए ऐप्स

पूरे वेब पर कई बेहतरीन मुफ्त उपकरण हैं जो डिजाइनरों को उनकी वेबसाइट के रंग विपरीत अनुपात की जांच करने में मदद कर सकते हैं.

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

सबसे महत्वपूर्ण बात यह है कि आपको हमेशा याद रखना चाहिए अग्रभूमि रंग की तुलना करें जैसे कि पाठ का रंग उसके आसपास के क्षेत्र में (पृष्ठभूमि का रंग).

1. वेबएम कलर कंट्रास्ट चेकर

WebAim (वेब ​​एक्सेसिबिलिटी इन माइंड) एक ऐसी संस्था है जो वेब एक्सेसिबिलिटी को बढ़ावा देती है जो डेवलपर्स को कई अन्य बेहतरीन एक्सेसिबिलिटी टूल्स जैसे कि वेव, एक सामान्य एक्सेसिबिलिटी मूल्यांकन ऐप, जो आपकी मदद कर सकती है, के बीच एक सरल लेकिन विश्वसनीय कलर कंट्रास्ट चेकर प्रदान करती है जल्दी से अपनी साइट की पहुंच संबंधी समस्याओं का आकलन करें.

WebAim का कलर कंट्रास्ट चेकर आपको बताता है यदि आपके रंग WCAG AA और AAA परीक्षण पास करते हैं, दोनों सामान्य और बड़े ग्रंथों के लिए.

2. स्नू कलर कंट्रास्ट चेक

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

CheckMyColours

Giovanni Scala द्वारा बनाया गया CheckMyColours आपको सभी अग्रभूमि-पृष्ठभूमि चित्रों के रंग विपरीत अनुपात की जांच करने की अनुमति देता है एक लाइव वेबसाइट पर.

यह गणना करता है चमक विपरीत अनुपात, चमक अंतर, तथा रंग अंतर, और आपको परिणामों के बारे में पूरी रिपोर्ट प्रदान करता है। CheckMyColours की रिपोर्ट आपकी समझ को आसान बना सकती है कि आप अपनी साइट की दृश्य पहुंच को कैसे बेहतर बना सकते हैं.

रंग योजना डिजाइनर

रंग योजना डिजाइनर विशेष रूप से रंग विपरीत चेकर नहीं है, लेकिन इसके लिए एक उपकरण है पूर्ण रंग योजनाएँ बनाना.

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

W3C आपको एक विशाल वेब एक्सेसिबिलिटी इवैल्यूएशन टूल लिस्ट भी प्रदान करता है, जहाँ आप कई अन्य कलर कंट्रास्ट टूल जैसे कि यह सहायक एक्सेसरी कलर व्हील पा सकते हैं.

दिखने में सुलभ वेबसाइट बनाने के लिए टिप्स

यदि आप एक नेत्रहीन सुलभ वेबसाइट बनाना चाहते हैं, तो यह हमेशा एक अच्छा विचार है कार्यक्षमता या अर्थ बताने के लिए अकेले रंग का उपयोग करने से बचें. अपनी वर्तमान स्थिति के आधार पर अपना रंग बदलने वाले प्रतीक इसके लिए विशिष्ट उदाहरण हैं.

यदि यह संभव है, हमेशा अतिरिक्त दृश्य संकेतों को डिज़ाइन करें यह उन लोगों की सहायता करता है जो कार्यक्षमता को समझने में अलग तरह से रंग देखते हैं.

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

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

अब पढ़ें: वेबसाइट रंग योजना का चयन करने के लिए व्यावहारिक दृष्टिकोण