header-logo
Wix के साथ शुरुआत करनाWix के साथ अपनी वेबसाइट और बिज़नेस बनाएँअपनी वेबसाइट बनाने, टेम्पलेट कस्टमाइज़ करने, या अपनी ऑनलाइन प्रेज़ेंस बेहतर बनाने के लिए प्रोफ़ेशनल्स को हायर करने के लिए हमारे AIटूल्स देखे
वेबसाइट बनानापढ़ें कि Wix एडिटर का इस्तेमाल कैसे करें और अपनी साइट पर कंटेंट कैसे मैनेज करें। जानें कि अपने विज़िटर्स की प्राइवेसी कैसे सुरक्षित रखें और अपनी साइट को एक्सेसिबल कैसे बनाएं।
अकाउंट और बिलिंगअपनी अकाउंट सेटिंग्स देखें, अपने सब्सक्रिप्शन और प्लान मैनेज करें और अपने इनवॉइस समझें.
Wix मोबाइल ऐप का इस्तेमाल करनाअपने बिज़नेस को चलते-फिरते अच्छे से चलाने के लिए हमारे मोबाइल ऐप्स का इस्तेमाल करें और अपनी साइट के मेंबर्स के टच में रहने के लिए एक खास ऐप सेट अप करें।
डोमेन कनेक्ट करनाअपनी साइट के लिए डोमेन खरीदने, कनेक्ट करने या ट्रांसफर करने का तरीका जानने के लिए हमारे स्टेप-बाय-स्टेप गाइड को फॉलो करें, और जानें कि अपनी साइट का डेटा कैसे सुरक्षित रखें।
अपना बिज़नेस मैनेज़ करनाअपने बिज़नेस और वेब प्रेजेंस को बढ़ाने के लिए टूल्स लें। अपनी खास ज़रूरतों के लिए सही टूल्स ढूंढें, ऑनलाइन पेमेंट सेट अप करें और अपनी साइट के एनालिटिक्स पर नज़र रखें।
अपनी साईट प्रमोट करना सर्च इंजन पर इसे प्रमोट करके, ईमेल भेजकर और पेड ऐड चलाकर अपनी साइट को ज़्यादा विज़िबल बनाना सीखें। प्रैक्टिकल टिप्स से अपनी ऑनलाइन प्रेजेंस को बेहतर बनाएं।
स्टूडियो, पार्टनर और एंटरप्राइअपने स्टूडियो या एंटरप्राइज़ अकाउंट का ज़्यादा से ज़्यादा फ़ायदा उठाएँ, एडवांस्ड फ़ीचर्स के साथ जो आपको ज़्यादा अच्छे से काम करने में मदद करेंगे.
और अधिक मदद की आवश्यकता है?साइट परफॉर्मेंस और टेक्निकल दिक्कतों के लिए सॉल्यूशन ढूंढें, उन दिक्कतों के बारे में जानें जिन्हें हम ठीक करने पर काम कर रहे हैं या मदद के लिए हमसे कॉन्टैक्ट करें।
placeholder-preview-image
Wix Learnहमारे कोर्सेज़ और ट्यूटोरियल के ज़रिए अपने स्किल्स का विकास करें।
Wix ब्लॉगवेब डिज़ाइन, मार्केटिंग आदि के लिए सुझाव पाएं।
SEO लर्निंग हबसर्च इंजन से ऑर्गेनिक साइट ट्रैफिक बढ़ाना सीखें।
वेबसाइट विकासहमारे फ़ुल-स्टैक प्लेटफ़ॉर्म का उपयोग करके एक कस्टम साइट बनाएं।
किसी प्रोफेशनल को अपॉइन्ट करेंअपने लक्ष्यों तक पहुँचने में मदद के लिए किसी एक्सपर्ट से संपर्क करें।
placeholder-preview-image
  1. घर
  2. वेबसाइट बनाना
  3. एक एक्सेसिबल साइट बनाना
  4. अपनी साइट को एक्सेसिबल बनाना
  5. एक्सेसिबिलिटी: अपना टेक्स्ट और ग्राफिक्स तैयार करना

एक्सेसिबिलिटी: अपना टेक्स्ट और ग्राफिक्स तैयार करना

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

हमारी सिफारिशें

अलग-अलग विज़न (दृष्टि) संबंधी ज़रूरतों वाले विज़िटर्स के लिए एक्सेसिबिलिटी बढ़ाने के लिए, हम निम्नलिखित सुझाव देते हैं:
  • नॉर्मल टेक्सट के लिए टेक्सट कलर और बैकग्राउंड कलर कंट्रास्ट को 4.5:1 और बड़े टेक्सट के लिए 3:1 के अनुपात (रेशियो) में बदलना।
  • ग्राफिक्स और यूजर इंटरफेस कंपोनेंट्स (जैसे फॉर्म इनपुट बॉर्डर, प्लेसहोल्डर्स आदि) के लिए कम से कम 3:1 का कंट्रास्ट रेशियो।
  • लेवल AAA के लिए नॉर्मल टेक्सट के लिए कम से कम 7:1 और बड़े टेक्सट के लिए 4.5:1 के हाई कंट्रास्ट रेशियो की आवश्यकता होती है।
अच्छी जानकारी:
लार्ज टेक्स्ट (बड़े टेक्स्ट) को 14 पॉइंट्स (लगभग 18px) से ऊपर और बोल्ड, या 18 पॉइंट्स (लगभग 24px) के रूप में परिभाषित किया गया है।

कलर कोड ढूँढना

आप जिस भी साइट बिल्डर (Wix Editor, Studio Editor, या Harmony Editor) का उपयोग कर रहे हैं, उसमें कलर कोड पा सकते हैं।
  1. संबंधित एलिमेंट (टेक्स्ट, स्ट्रिप बैकग्राउंड, कंटेनर बॉक्स, आदि) को चुनें और Color Picker पर जाएं।
  2. कलर कोड देखने के लिए किसी भी कलर पर होवर (hover) करें।
Wix Editor में कलर पिकर। कर्सर एक कलर पर है और पैनल पर उसका कोड हाईलाइट किया गया है।
कलर कंट्रास्ट टेस्ट करना:
ऐसी कई साइटें और ब्राउज़र प्लगइन्स हैं जैसे Contrast Checker जो फोरग्राउंड और बैकग्राउंड कलर्स (कलर कोड का उपयोग करके) की तुलना करके कलर कंट्रास्ट का टेस्ट करते हैं। बैकग्राउंड इमेज पर टेक्सट के कलर कंट्रास्ट को चेक करने के लिए, हम Colour Contrast Analyser का उपयोग करने की सलाह देते हैं जो आपको बैकग्राउंड कलर चुनने और फिर टेस्ट करने की सुविधा देता है।

कलर कंट्रास्ट एडजस्ट करना

आप अपने एडिटर में Accessibility Wizard का उपयोग करके साइट पर किसी भी कम कलर कॉन्ट्रास्ट को ढूंढ और ठीक कर सकते हैं - चाहे आप किसी भी साइट बिल्डर का उपयोग कर रहे हों। विज़ार्ड आपकी साइट को संभावित एक्सेसिबिलिटी समस्याओं के लिए स्कैन करता है, और साइट की एक्सेसिबिलिटी को बेहतर बनाने के तरीके बताता है।
ज़्यादातर एलिमेंट्स के साथ, आप विज़ार्ड के अंदर ही बदलाव कर सकते हैं। हालांकि, कुछ एलिमेंट्स (जैसे कि ऐप एलिमेंट्स) फ़िलहाल विज़ार्ड के साथ पूरी तरह से इंटीग्रेटेड नहीं हैं, और उन्हें मैन्युअली रिव्यू या एडजस्ट करने की ज़रूरत होती है।
  1. अपने एडिटर पर जाएं।
  2. अपने एडिटर के टॉप पर Settings पर क्लिक करें।
  3. Accessibility Wizard चुनें।
  4. Scan Site चुनें।
  5. Detected issues टैब पर क्लिक करें।
  6. लिस्ट में से एक पेज चुनें।
  7. Improve color contrast पर क्लिक करें।
  8. संबंधित एलिमेंट चुनें और जरूरत के अनुसार उसे एडजस्ट करें:

कलर कॉन्ट्रास्ट को मैन्युअली रिव्यू करना

साइट पर ऐसा कलर कंट्रास्ट हो सकता है जिसे Accessibility Wizard पहचान नहीं पाता है। हम Wix Contrast Checker के साथ साइट कंटेंट को मैन्युअल रूप से रिव्यू करने और ज़रूरत के अनुसार कंट्रास्ट को एडजस्ट करने की सलाह देते हैं।
आप अपने साइट बिल्डर (Wix Editor, या Studio Editor) से Contrast Checker इंस्टॉल करके उसका उपयोग कर सकते हैं। यदि एलिमेंट्स आवश्यकताओं को पूरा नहीं करते हैं, तो आप पिकर के साथ नए रेशियो (ratios) को भी टेस्ट कर सकते हैं।

कॉन्ट्रास्ट चेक करने के लिए:

  1. (केवल पहली बार) अपने एडिटर में एड-ऑन इंस्टॉल करें।
  2. अपने एडिटर के ऊपर दाईं ओर Tools पर क्लिक करें।
  3. Editor Add-ons पर क्लिक करें।
  4. Contrast Checker पर क्लिक करें।
  5. चेकर में एलिमेंट और बैकग्राउंड का कलर चुनने के लिए कलर बॉक्स का उपयोग करें, या संबंधित कलर कोड पेस्ट करें।
Wix Editor में कॉन्ट्रास्ट चेकर। एक कलर बॉक्स चुना गया है, जिससे कलर पिकर खुल गया है। कॉन्ट्रास्ट फेल हो गया है।

कॉन्ट्रास्ट एडजस्ट करने के लिए:

  1. Contrast Checker में फोरग्राउंड और बैकग्राउंड कलर्स को रिकमेंडेड रेश्यो के अनुसार एडजस्ट करें।
  2. पिकर के नीचे दाईं ओर से कलर्स के कोड कॉपी करें।
  3. अपने एडिटर में संबंधित एलिमेंट चुनें।
  4. एलिमेंट की डिजाइन सेटिंग्स से कलर पिकर खोलें।
  5. My colors के बगल में Add पर क्लिक करें।
  6. कॉपी किया गया कोड फील्ड में पेस्ट करें।
पिकर में एक नया कलर चुना गया है, और कॉन्ट्रास्ट पास हो गया है। कलर का कोड हाईलाइट किया गया है।
टिप:
आप डिज़ाइन सेटिंग्स कैसे खोलते हैं यह एलिमेंट पर निर्भर करता है, लेकिन आमतौर पर आप एलिमेंट को चुनकर और फिर Design आइकन पर क्लिक करके उन्हें ढूंढ सकते हैं।
अपनी साइट पर ग्राफ या डेटा डिस्प्ले कर रहे हैं?
अपनी साइट पर डेटा दिखाने के लिए हाई कंट्रास्ट कलर एक बेहतरीन तरीका है। हालांकि, हम जानकारी के बीच अंतर करने के लिए अन्य इंडिकेटर्स (जैसे टेक्सचर और पैटर्न) का उपयोग करने की भी सलाह देते हैं।
अगला स्टेप:
अपनी साइट की एक्सेसिबिलिटी को और बेहतर बनाने के लिए एक्सेसिबिलिटी चेकलिस्ट पर वापस जाएं।

क्या इससे मदद मिली?

|
इस लेख में
  • हमारी सिफारिशें
  • कलर कोड ढूँढना
  • कलर कंट्रास्ट एडजस्ट करना
  • कलर कॉन्ट्रास्ट को मैन्युअली रिव्यू करना

क्या इससे मदद मिली?

|