चार्ट को रंगांधता के लिए सुलभ कैसे बनाएँ

कोई चार्ट तकनीकी रूप से सही हो सकता है और फिर भी पाठकों के लिए समझ से बाहर रह सकता है। इसका आम कारण यह है कि सारा काम रंग से कराया जाता है: एक लाल रेखा का एक अर्थ, हरी रेखा का दूसरा, और लेजेंड ही एकमात्र कुंजी। रंग दृष्टि दोष वाले लोगों के लिए — और उन कई लोगों के लिए भी जो चमक में, खराब डिस्प्ले पर, या श्वेत-श्याम में चार्ट देखते हैं — इससे अनावश्यक कठिनाई पैदा होती है।

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

मूल नियम: रंग एकमात्र संकेत नहीं हो सकता

WCAG सफलता मानदंड 1.4.1 के अनुसार, जानकारी देने, कोई क्रिया दर्शाने, प्रतिक्रिया माँगने या किसी दृश्य तत्व को अलग करने के लिए रंग एकमात्र दृश्य साधन नहीं होना चाहिए। डेटा ग्राफ़िक्स में इसका अर्थ है कि पाठक बिना किसी रंग को पहचाने भी श्रेणियों, शृंखलाओं, स्थितियों या अर्थ में भेद कर सके।

अच्छे विकल्पों में शामिल हैं:

सीधे पाठ लेबल और मान
रेखाओं या बिंदुओं पर अलग-अलग मार्कर आकृतियाँ
ठोस, धराशायी और बिंदुदार रेखा शैलियाँ
बार और क्षेत्रों में पैटर्न, बनावट या रूपरेखा
स्पष्ट आइकन और वर्णनात्मक लेजेंड पाठ
वही आवश्यक जानकारी देने वाली डेटा तालिका या पाठ सारांश

सबसे अच्छा संयोजन चार्ट के प्रकार और इस बात पर निर्भर करता है कि पाठक को त्वरित अवलोकन चाहिए या सटीक मान।

चार्ट को प्रश्न के इर्द-गिर्द बनाएँ

रंग चुनने से पहले एक वाक्य लिखें जो चार्ट का मुख्य संदेश बताए। उदाहरण के लिए: «हर क्षेत्र में बिक्री बढ़ी, सबसे अधिक वृद्धि पश्चिम में रही।» फिर जाँचें कि यदि चार्ट धूसर पैमाने में देखा जाए तो क्या पाठक उस प्रश्न का उत्तर दे पाएगा।

यदि उत्तर नहीं है, तो कोई गैर-रंग संकेत जोड़ें। यह एक परीक्षण सबसे आम सुलभता गलती पकड़ लेता है: ऐसी पैलेट उपयोग करना जो देखने में सुंदर हो पर जानकारी केवल रंग से दर्शाती हो।

दूर की लेजेंड से पहले सीधे लेबल उपयोग करें

लेजेंड पाठक को छोटे रंग-नमूने को चार्ट तत्व से मिलाने पर मजबूर करती है, कभी-कभी बार-बार। जब रंग मिलते-जुलते हों या रेखाएँ आपस में कटती हों, तो यह और कठिन हो जाता है। जहाँ जगह हो, रेखा के अंत में शृंखला को लेबल करें, बार के पास मान रखें, या महत्वपूर्ण बिंदु पर सीधे टिप्पणी दें।

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

अनावश्यक-प्रतीत संकेतों को चार्ट प्रकार से मिलाएँ

रेखा चार्ट

रेखा शैली, मार्कर आकृति और अंतिम लेबल का संयोजन उपयोग करें। वृत्तों वाली ठोस रेखा, वर्गों वाली धराशायी रेखा और त्रिभुजों वाली बिंदुदार रेखा तब भी अलग पहचानी जा सकती हैं जब उनके रंग एक जैसे लगें।

एक ही चार्ट में बहुत अधिक शृंखलाएँ न रखें। जब बहुत हों, तो घनी लेजेंड सुलझाने की अपेक्षा करने के बजाय «small multiples» — समान पैमाने वाले अलग-अलग चार्ट — पर विचार करें।

बार चार्ट

सीधे श्रेणी लेबल और मान उपयोग करें। यदि बार ऐसी श्रेणियाँ दर्शाते हैं जिन्हें एक ही समूह में अलग पहचानना ज़रूरी है, तो रंग के अलावा पैटर्न या स्पष्ट रूपरेखा जोड़ें। W3C की G111 तकनीक विशेष रूप से बार के लिए रंग और पैटर्न साथ उपयोग करने का वर्णन करती है।

स्टैक्ड बार में, जहाँ संभव हो खंडों को सीधे लेबल करें और सहायक तालिका दें। पतले खंड सभी के लिए पढ़ने में कठिन होते हैं, अच्छी पैलेट के साथ भी।

स्कैटर प्लॉट और बबल चार्ट

मार्कर आकृतियों को रंग के साथ जोड़ें, और मार्कर के लोप न होने के लिए पर्याप्त आकार व कॉन्ट्रास्ट रखें। जहाँ भराव हल्का हो या पृष्ठभूमि व्यस्त हो, वहाँ बिंदुओं के चारों ओर बॉर्डर जोड़ें। यदि बिंदु ओवरलैप हों, तो फ़िल्टरिंग, डेटा तालिका, या समूह अलग करने वाला दूसरा दृश्य दें।

नक्शे और हीट मैप

भराव रंग के अलावा लेबल, सीमाएँ, प्रतीक या पैटर्न उपयोग करें। उदाहरण के लिए, कोई परिवहन नक्शा हर मार्ग के रंग के साथ एक विशिष्ट स्टॉप मार्कर जोड़ सकता है। कोरोप्लेथ नक्शे में सटीक संदेश को केवल हल्के-से-गहरे सूक्ष्म ग्रेडिएंट पर निर्भर न करें; दृश्य पैमाना, मान, और तालिका या पाठ में निष्कर्ष शामिल करें।

केवल भिन्न रंगों के लिए नहीं, कॉन्ट्रास्ट के लिए डिज़ाइन करें

रंग ह्यू में भिन्न हो सकते हैं पर चमक में समान, इसलिए वे धूसर पैमाने में या रंग दृष्टि भिन्नता के साथ मिल जाते हैं। पतली रेखाओं, छोटे मार्करों, चार्ट सीमाओं और पाठ के लिए कॉन्ट्रास्ट विशेष रूप से महत्वपूर्ण है।

चार्ट समझने के लिए आवश्यक गैर-पाठ ग्राफ़िक वस्तुओं हेतु, WCAG का गैर-पाठ कॉन्ट्रास्ट मार्गदर्शन आमतौर पर आस-पास के रंगों के मुकाबले 3:1 की सीमा उपयोग करता है। संदर्भ मायने रखता है, और कभी-कभी कोई लेबल या समकक्ष तालिका जानकारी दे सकती है बिना यह अपेक्षा किए कि पाठक केवल ग्राफ़िक से भेद करे। कॉन्ट्रास्ट जाँच को डिज़ाइन समीक्षा का एक हिस्सा मानें, लेबल और अतिरिक्त संकेतों का विकल्प नहीं।

इंटरफ़ेस पाठ और सरल दृश्य तत्वों के लिए अग्रभूमि/पृष्ठभूमि कॉन्ट्रास्ट जाँचने हेतु कॉन्ट्रास्ट जाँचक उपयोग करें। फिर पूरा चार्ट जाँचें: वास्तविक लेआउट में सटीक निकटता, पतले स्ट्रोक, हॉवर स्थितियाँ और ओवरले आते हैं, जिन्हें एक अकेली रंग-जोड़ी जाँच नहीं पकड़ सकती।

चित्र के पीछे का डेटा पाठकों को दें

चार्ट सारांश हैं, डेटा तक पहुँच का विकल्प नहीं। जब कोई चार्ट महत्वपूर्ण निर्णय या दावा रखता हो, तो इनमें से एक या अधिक शामिल करें:

श्रेणियों और मानों वाली पास की तालिका
मुख्य निष्कर्ष का संक्षिप्त लिखित सारांश
सुलभ डाउनलोड, जैसे CSV
जटिल दृश्य संबंधों के लिए विस्तृत विवरण
इंटरैक्टिव चार्ट के लिए कीबोर्ड-सुलभ टूलटिप या फ़ोकस योग्य डेटा दृश्य

इससे स्क्रीन-रीडर उपयोगकर्ताओं के साथ-साथ उन लोगों की सुविधा भी बढ़ती है जो हर दृश्य संकेत में भेद नहीं कर सकते। साथ ही पाठक बार की ऊँचाई या पाई के टुकड़ों का अनुमान लगाए बिना संदेश सत्यापित कर सकते हैं।

व्यावहारिक चार्ट समीक्षा चेकलिस्ट

रिपोर्ट, प्रस्तुति, उत्पाद डैशबोर्ड या लेख प्रकाशित करने से पहले इसका उपयोग करें:

क्या शीर्षक बताता है कि चार्ट किस बारे में है और किस अवधि का है?
क्या हर शृंखला या श्रेणी को केवल रंग के बिना पहचाना जा सकता है?
क्या आवश्यक मान लेबल किए गए, तालिका में उपलब्ध, या पास के पाठ में वर्णित हैं?
जहाँ रेखाएँ, मार्कर, बार और लेजेंड आइटम मिलते या ओवरलैप होते हैं, वहाँ क्या पर्याप्त कॉन्ट्रास्ट है?
क्या लेबल सामान्य ज़ूम पर और छोटी स्क्रीन पर पढ़े जा सकते हैं?
क्या चार्ट «अच्छा» और «बुरा» जैसे अस्पष्ट लाल/हरे स्थिति लेबल से बचता है, बिना पाठ या आइकन के?
क्या कीबोर्ड उपयोग करने वाला व्यक्ति इंटरैक्टिव चार्ट की जानकारी तक पहुँच सकता है?
क्या धूसर पैमाने या रंग दृष्टि सिमुलेशन की समीक्षा में कोई अस्पष्ट तत्व सामने आता है?

वास्तविक सामग्री और वास्तविक लोगों के साथ परीक्षण करें

स्वचालित जाँच और सिमुलेशन उपयोगी प्रारंभिक चेतावनी उपकरण हैं, पर ये प्रमाण नहीं कि चार्ट हर व्यक्ति के लिए काम करता है। तैयार चार्ट को उसके वास्तविक आकार में, उसी उत्पाद या दस्तावेज़ में जाँचें जहाँ वह दिखेगा। किसी प्रतिभागी से बिना संकेत दिए सबसे महत्वपूर्ण शृंखला, सबसे ऊँचा मान और मुख्य निष्कर्ष पहचानने को कहें।

हमारा रंग दृष्टि सिम्युलेटर डिज़ाइनरों को यह देखने में मदद कर सकता है कि कई सामान्य रंग दृष्टि भिन्नताओं में कोई छवि कैसी दिख सकती है। इसे एक अतिरिक्त समीक्षा चरण मानें, उपयोगकर्ता शोध या WCAG मूल्यांकन का विकल्प नहीं।

व्यापक इंटरफ़ेस मार्गदर्शन के लिए रंगांधता के लिए डिज़ाइन देखें।

उदाहरण: स्थिति चार्ट को बेहतर बनाना

कल्पना करें कि किसी डैशबोर्ड में पाँच विभाग हैं: हरे बार का अर्थ लक्ष्य पर, लाल बार का अर्थ लक्ष्य से पीछे, और पीले बार का अर्थ जोखिम में। अधिक सुलभ संस्करण यह कर सकता है:

हर बार पर स्थिति का शब्द जोड़ें: «लक्ष्य पर», «जोखिम में», या «पीछे»।
लेबल में आइकन उपयोग करें, जैसे चेक, चेतावनी त्रिभुज या तीर, साथ में उसे समझाने वाला पाठ।
दूसरे दृश्य संकेत के रूप में पैटर्न या रूपरेखा उपयोग करें।
वास्तविक प्रतिशत और लक्ष्य मान दिखाएँ।
चार्ट के नीचे विभाग, वर्तमान मान, लक्ष्य और स्थिति वाली तालिका दें।

रंग अब भी कई उपयोगकर्ताओं के लिए पैटर्न को तेज़ी से समझने में मदद करता है। बस वह समझने का एकमात्र रास्ता नहीं रह जाता।

निष्कर्ष

सुलभ चार्ट संदेश को टिकाऊ बनाते हैं। सीधे लेबल, पैटर्न, रेखा शैलियाँ, कॉन्ट्रास्ट और समकक्ष डेटा रंग दृष्टि दोष वाले लोगों को वही जानकारी समझने में मदद करते हैं जो बाकी सबको मिलती है — और आपके काम को पूरे दर्शक वर्ग के लिए अधिक स्पष्ट बनाते हैं।

संक्षिप्त उत्तर