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

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

Adam Argyle

Charlie Gleason

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

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

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

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 सिर्फ़ 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 इंस्टॉल किया हुआ है, तो आपके पास पहले से ही कंट्रास्ट की जांच करने वाले कई टूल मौजूद हैं:

• कलर पिकर
• जांच का टूलटिप
• सीएसएस के बारे में खास जानकारी
• Lighthouse
• 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 के यूज़र एक्सपीरियंस से प्रेरित है.

बंप बंप '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 स्कोर पर बुरा असर पड़ेगा.

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

JS कंसोल

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

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

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

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

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

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

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

WCAG 3.0 APCA आज़माएं

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

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

नतीजा

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