कम कंट्रास्ट वाले टेक्स्ट की वजह से, सभी लोग आपकी वेबसाइट को आसानी से पढ़ नहीं पाते. यह बात उन लोगों के लिए भी ज़्यादा मुश्किल हो जाती है जिन्हें देखने में परेशानी होती है. DevTools कम कंट्रास्ट की समस्याएं अपने-आप ढूंढ सकता है और उन्हें ठीक करने में आपकी मदद करने के लिए, बेहतर रंगों के सुझाव दे सकता है.
DevTools का इस्तेमाल करके ये काम करें:
- कंट्रास्ट से जुड़ी समस्याओं के बारे में जानना. सभी समस्याओं की सूची देखने के लिए, सीएसएस की खास जानकारी पैनल, (झलक) समस्याएं टैब या लाइटहाउस रिपोर्ट का इस्तेमाल करें.
- कंट्रास्ट से जुड़ी समस्याएं ठीक करना. इंस्पेक्टर मोड में टूलटिप की मदद से समस्याओं को देखें. साथ ही, वे रंग चुनें जिनके लिए कलर पिकर से कंट्रास्ट रेशियो ठीक करने का सुझाव मिलता है.
- देखने में आने वाली समस्याओं को कम करना. देखें कि आपकी साइट कैसी दिखती है.
कम कंट्रास्ट वाले टेक्स्ट के बारे में जानें
कम कंट्रास्ट वाले टेक्स्ट के बारे में जानने के लिए:
- अपने पेज पर DevTools खोलें. इस ट्यूटोरियल में, इस डेमो पेज का इस्तेमाल किया जा सकता है.
तीनों में से किसी एक पैनल का इस्तेमाल करके, कंट्रास्ट से जुड़ी सभी समस्याओं की सूची पाएं:
सीएसएस की खास जानकारी वाले पैनल में कंट्रास्ट से जुड़ी समस्याएं
खास जानकारी पाने के लिए:
- सीएसएस की खास जानकारी खोलें.
- खास जानकारी कैप्चर करें.
- रंग सेक्शन खोलें. इसके बाद, स्क्रोल करके कंट्रास्ट की समस्याएं पर जाएं. अगर कोई समस्या है, तो उस पर क्लिक करें.
कंट्रास्ट की समस्याएं टेबल में, किसी एलिमेंट पर कर्सर घुमाएं और उसके बगल में मौजूद लिंक पर क्लिक करें.
समस्या को ठीक करने का तरीका, कम कंट्रास्ट वाला टेक्स्ट ठीक करें सेक्शन में बताया गया है.
(झलक देखें) 'समस्याएं' टैब में कंट्रास्ट की समस्याएं
समस्याओं की लिस्ट पाने के लिए:
- समस्याएं टैब में जाकर, कंट्रास्ट से जुड़ी समस्याओं की शिकायत करने की सुविधा चालू करें:
- सेटिंग > प्रयोग के तौर पर उपलब्ध खोलें.
- फ़िल्टर बार में,
contrast issueखोजें. - समस्याओं वाले पैनल की मदद से, कंट्रास्ट से जुड़ी समस्या की अपने-आप रिपोर्ट होने की सुविधा चालू करें को चुनें.
- सबसे ऊपर दिए गए प्रॉम्प्ट में, DevTools को फिर से लोड करें पर क्लिक करें.
- 'समस्याएं' टैब खोलें.
DevTools से मिली कंट्रास्ट से जुड़ी समस्याओं को बड़ा करें. इसके बाद, एलिमेंट की टेबल को बड़ा करें और एलिमेंट के बगल में मौजूद लिंक पर क्लिक करें.
समस्या को ठीक करने का तरीका, कम कंट्रास्ट वाला टेक्स्ट ठीक करें सेक्शन में बताया गया है.
लाइटहाउस रिपोर्ट में समस्याओं के बीच अंतर दिखाना
रिपोर्ट चलाने के लिए:
- DevTools में,
ज़्यादा टैब > लाइटहाउस खोलें. - इन सेटिंग की मदद से लाइटहाउस रिपोर्ट जनरेट करें:
- मोड: नेविगेशन (डिफ़ॉल्ट)
- कैटगरी: सुलभता
- डिवाइस: डेस्कटॉप
- पेज लोड का विश्लेषण करें पर क्लिक करें. इसके बाद, लाइटहाउस से रिपोर्ट जनरेट होने का इंतज़ार करें.
- नीचे की ओर स्क्रोल करके, कंट्रास्ट सेक्शन पर जाएं और एलिमेंट की सूची में, उस एलिमेंट के लिंक पर क्लिक करें जिस पर असर पड़ा है.
- समस्या को ठीक करने का तरीका, कम कंट्रास्ट वाला टेक्स्ट ठीक करें सेक्शन में बताया गया है.
कम कंट्रास्ट वाले टेक्स्ट की समस्या को ठीक करना
कम कंट्रास्ट की समस्या को ठीक करने के लिए:
- कंट्रास्ट से जुड़ी समस्या ढूंढें और सीएसएस की खास जानकारी पैनल, समस्याएं टैब या लाइटहाउस रिपोर्ट में, उस एलिमेंट के लिंक पर क्लिक करें जिस पर असर पड़ा है. DevTools आपको एलिमेंट पैनल पर ले जाता है और उससे जुड़ा एलिमेंट चुनता है.
उदाहरण के लिए, इस डेमो पेज पर, जिस एलिमेंट पर असर पड़ा है वह पहला एलिमेंट h1.line1है. DevTools के सबसे ऊपर दाएं कोने में मौजूद,
जांच करें पर क्लिक करें और व्यूपोर्ट में एलिमेंट पर कर्सर घुमाएं. DevTools इस एलिमेंट के लिए एक टूलटिप दिखाता है.
टूलटिप में, कंट्रास्ट रेशियो की वैल्यू के बगल में मौजूद,
चेतावनी का निशान देखें. कंट्रास्ट रेशियो, फ़ोरग्राउंड (टेक्स्ट का रंग) और बैकग्राउंड के रंगों के बीच चमक के अंतर को मापता है.एलिमेंट के टेक्स्ट के रंग की जानकारी के बगल में मौजूद, कलर पिकर खोलें और कलर पिकर में जाकर, कंट्रास्ट रेशियो सेक्शन को बड़ा करें.
कलर पिकर से आपको पता चलता है कि कंट्रास्ट रेशियो, WebAIM के दिशा-निर्देशों के AA या AAA लेवल के मुताबिक नहीं है.
एएए लेवल के आगे,
सुझाए गए रंग का इस्तेमाल करें बटन पर क्लिक करें. कलर पिकर सुविधा, टेक्स्ट का वह रंग लागू करती है जो कंट्रास्ट रेशियो से जुड़े दिशा-निर्देशों के मुताबिक होता है.
इसके अलावा, मैन्युअल तरीके से रंग चुनने के लिए, शेड की झलक में मौजूद सर्कल को खींचें और छोड़ें. AA या AAA लेवल के अंदर रहने के लिए, सबसे ऊपर या सबसे नीचे की लाइन के नीचे से कोई रंग चुनें.
इसी तरह, सीएसएस की खास जानकारी पैनल, समस्याएं टैब या लाइटहाउस रिपोर्ट में कंट्रास्ट से जुड़ी सभी समस्याएं ठीक करें.
बदलावों को सेव करें
DevTools में किए गए बदलावों को सेव करने के लिए:
- सीएसएस के सभी बदलावों को एक साथ कॉपी करें और उन्हें अपने कोड में चिपकाएं
- ऐसा Workspace सेट अप करें जिसकी मदद से, DevTools सीधे आपके सोर्स में फ़ाइलें सेव कर सकें.
आगे क्या करना है?
ज़्यादा जानें:
- सामान्य तौर पर सुलभता सीखें
- खास तौर पर, रंग और कंट्रास्ट सुलभता