वेब डिज़ाइन के कलर कंट्रास्ट की जांच करना

अपने डिज़ाइन के सुलभ कलर कंट्रास्ट की जांच करने और उसकी पुष्टि करने के लिए, तीन टूल और तकनीकों की खास जानकारी.

Adam Argyle
Charlie Gleason

मान लें कि आपके पास हल्के रंग के बैकग्राउंड पर कुछ टेक्स्ट है, जैसे कि यह:

'The quick brown fox jumps over the lazy dog again' वाक्यांश दिखाया गया है. इसमें हर शब्द या दो शब्दों को हल्का नीला रंग दिया गया है. धीरे-धीरे फीके होने वाले शब्दों के हर सेक्शन के ऊपर, उनके कंट्रास्ट रेशियो का स्कोर दिखता है. कम कंट्रास्ट की वजह से, आखिरी कुछ शब्दों को पढ़ना बहुत मुश्किल है.

ऐसा हो सकता है कि आप सभी उदाहरणों को पढ़ पाएं, लेकिन ऐसा सभी के लिए नहीं होता.

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

WCAG और कलर कंट्रास्ट

W3C का वेब सुलभता इनिशिएटिव, रणनीतियां, स्टैंडर्ड, और संसाधन उपलब्ध कराता है. इससे यह पक्का किया जा सकता है कि इंटरनेट ज़्यादा से ज़्यादा लोगों के लिए उपलब्ध हो. इन स्टैंडर्ड के आधार पर बने दिशा-निर्देशों को वेब कॉन्टेंट ऐक्सेसबिलिटी गाइडलाइंस या डब्ल्यूसीएजी कहा जाता है. WCAG 2.1, ऐक्सेसबिलिटी से जुड़ी एक ज़रूरी शर्त को पूरा करता है: कम से कम कंट्रास्ट.

WCAG 2.1 में दो रंगों के बीच के संबंध को उनके कंट्रास्ट रेशियो से बताया जाता है. यह वह संख्या होती है जो दो रंगों की चमक की तुलना करने पर मिलती है. ल्यूमिनेंस से यह पता चलता है कि कोई रंग, काले (0%) या सफ़ेद (100%) रंग के कितना करीब है. WCAG, वेब को ऐक्सेस करने के लिए, कंट्रास्ट रेशियो के लिए कुछ नियम और कैलकुलेशन एल्गोरिदम तय करता है. हालांकि, इस हिसाब लगाने के तरीके में पहले से ही कुछ समस्याएं हैं. आने वाले समय में, हम और भी भरोसेमंद तरीका अपनाएंगे. हालांकि, फ़िलहाल, हमारे पास सबसे अच्छा तरीका WCAG है.

नियम क्या हैं?

AA एएए
मुख्य टेक्स्ट (< 24 पिक्सल) 4.5 7
बड़ा टेक्स्ट (> 24 पिक्सल) 3 4.5
यूज़र इंटरफ़ेस (यूआई) (आइकॉन, ग्राफ़ वगैरह) 3 तय नहीं किया गया

ज़्यादा कंट्रास्ट रेशियो को ज़्यादा नंबर से स्कोर किया जाता है. जैसे, 3 के बजाय 4.5 या 7. स्कोरिंग टेबल के बारे में ज़्यादा जानने के लिए, Polypane का कंट्रास्ट जांचने वाला टूल देखें.

टेक्स्ट को बैंगनी रंग के ऊपर दिखाया गया है: एक पेयरिंग में बैंगनी रंग के ऊपर काला टेक्स्ट है और दूसरी पेयरिंग में बैंगनी रंग के ऊपर सफ़ेद टेक्स्ट है.
इनमें से कौनसी रंग जोड़ियां आपके हिसाब से ज़्यादा कंट्रास्ट वाली हैं?

रंगों के बीच कंट्रास्ट की जांच करना

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

  1. Pika
    यह एक MacOS ऐप्लिकेशन है. यह पूरी स्क्रीन पर किसी भी रंग का कंट्रास्ट दिखाने में मदद करता है. साथ ही, ग्रेडिएंट पर रंग, पारदर्शी रंग वगैरह दिखाने में भी मदद करता है. इंटेंट साफ़ तौर पर बताया गया हो. साथ ही, उपयोगकर्ता तुलना करने के लिए मैन्युअल तौर पर पिक्सल चुनते हों. ज़्यादा सुविधाओं के साथ, थोड़ा कम ऑटोमेटेड.
  2. VisBug
    यह एक क्रॉस ब्राउज़र एक्सटेंशन है. यह एक साथ एक से ज़्यादा कंट्रास्ट ओवरले दिखा सकता है. हालांकि, DevTools की तरह ही, यह कभी-कभी इंटेंट का पता नहीं लगा पाता.
  3. Chrome DevTools
    DevTools, Chrome में पहले से मौजूद है. इसमें रंग से जुड़ी समस्याओं की जांच करने, उन्हें ठीक करने, और डीबग करने के कई तरीके मौजूद हैं. हालांकि, इसमें ग्रेडिएंट और सेमी-ट्रांसपेरेंट रंगों की जांच करने में समस्याएं आती हैं. साथ ही, कभी-कभी यह इंटेंट का पता नहीं लगा पाता.

Pika (macOS ऐप्लिकेशन)

अगर DevTools या VisBug, कंट्रास्ट का सही आकलन नहीं कर पाते, तो Pika आपकी मदद कर सकता है. ऐसा तब होता है, जब आपको ब्राउज़र के बाहर किसी रंग की जांच करनी हो या पारदर्शिता या ग्रेडिएंट का इस्तेमाल करना हो. Pika के पास स्क्रीन पर मौजूद हर पिक्सल का ऐक्सेस होता है, क्योंकि यह वेब टूल नहीं, बल्कि सिस्टम टूल है.

Pika डाउनलोड करना

इसका मतलब यह भी है कि Pika का इस्तेमाल करने का यूज़र एक्सपीरियंस, DevTools या VisBug से अलग है. DevTools और VisBug, ब्राउज़र के DOM से टेक्स्ट और बैकग्राउंड के रंग दिखाने की पूरी कोशिश करते हैं. वहीं, Pika जिन रंगों की तुलना करता है उन्हें स्क्रीन पर किसी भी जगह से मैन्युअल तरीके से चुना जाता है. इससे Pika को ज़्यादा कंट्रोल मिलता है. साथ ही, इसका इस्तेमाल करने के कुछ और उदाहरण भी मिलते हैं:

  • किसी भी दो रंगों की तुलना करना. भले ही, वे ब्राउज़र में हों या नहीं—अगर आपको वे रंग अपनी स्क्रीन पर दिखते हैं, तो उनकी तुलना की जा सकती है.
  • पारदर्शिता के साथ रंगों की तुलना करना.
  • ग्रेडिएंट में रंगों की तुलना करना.
  • सीएसएस में mix-blend-mode जैसे ब्लेंड मोड का इस्तेमाल करने वाले रंगों की तुलना करना.

किसी भी दो रंगों की तुलना करना

टेक्स्ट की तुलना बैकग्राउंड के रंग से करें:

दो स्लेटी रंगों की तुलना एक साथ की गई है. इनका कंट्रास्ट रेशियो 13.01 है और ये AA और AAA टारगेट को पूरा कर रहे हैं.

वेक्टर ग्राफ़िक्स के स्ट्रोक और भरने के रंगों की तुलना करना:

दो रंगों के आइकॉन की तुलना की गई है. इनका कंट्रास्ट रेशियो 1.63 है और ये WCAG के किसी भी टारगेट को पूरा नहीं करते.

पारदर्शिता के साथ रंगों की तुलना करना

टेक्स्ट के रंग की तुलना, बैकग्राउंड के अलग-अलग सैंपल पिक्सल से करें. यहां, फ़्रॉस्टेड ग्लास इफ़ेक्ट के सबसे हल्के स्लेटी रंग का इस्तेमाल, बैकग्राउंड के तुलना वाले रंग के तौर पर किया गया है.

दो रंग, धूसर जैसे दिखते हैं, लेकिन असल में वे बहुत हल्के बैंगनी रंग के हैं. इनकी तुलना, धुंधले और आधे पारदर्शी कैप्शन वाली इमेज से की गई है. इनका कंट्रास्ट रेशियो 4.65 है और ये एए टारगेट को पूरा कर रहे हैं.

ग्रेडिएंट की मदद से रंगों की तुलना करना

ग्रेडिएंट या इमेज पर मौजूद टेक्स्ट की तुलना करना. यहां "Lasso" के L की तुलना, इमेज के हल्के नीले रंग से की गई है:

किसी टीवी शो के स्क्रीनशॉट में, शो का टाइटल ऊपर है. इसमें L सफ़ेद रंग का है और उसके पीछे नीले रंग की तुलना की गई है. इनका कंट्रास्ट रेशियो 8 है और ये AA और AAA टारगेट को पूरा कर रहे हैं.

VisBug

VisBug, FireBug से प्रेरित एक टूल है. इसका इस्तेमाल डिज़ाइनर और डेवलपर, अपनी वेबसाइट के डिज़ाइन की जांच करने, उसे डीबग करने, और उसमें बदलाव करने के लिए करते हैं. इसका मकसद, डिज़ाइन टूल के यूज़र इंटरफ़ेस (यूआई) और यूज़र एक्सपीरियंस (यूएक्स) को एमुलेट करके, Chrome DevTools की तुलना में इसे आसान बनाना है. ये ऐसे टूल हैं जिन्हें लोग जानते हैं और जिनका इस्तेमाल करना उन्हें पसंद है.

VisBug आज़माएं या इसे Chrome, Firefox, Edge, Brave या Safari पर इंस्टॉल करें.

इसमें सुलभता की जांच करने वाला टूल भी शामिल है.

खाली पेज की बाईं ओर मौजूद VisBug टूलबार का स्क्रीनशॉट. इसमें सुलभता टूल का आइकॉन गुलाबी रंग में है. साथ ही, एक पॉपओवर दिखाया गया है, जिसमें टूल के बारे में निर्देश दिए गए हैं.

सभी ब्राउज़र और मोबाइल पर जांच करना

सुलभता की जांच करने वाले टूल पर क्लिक करने के बाद, उपयोगकर्ता जिस भी चीज़ पर कर्सर ले जाता है या कीबोर्ड से जिस पर नेविगेट करता है उसकी सुलभता की जानकारी टूलटिप में दिखेगी. इस टूलटिप में, फ़ोरग्राउंड और बैकग्राउंड के रंगों की तुलना की गई है.

टाइटल और आइकॉन वाले कॉम्पोनेंट के चारों ओर, गुलाबी रंग का बॉर्डर बॉक्स दिखाया गया है. VisBug के सुलभता टूलटिप में, टेक्स्ट के रंग और उसके बैकग्राउंड की तुलना करने वाली रिपोर्ट के साथ, गुलाबी बॉक्स पर कर्सर ले जाया गया है. अनुपात 13.86 है और यह AA और AAA, दोनों टारगेट को पूरा कर रहा है.

एक या उससे ज़्यादा की जांच करना

DevTools में, एक रंग के साथ किसी दूसरे रंग के इस्तेमाल की जानकारी देखी जा सकती है या पेज पर एक से ज़्यादा रंगों के साथ किसी दूसरे रंग के इस्तेमाल की जानकारी देखी जा सकती है. हालांकि, VisBug में एक से ज़्यादा रंगों के साथ किसी दूसरे रंग के इस्तेमाल की जानकारी देखी जा सकती है. किसी एलिमेंट पर क्लिक करें और टूलटिप वहीं रहेगा. Shift दबाकर रखें और दूसरे एलिमेंट पर क्लिक करना जारी रखें. ऐसा करने पर, सभी टूलटिप एक ही जगह पर बने रहेंगे:

किसी वेबपेज पर मौजूद लिंक की सूची, कई VisBug सुलभता ओवरले के साथ दिखाई जाती है. हर ओवरले, टेक्स्ट और बैकग्राउंड के रंग के कंट्रास्ट की जानकारी देता है और उस पर कर्सर ले जाने पर, उससे जुड़ी जानकारी दिखाता है.

यह खास तौर पर कॉम्पोनेंट पर आधारित डिज़ाइन के लिए ज़रूरी है. इसमें कॉम्पोनेंट के कई हिस्सों को कंट्रास्ट रेशियो के स्कोर को पास करना होता है. इस तरीके से, उन सभी कॉम्पोनेंट के हिस्सों को एक साथ देखा जा सकता है. डिज़ाइन की समीक्षाओं के लिए भी यह बहुत अच्छा है.

Chrome DevTools

अगर आपने Chrome इंस्टॉल किया हुआ है, तो आपके पास पहले से ही कंट्रास्ट की जांच करने वाले कई टूल मौजूद हैं:

Chrome DevTools का कलर पिकर

एलिमेंट पैनल के Chrome DevTools स्टाइल पैनल में, कलर वैल्यू के बगल में एक छोटा विज़ुअल स्क्वेयर कलर स्वैच होगा. इस स्वैच पर क्लिक करने पर, आपको कलर पिकर टूल दिखेगा. अगर हो सके, तो टूल के बीच में फ़ोरग्राउंड या बैकग्राउंड के मुकाबले रंग का कंट्रास्ट दिखेगा.

इस उदाहरण में, कस्टम प्रॉपर्टी के रंग की वैल्यू के लिए कलर पिकर खोला गया है. कंट्रास्ट रेशियो का स्कोर 15.79 है और इसमें दो हरे रंग के सही का निशान हैं. इससे पता चलता है कि यह स्कोर, WCAG 2.1 की AA और AAA ज़रूरी शर्तों को पूरा करता है:

DevTools के एलिमेंट पैनल का स्क्रीनशॉट, जिसमें स्टाइल में कलर पिकर दिखाया गया है और बीच में कलर के कंट्रास्ट रेशियो की जानकारी 4.98 के तौर पर दी गई है.

कलर पिकर में अपने-आप सुधार होने की सुविधा

रंग चुनते समय स्कोर देखना आसान है, लेकिन Chrome DevTools में ऑटो करेक्ट करने की एक और सुविधा है. जब कलर पिकर, ऐक्सेस किए जा सकने वाले कलर कंट्रास्ट स्कोर के लिए 'अस्वीकार' के तौर पर रिपोर्ट करता है, तो उसे बड़ा करके AA और AAA स्कोर के टारगेट के साथ-साथ आंख के आकार का टूल देखा जा सकता है. AA और AAA के बगल में स्वैच और रीफ़्रेश आइकॉन होते हैं. इन पर क्लिक करने पर, आपको पास का सबसे मिलता-जुलता रंग दिखेगा:

अगर आपको रंगों में कोई खास दिलचस्पी नहीं है, तो अपने-आप सुधार करने की सुविधा का इस्तेमाल करके, सुलभता से जुड़े दिशा-निर्देशों का पालन किया जा सकता है. साथ ही, इस सुविधा की मदद से, आसानी से काम किया जा सकता है.

जांच से जुड़ा टूलटिप

पेज पर कर्सर घुमाने के दौरान, एलिमेंट चुनने वाले टूल में एक खास सुविधा होती है. यह सामान्य फ़ॉन्ट, रंग, और सुलभता की जानकारी दिखाती है. एलिमेंट चुनने वाला टूल, यहां दिए गए स्क्रीनशॉट में बाईं ओर मौजूद आइकॉन है. यह बॉक्स, सबसे नीचे दाएं कोने में मौजूद होता है. इसमें ऐरो कर्सर होता है. इसे हॉटकी Control+Shift+C (या MacOS पर Command+Shift+C) का इस्तेमाल करके भी चुना जा सकता है.

DevTools में मौजूद बॉक्स और ऐरो आइकॉन का स्क्रीनशॉट, जो एलिमेंट चुनने वाले टूल को चालू करता है.

चालू होने के बाद, आइकॉन नीले रंग का हो जाएगा. साथ ही, पेज पर किसी भी चीज़ पर कर्सर ले जाने पर, आपको तुरंत जांच करने वाला यह टूलटिप दिखेगा:

VisBug से मिलते-जुलते ओवरले का स्क्रीनशॉट. इसमें स्टाइल की कुछ जानकारी और एक सुलभता सेक्शन दिखता है. इस सेक्शन में कंट्रास्ट स्कोर 15.79 दिखता है, जो एए टारगेट को पूरा करता है.

कलर पिकर टूल के बजाय, इस टूल का इस्तेमाल करके कंट्रास्ट स्कोर देखे जा सकते हैं. इसके लिए, आपको स्टाइल पैनल में कलर स्वैच ढूंढने की ज़रूरत नहीं होती. कलर पिकर की तरह, यह भी एक बार में सिर्फ़ एक कंट्रास्ट स्कोर दिखा सकता है.

बंप बंप 'til you pass 🎶

मैं अक्सर तुरंत जांच करने वाले इस टूल की मदद से, रंगों के पैटर्न की जांच करता/करती हूं. इससे मुझे पता चलता है कि रंगों का पैटर्न, ज़रूरी अनुपात से थोड़ा कम है. मैं कलर पिकर की अपने-आप ठीक होने की सुविधा का इस्तेमाल नहीं करता, क्योंकि मैं ज़्यादा ध्यान देता हूं. इसके बजाय, मैं सीएसएस में कलर चैनलों को तब तक नज़र रखता हूं, जब तक मुझे अपनी ज़रूरत के हिसाब से अनुपात नहीं मिल जाता. मैं इस प्रोसेस को "बंबल बंबल, जब तक पास न हो जाएं" कहती हूं, क्योंकि मैं कलर चैनल के नंबरों को तब तक बंबल कर रही हूं, जब तक वे WCAG 2.1 की शर्तों को पूरा नहीं कर लेते.

यह तरीका यहां बताया गया है. इसे ठीक इसी क्रम में अपनाएं:

  1. स्टाइल पैनल में, किसी रंग पर कीबोर्ड फ़ोकस सेट करें.
  2. कीबोर्ड शॉर्टकट Control+Shift+C (या MacOS पर Command+Shift+C) का इस्तेमाल करके, 'एलिमेंट की जांच करें' टूल को चालू करें.
  3. किसी टारगेट पर कर्सर ले जाएं.
  4. रंग की वैल्यू में मौजूद नंबर बदलने के लिए, कीबोर्ड पर अप/डाउन बटन दबाएं.

ऐसा इसलिए होता है, क्योंकि CSS स्टाइल वैल्यू पर अब भी आपका कीबोर्ड फ़ोकस होता है. हालांकि, माउस की मदद से किसी टारगेट पर कर्सर घुमाया जा सकता है. अपने टारगेट पर क्लिक न करें, वरना फ़ोकस, रंग की वैल्यू वाले एरिया से हट जाएगा. साथ ही, फिर से फ़ोकस करने तक, वैल्यू में बदलाव नहीं किया जा सकेगा.

सीएसएस की खास जानकारी

अब तक, Chrome DevTools में एक बार में एक रंग जोड़े को देखने के तरीके उपलब्ध थे. हालांकि, CSS की खास जानकारी आपके पूरे पेज को क्रॉल कर सकती है और ऐक्सेस न किए जा सकने वाले सभी रंग जोड़ों को एक साथ दिखा सकती है:

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

इस सुविधा के बारे में ज़्यादा जानने के लिए, सीएसएस की खास जानकारी: सीएसएस में किए जा सकने वाले सुधारों का पता लगाना पोस्ट पढ़ें या YouTube पर जेसलीन येन की DevTools के सुझावों वाली सीरीज़ देखें. इसमें, सीएसएस की खास जानकारी वाले पैनल की मदद से, सीएसएस में किए जा सकने वाले सुधारों का पता लगाने का तरीका बताया गया है.

लाइटहाउस

Lighthouse, Chrome DevTools में मौजूद ऑडिट करने वाला एक और टूल है. यह आपके पेज को क्रॉल कर सकता है और ऐक्सेस नहीं किए जा सकने वाले रंगों के जोड़े की रिपोर्ट कर सकता है. इसमें हर रंग के जोड़े के छोटे स्क्रीनशॉट होते हैं, ताकि आप उन्हें देख सकें और यह पता लगा सकें कि वे पास हैं या फ़ेल. किसी भी गलत कॉम्बिनेशन से, आपके Lighthouse स्कोर पर बुरा असर पड़ेगा.

ये नतीजे कुछ इस तरह दिख सकते हैं:

Lighthouse के आकलन का स्क्रीनशॉट, जिसमें दो शब्दों के कलर कॉम्बिनेशन के कम कंट्रास्ट वाले टेक्स्ट के नतीजे दिखाए गए हैं.

JS कंसोल

ऐसा हो सकता है कि अब तक बताए गए सभी टूल आपके लिए उपलब्ध न हों. हो सकता है कि आपका मौजूदा टाइमज़ोन (पूरा दिन) JavaScript हो. यहां एक एक्सपेरिमेंट दिया गया है, जिसे आज़माएं. कंसोल के 'समस्याएं' पैनल में, ऐक्सेस करने से जुड़ी समस्याओं के साथ-साथ कलर कंट्रास्ट से जुड़ी समस्याओं की भी रिपोर्ट लगातार मिलती रहती है. सेटिंग > एक्सपेरिमेंट में जाकर, इस सुविधा को चालू करें, जैसा कि यहां दिखाया गया है:

चालू किए गए चेकबॉक्स का स्क्रीनशॉट: &#39;समस्याओं वाले पैनल की मदद से, कंट्रास्ट से जुड़ी समस्या की अपने-आप रिपोर्ट होने की सुविधा चालू करें.&#39;

इसके बाद, 'समस्या' पैनल खोलें और देखें कि क्या कोई समस्या मिली है. अगर ऐसा होता है, तो वे इस तरह दिख सकते हैं:

Console में मौजूद समस्याओं के पैनल का स्क्रीनशॉट. इसमें कंट्रास्ट से जुड़ी छह गड़बड़ियों की जानकारी दी गई है.

कलरब्लाइंड मोड

रंगों के कंट्रास्ट और ऐक्सेस किए जा सकने वाले रंगों के पेयर के बारे में बात करते समय, वीज़न डिफ़िशिएंट इम्यूलेशन टूल के बारे में बताना ज़रूरी है. इससे आपके डिज़ाइन के रंग या रंगों के दिखने का तरीका बदल जाएगा. इससे, रंगों को ठीक से न देख पाने की अलग-अलग स्थितियों के नतीजे दिखाए जा सकेंगे. साथ ही, आपको अपने डिज़ाइन में बदलाव करने का मौका मिलेगा, ताकि यूज़र इंटरफ़ेस (यूएक्स) में रंग ही एकमात्र ऐसा तरीका न हो जिससे उपयोगकर्ताओं को जानकारी दी जा रही हो.

देखने की क्षमता में कमी को एम्युलेट करने के लिए, DevTools में मौजूद विकल्पों का स्क्रीनशॉट: कोई एम्युलेट नहीं, धुंधला दिखना, प्रोटैनोपिया, डीयूटीरानोपिया, ट्रिटैनोपिया, ऐक्रोमैटोप्सिया.

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

कलर कंट्रास्ट की सिस्टम की प्राथमिकता को एमुलेट करना

उपयोगकर्ता अपने ऑपरेटिंग सिस्टम में, कंट्रास्ट की सेटिंग को ज़्यादा से ज़्यादा बदल रहे हैं. इससे उन्हें अपने यूज़र इंटरफ़ेस (यूआई) में, कंट्रास्ट को कम या ज़्यादा करने का अनुरोध करने की सुविधा मिलती है. सीएसएस, इस सेटिंग का इस्तेमाल उसी तरह कर सकती है जिस तरह लाइट या डार्क थीम की प्राथमिकताओं का इस्तेमाल करती है. Chrome DevTools में, इस प्राथमिकता को एमुलेट करने की सुविधा मिलती है. इससे डिज़ाइन, सिस्टम से सेटिंग को टॉगल किए बिना, उपयोगकर्ता के अनुरोध की जांच कर सकते हैं और उससे अडजस्ट कर सकते हैं.

सीएसएस मीडिया क्वेरी prefers-contrast को एम्युलेट करने के लिए, एम्युलेटर DevTools में मौजूद विकल्पों का स्क्रीनशॉट: कोई एम्युलेटर नहीं, ज़्यादा, कम, कस्टम.

WCAG 3.0 APCA आज़माएं

एक्सपेरिमेंट के तौर पर, रंगों के जोड़े को एपीसीए के रंग के अनुपात के स्कोरिंग सिस्टम के साथ टेस्ट करें. इसे सेटिंग > एक्सपेरिमेंट से चालू किया जा सकता है. यह डब्ल्यूसीएजी 2.1 रेशियो सिस्टम को, कंट्रास्ट की जांच करने वाले नए और बेहतर एल्गोरिदम से बदल देता है. इससे आपको इसके नतीजों की झलक देखने की सुविधा मिलती है, क्योंकि यह प्रस्ताव किसी स्टैंडर्ड के मुताबिक काम करता है.

चालू किए गए चेकबॉक्स का स्क्रीनशॉट: &#39;पुराने कंट्रास्ट रेशियो और AA/AAA दिशा-निर्देशों की जगह, नया बेहतर परसेप्चुअल कंट्रास्ट एल्गोरिदम (APCA) चालू करें.&#39;

चालू करने के बाद, कलर मैच करने का स्कोर देखने के लिए, पॉइंट की जांच करने वाले टूलटिप या कलर पिकर का इस्तेमाल करें. साथ ही, देखें कि यह स्कोर ज़रूरी शर्तें पूरी करता है या नहीं:

Devtools के &#39;एलिमेंट की जांच करें&#39; टूलटिप में, dd एलिमेंट के कंट्रास्ट स्कोर के लिए -100.2% दिख रहा है.

नतीजा

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