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

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

Adam Argyle

Charlie Gleason

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

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

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

डब्लूसीएजी और कलर कंट्रास्ट

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

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

Pica डाउनलोड करें

ध्यान दें: Pika सिर्फ़ macOS के लिए उपलब्ध है. पीसी के लिए, PowerToys में कलर पिकर की सुविधा शामिल है

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

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

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

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

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

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

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

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

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

VisBug

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

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

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

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

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

ध्यान दें: VisBug का कलर कंट्रास्ट यूज़र इंटरफ़ेस (यूआई), Pika के शानदार डिज़ाइन से काफ़ी प्रेरित है.

एक या एक से ज़्यादा

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

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

Chrome DevTools

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

• कलर पिकर
• जांच का टूलटिप
• सीएसएस के बारे में खास जानकारी
• लाइटहाउस
• JS कंसोल
• रंगों को ठीक से न देख पाने वाले लोगों के लिए इम्यूलेशन टूल
• सिस्टम के कलर कंट्रास्ट की प्राथमिकता को एमुलेट करना
• WCAG 3.0 APCA प्रयोग

Chrome DevTools का कलर पिकर

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

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

कलर पिकर में ऑटो करेक्ट की सुविधा

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

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

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

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

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

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

ध्यान दें: यह टूल और इंटरैक्शन पैटर्न, VisBug के यूज़र एक्सपीरियंस से प्रेरित है.

जब तक तुम न गुज़र जाए, तब तक बंप बंप 🎶

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

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

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

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

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

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

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

लाइटहाउस

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

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

JS कंसोल

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

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

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

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

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

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

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

डब्लूसीएजी 3.0 एपीसीए आज़माएं

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

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

नतीजा

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