लेख
किसी छवि से एक सुलभ रंग पैलेट निकालना
कोई तस्वीर या ब्रांड सामग्री अक्सर एक पूरे रंग-तंत्र का बीज समेटे होती है। उस बीज को निकालना, उसे एक उपयोगी पैलेट में ढालना, और फिर उसे सुलभता मानकों के विरुद्ध सत्यापित करना तीन अलग चरण माँगता है। यह लेख क्रम से हर चरण को देखता है: पैलेट निष्कर्षण भीतर कैसे काम करता है, व्यावहारिक उपयोग के लिए रंग कैसे चुनें और समायोजित करें, WCAG सीमाओं के विरुद्ध कंट्रास्ट कैसे जाँचें, और वर्णांध उपयोगकर्ताओं के लिए जो जोड़ियाँ मिल जाती हैं उन्हें कैसे पकड़ें।
पैलेट कैसे निकाला जाता है: पिक्सेल नमूनाकरण और रंग परिमाणीकरण
हर डिजिटल छवि पिक्सेल की एक ग्रिड है, हर पिक्सेल RGB जैसे किसी स्थान में एक रंग मान रखता है। एक पैलेट निष्कर्षक हर पिक्सेल को अलग-अलग नहीं देखता: एक 2-मेगापिक्सेल तस्वीर में 2 लाख से अधिक डेटा बिंदु होते हैं, जिन्हें संसाधित करना धीमा होगा और जो एक उपयोगी समूह के बजाय हज़ारों थोड़े-थोड़े भिन्न रंग लौटाएँगे। इसके बजाय, टूल पिक्सेल ग्रिड का एक नियमित अंतराल पर नमूना लेता है, एक प्रतिनिधि उपसमुच्चय जुटाता है। फिर वह उपसमुच्चय एक रंग परिमाणीकरण (quantization) एल्गोरिद्म में डाला जाता है। सबसे आम तरीक़ा समान रंगों को एक क्लस्टरिंग विधि से समूहित करता है, जिसे कभी median-cut या k-means शैली का विभाजन कहा जाता है। एल्गोरिद्म हर नमूना पिक्सेल को रंग-समानता के आधार पर एक निश्चित संख्या की बाल्टियों में से एक में रखता है, फिर हर बाल्टी का औसत रंग निकालता है। परिणाम एक छोटी सूची है, आमतौर पर 4 से 16 रंग, जो मिलकर छवि के प्रमुख दृश्य रंगों के लिए ज़िम्मेदार होते हैं। केवल छोटे अलग-थलग क्षेत्रों में दिखने वाले रंग छूट सकते हैं, जो अपेक्षित व्यवहार है, कोई दोष नहीं।
कच्चे प्रमुख रंगों से एक उपयोगी पैलेट तक
एक पैलेट निष्कर्षक का कच्चा आउटपुट आवृत्ति के क्रम में रंगों की एक सूची है, पर केवल आवृत्ति एक पैलेट नहीं बनाती। एक जंगल की तस्वीर कई हरे रंग लौटाएगी जो UI में अलग एक्सेंट के रूप में उपयोग करने के लिए बहुत समान हैं। व्यावहारिक काम चुनना और समायोजित करना है। एक रंग को अपना प्रमुख रंग पहचानकर शुरू करें: वह जो सबसे विशिष्ट और सबसे कम तटस्थ हो। बचे रंगों में से, अधिकतम दो ढूँढें जो प्रमुख रंग के और आपस में कंट्रास्ट करें। वे आपके एक्सेंट बनते हैं। बाक़ी सब, जिसमें छाया और मध्य-स्वर से निष्कर्षक अक्सर लौटाता है वे विसंतृप्त स्वर शामिल हैं, पृष्ठभूमि और किनारों के लिए तटस्थ रंगों का काम कर सकते हैं। यह मोटा ढाँचा मिलने पर, आपको लगभग निश्चित रूप से अलग-अलग मानों को समायोजित करना होगा। color-converter टूल आपको हर रंग hex, RGB और HSL में देखने देता है। HSL यहाँ ख़ास तौर पर उपयोगी है: आप hue को स्थिर रखकर lightness या saturation को सरका सकते हैं ताकि उसी रंग-परिवार को छोड़े बिना एक कसा या ढीला परिवार बने।
कंट्रास्ट जाँचना: पठनीय टेक्स्ट के लिए WCAG सीमाएँ
एक बार आपके पास टेक्स्ट और पृष्ठभूमि के लिए संभावित रंग हों, आपको जाँचना होगा कि संयोजन पठनीय है या नहीं। Web Content Accessibility Guidelines (WCAG) इस उद्देश्य के लिए एक कंट्रास्ट अनुपात परिभाषित करते हैं। यह अनुपात दो रंगों की सापेक्ष चमक (relative luminance) की तुलना करता है: 1:1 का मान बिल्कुल कोई कंट्रास्ट नहीं (एक ही रंग पर एक ही रंग) दर्शाता है, और 21:1 अधिकतम है (सफ़ेद पर काला)। WCAG 2.1 Level AA सामान्य आकार के मुख्य टेक्स्ट के लिए कम से कम 4.5:1 का अनुपात माँगता है, और बड़े टेक्स्ट (18pt या 14pt बोल्ड) के लिए 3:1। Level AAA क्रमशः 7:1 और 4.5:1 की ऊँची सीमाएँ रखता है। आपको चमक हाथ से गणना करने की ज़रूरत नहीं। मुख्य बात यह है कि एक रंग जोड़ी जो अच्छी रोशनी में आपको ठीक लगती है, स्क्रीन पर 4.5:1 से नीचे गिर सकती है, और दिशानिर्देश ठीक उसी स्थिति के लिए मौजूद है। रंग निकालने और समायोजित करने के बाद, हर टेक्स्ट-पर-पृष्ठभूमि जोड़ी जाँचें जिसका आप उपयोग करने वाले हैं। एक मध्य-स्वर धूसर जो सफ़ेद पर अच्छा पढ़ा जाता है, आपके निकाले गए पैलेट के किसी हल्के बेज पृष्ठभूमि पर पूरी तरह विफल हो सकता है।
वर्णांधता: प्रभावित उपयोगकर्ताओं को जोड़ियाँ कैसी दिखती हैं इसका अनुकरण
लगभग 12 में 1 पुरुष और 200 में 1 महिला में किसी न किसी रूप की रंग-दृष्टि की कमी होती है। सबसे आम प्रकार deuteranopia है (हरे के प्रति घटी संवेदनशीलता), उसके बाद protanopia (लाल के प्रति घटी संवेदनशीलता)। Tritanopia (नीले-पीले के प्रति घटी संवेदनशीलता) दुर्लभ है। हर प्रकार के लिए, दृष्टि-तंत्र कुछ निश्चित तरंगदैर्ध्य को उसी अनुभूत रंग पर मैप करता है जिसे अप्रभावित दर्शक अलग देखते हैं। एक पैलेट के लिए व्यावहारिक समस्या यह है कि सामान्य दृष्टि में स्पष्ट रूप से अलग दिखने वाले दो रंग वर्णांध उपयोगकर्ता के लिए एक ही स्वर में मिल सकते हैं, जिससे वे भेद बताने के लिए बेकार हो जाते हैं, उदाहरण के लिए सफलता और त्रुटि दर्शाने के लिए केवल लाल और हरे का उपयोग। एक वर्णांधता अनुकरण चलाना आपको दिखाता है कि प्रभावित चैनल दबाए जाने पर पैलेट कैसा दिखता है। जो जोड़ियाँ एक लगभग-समान धूसर या भूरे में मिल जाती हैं, वही दोबारा सोचने वाली हैं: या तो उनके बीच lightness का अंतर बढ़ाएँ ताकि स्वर-भेद के बिना भी कंट्रास्ट बना रहे, या एक द्वितीयक संकेत (आकार, लेबल, पैटर्न) जोड़ें ताकि रंग एकमात्र संकेत न हो।
स्थानीय रूप से करना: color-palette, color-blindness और color-converter
इस लेख में वर्णित तीनों चरण आपकी छवि या ब्रांड रंगों को किसी भी सर्वर पर भेजे बिना पूरे किए जा सकते हैं। color-palette टूल पूरी तरह ब्राउज़र में चलता है: आप एक छवि छोड़ते हैं, यह पिक्सेल का स्थानीय रूप से नमूना लेता है और प्रमुख रंग hex मानों के रूप में लौटाता है। कोई फ़ाइल नहीं भेजी जाती। color-converter टूल एक hex कोड लेता है और वही रंग RGB और HSL में दिखाता है ताकि आप उसी hue परिवार में रहते हुए lightness या saturation में लक्षित समायोजन कर सकें। hex और रूपांतरित मान दोनों केवल पृष्ठ में मौजूद रहते हैं। color-blindness टूल उलटे तरीके से काम करता है: आप एक इमेज छोड़ते हैं और यह उस इमेज के deuteranopia, protanopia और tritanopia अनुकरण दिखाता है, जो ब्राउज़र में गणना किए जाते हैं। किसी फोटो के बजाय किसी पैलेट को जाँचने के लिए, पहले अपने swatches को इमेज के रूप में एक्सपोर्ट या स्क्रीनशॉट करें, फिर उसे simulator में छोड़ें। तीनों टूल को क्रम से उपयोग करना, छवि से निकालें, color-converter में समायोजित करें, फिर एक swatch इमेज एक्सपोर्ट करके color-blindness में सत्यापित करें, ऊपर वर्णित पूरी प्रक्रिया को समेटता है। आपकी छवि पूरे समय आपके डिवाइस पर रहती है, जो मायने रखता है यदि स्रोत तस्वीर में अप्रकाशित ब्रांडिंग या किसी ग्राहक की अजारी पहचान हो।
इस लेख में उल्लेखित टूल्स
- रंग पैलेट एक्सट्रैक्टरछवि से HEX स्वॉच के रूप में प्रमुख रंग निकालें। कोई भी रंग कॉपी करें। कोई अपलोड नहीं।
- रंग अंधापन सिमुलेटरछवि पर प्रोटानोपिया, ड्यूटेरेनोपिया, ट्रिटानोपिया और एक्रोमेटोप्सिया का अनुकरण करें। कोई अपलोड नहीं।
- कलर कन्वर्टररंगों को HEX, RGB, HSL, HSV और CMYK के बीच बदलें। WCAG कंट्रास्ट चेकर शामिल। कोई अपलोड नहीं।
- कलर स्कीम जनरेटरबेस रंग से पूरक, समानुरूप, त्रिभुजीय, चतुर्भुजीय और मोनोक्रोमेटिक पैलेट बनाएं। कोई अपलोड नहीं।
अक्सर पूछे जाने वाले सवाल
एक पैलेट निष्कर्षक आमतौर पर कितने रंग लौटाता है?
अधिकांश टूल डिफ़ॉल्ट रूप से 5 से 16 रंग लौटाते हैं, हालाँकि कई आपको संख्या तय करने देते हैं। कम रंग लौटाने का अर्थ है एल्गोरिद्म को अधिक पिक्सेल एक साथ समूहित करने होंगे, जो अलग पर समान स्वरों को मिला सकता है। अधिक रंग लौटाने से लगभग-दोहरे रंग बन सकते हैं जिन्हें अलग-अलग उपयोग करना कठिन है। एक UI पैलेट के लिए, 6 से 8 रंग आमतौर पर एक व्यावहारिक शुरुआती बिंदु है।
क्या किसी छवि से निकाला पैलेट अपने आप WCAG कंट्रास्ट पास कर सकता है?
अपने आप नहीं। किसी तस्वीर में प्रमुख रंग अक्सर मध्यम चमक वाले मध्य-स्वर होते हैं, जो आपस में 2:1 से 3:1 की सीमा में अनुपात देते हैं। मुख्य टेक्स्ट के लिए 4.5:1 की सीमा तक पहुँचने के लिए आमतौर पर पृष्ठभूमि मानों को हल्का करना या टेक्स्ट मानों को गहरा करना पड़ता है, उससे अधिक जो कच्चा निष्कर्षण देता है। निष्कर्षण आपको एक शुरुआती बिंदु देता है; कंट्रास्ट जाँच बताती है कि कितना समायोजन ज़रूरी है।
क्या WCAG कंट्रास्ट अनुपात वर्णांधता का ध्यान रखता है?
आंशिक रूप से। WCAG चमक सूत्र सापेक्ष चमक पर आधारित है, hue पर नहीं, इसलिए 4.5:1 पूरा करने वाली एक उच्च-कंट्रास्ट जोड़ी आमतौर पर वर्णांध उपयोगकर्ताओं के लिए भी अलग पहचानी जा सकती है क्योंकि lightness का अंतर बना रहता है। फिर भी, समान चमक पर भिन्न hue वाले दो रंग, जैसे एक ही चमक पर लाल और हरा, चमक-आधारित कंट्रास्ट जाँच पास कर सकते हैं और तब भी deuteranope के लिए अप्रभेद्य रह सकते हैं। एक वर्णांधता अनुकरण चलाना कंट्रास्ट अनुपात से अलग hue-स्तरीय भेद जाँचने का सही तरीका है।