एक्सेसिबिलिटी: अपने टेक्स्ट और ग्राफिक्स को तैयार करना
8 मिनट
कम दिखाई देने या नज़र से जुड़ी दूसरी समस्याओं वाले विजिटर्स के लिए साइट के पेजों के फोरग्राउंड और बैकग्राउंड के बीच अंतर समझना मुश्किल हो सकता है। इसलिए, हमारा सुझाव है कि अपनी साइट का कलर कंट्रास्ट चेक करें और जरूरत के हिसाब से उसे एडजस्ट करें।
हमारी सलाह
अलग-अलग विजन जरूरतों वाले विजिटर्स के लिए एक्सेसिबिलिटी बढ़ाने के लिए, हम ये बदलाव करने की सलाह देते हैं:
- नॉर्मल टेक्स्ट के लिए टेक्स्ट और बैकग्राउंड के रंगों का कंट्रास्ट रेशियो 4.5:1 और बड़े टेक्स्ट के लिए 3:1 रखें।
- ग्राफिक्स और यूजर इंटरफेस कंपोनेंट्स, जैसे फॉर्म इनपुट बॉर्डर और प्लेसहोल्डर वगैरह, के लिए कम से कम 3:1 का कंट्रास्ट रेशियो रखें।
- AAA लेवल के लिए ज्यादा कंट्रास्ट रेशियो जरूरी है—नॉर्मल टेक्स्ट के लिए कम से कम 7:1 और बड़े टेक्स्ट के लिए 4.5:1।
जानना अच्छा है:
14 पॉइंट (लगभग 18px) से बड़ा और बोल्ड टेक्स्ट या 18 पॉइंट (लगभग 24px) का टेक्स्ट, बड़ा टेक्स्ट माना जाता है।
कलर कोड ढूंढना
आप जिस भी साइट बिल्डर का इस्तेमाल कर रहे हैं—Wix Editor, Studio Editor या Harmony Editor—उसमें कलर कोड ढूंढ सकते हैं।
Wix Editor
Studio Editor
Wix Harmony Editor
- संबंधित एलिमेंट, जैसे टेक्स्ट, स्ट्रिप बैकग्राउंड या कंटेनर बॉक्स, चुनें और कलर पिकर खोलें।
- कलर कोड देखने के लिए किसी भी रंग पर होवर करें।
कलर कॉन्ट्रास्ट टेस्ट करना:
कई साइट्स और ब्राउज़र प्लगइन्स उपलब्ध हैं, जैसे कॉन्ट्रास्ट चेकर, जो फोरग्राउंड और बैकग्राउंड कलर्स की तुलना करके कलर कॉन्ट्रास्ट टेस्ट करता है। इसके लिए कलर कोड्स का इस्तेमाल किया जाता है। बैकग्राउंड इमेज पर मौजूद टेक्स्ट का कलर कॉन्ट्रास्ट चेक करने के लिए, हम कलर कॉन्ट्रास्ट एनालाइजर इस्तेमाल करने का सुझाव देते हैं। इससे आप बैकग्राउंड कलर चुनकर कॉन्ट्रास्ट टेस्ट कर सकते हैं।
कलर कॉन्ट्रास्ट एडजस्ट करना
चाहे आप कोई भी साइट बिल्डर इस्तेमाल कर रहे हों, अपने एडिटर में एक्सेसिबिलिटी विज़ार्ड की मदद से साइट पर कम कलर कॉन्ट्रास्ट ढूंढकर उसे एडजस्ट कर सकते हैं। विज़ार्ड आपकी साइट को संभावित एक्सेसिबिलिटी समस्याओं के लिए स्कैन करता है और साइट की एक्सेसिबिलिटी बेहतर बनाने के तरीके हाइलाइट करता है।
आप ज़्यादातर एलिमेंट्स में विज़ार्ड के अंदर ही बदलाव कर सकते हैं। हालांकि, कुछ एलिमेंट्स (जैसे ऐप एलिमेंट्स) अभी विज़ार्ड के साथ पूरी तरह इंटीग्रेट नहीं हैं। इसलिए, आपको उन्हें मैन्युअल रूप से रिव्यू या एडजस्ट करना होगा।
Wix Editor
Studio Editor
Wix Harmony Editor
- अपने एडिटर पर जाएं।
- अपने एडिटर में सबसे ऊपर सेटिंग्स पर क्लिक करें।
- एक्सेसिबिलिटी विज़ार्ड चुनें।
- स्कैन साइट चुनें।
- डिटेक्टेड इश्यूज़ टैब पर क्लिक करें।
- लिस्ट से कोई पेज चुनें।
- इंप्रूव कलर कॉन्ट्रास्ट पर क्लिक करें।
- संबंधित एलिमेंट चुनें और ज़रूरत के मुताबिक उसे एडजस्ट करें:
विज़ार्ड में कॉन्ट्रास्ट एडजस्ट करें
कंट्रास्ट को मैन्युअल रूप से एडजस्ट करें
पर क्लिक करें।
कलर कंट्रास्ट को मैन्युअली रिव्यू करना
हो सकता है कि साइट पर कुछ कलर कंट्रास्ट को एक्सेसिबिलिटी विज़ार्ड पहचान न पाए। हमारा सुझाव है कि आप Wix Contrast Checker से साइट के कंटेंट को मैन्युअली रिव्यू करें और ज़रूरत के मुताबिक कंट्रास्ट एडजस्ट करें।
आप अपने साइट बिल्डर (Wix Editor या Studio Editor) से कंट्रास्ट चेकर इंस्टॉल करके इस्तेमाल कर सकते हैं। अगर एलिमेंट ज़रूरी शर्तों को पूरा नहीं करते हैं, तो आप पिकर से नए रेशियो भी टेस्ट कर सकते हैं।
Wix Editor
Studio Editor
कंट्रास्ट चेक करने के लिए:
- (सिर्फ़ पहली बार) अपने एडिटर में ऐड-ऑन इंस्टॉल करें।
- अपने एडिटर में ऊपर दाईं ओर टूल्स
पर क्लिक करें। - एडिटर ऐड-ऑन्स पर क्लिक करें।
- कंट्रास्ट चेकर पर क्लिक करें।
- चेकर में एलिमेंट और बैकग्राउंड का कलर चुनने के लिए कलर बॉक्स का इस्तेमाल करें या संबंधित कलर कोड पेस्ट करें।
कंट्रास्ट एडजस्ट करने के लिए:
- कॉन्ट्रास्ट चेकर में फ़ोरग्राउंड और बैकग्राउंड कलर को रिकमेंडेड रेशियो के हिसाब से एडजस्ट करें।
- पिकर में नीचे दाईं ओर दिए गए कलर कोड कॉपी करें।
- अपने एडिटर में संबंधित एलिमेंट चुनें।
- एलिमेंट की डिज़ाइन सेटिंग्स से कलर पिकर खोलें।
- माय कलर्स के आगे ऐड पर क्लिक करें।
- कॉपी किया गया कोड फ़ील्ड में पेस्ट करें।
टिप:
डिज़ाइन सेटिंग्स खोलने का तरीका एलिमेंट पर निर्भर करता है। आम तौर पर, एलिमेंट चुनें और फिर
डिज़ाइन आइकन
पर क्लिक करें।
पर क्लिक करें। क्या आप अपनी साइट पर ग्राफ या डेटा दिखा रहे हैं?
हाई-कॉन्ट्रास्ट कलर आपकी साइट पर डेटा दिखाने का एक बेहतरीन तरीका है। हालांकि, अलग-अलग जानकारी की पहचान आसान बनाने के लिए टेक्सचर और पैटर्न जैसे दूसरे इंडिकेटर का इस्तेमाल करने की भी सलाह दी जाती है।
अगला स्टेप:
अपनी साइट की एक्सेसिबिलिटी बेहतर बनाना जारी रखने के लिए,
एक्सेसिबिलिटी चेकलिस्ट पर वापस जाएं।