अच्छा रंग पैलेट, रंग अंधा के लिए प्रयोग करने योग्य।


13

मैं अभी एक चार्ट डिजाइन कर रहा हूं, जिससे धीरे-धीरे इसमें और आइटम जुड़ जाएंगे। मैं आइटमों के लिए रंगों की एक सूची / क्रम बनाना चाहता हूं, जो कि रंग अंधा के लिए प्रत्येक आइटम के बीच अंतर करने के लिए सबसे अधिक उपयोगी होगा। किसी भी विचार कैसे / कहाँ शुरू करने के लिए?

जवाबों:


14

यदि आप "ट्रायल एंड एरर" अप्रोच के साथ जाना चाहते हैं, तो मैं कलर ऑरेकल (क्रॉस-प्लेटफॉर्म) नाम का एक उपकरण सुझाऊंगा, जो आपके कंप्यूटर स्क्रीन पर कलर ब्लाइंडनेस के ड्यूटेनोपिया / ड्यूटेरोनोमाइल, प्रोटानोपिया / प्रोटानोमाइल और ट्रिटानोपिया-टाइप्स का अनुकरण करता है।

(इसके अलावा फ़ोटोशॉप में कलर ब्लाइंडनेस प्रूफ सेटअप उपलब्ध है ViewProof Setup(CS5 में कम से कम)। लेकिन अगर आप चार्ट डिज़ाइन करने जा रहे हैं तो फ़ोटोशॉप थोड़ा ओवरकिल हो सकता है।)


1
फोटोशॉप प्रूफ के लिए +1 मैं दूसरे दिन कोशिश कर रहा था। इसका कमाल
जेम्सहेनारे

बिंदु यह है कि परीक्षण सही दृष्टिकोण है; एक "सुरक्षित" पैलेट चुनना अनावश्यक रूप से प्रतिबंधक होने जा रहा है।
चार्ल्स स्टीवर्ट

7

आप किस तरह के रंग अंधापन को दूर करने की कोशिश कर रहे हैं? यह लिंक

http://en.wikipedia.org/wiki/Color_blindness

रंग अंधापन के प्रकार के आधार पर बचने के लिए आपको विभिन्न रंगों का एक अच्छा विचार देना चाहिए।

सामान्य तौर पर, ब्लूज़ और ग्रीन्स के बीच चयन करने पर कुछ भी निर्भर करने से पासा हो सकता है; आप यह देखना चाहते हैं कि आपका सामान पूरी तरह से मोनोक्रोमैटिक कैसे दिखता है।

चूंकि "कलर ब्लाइंडनेस" की एक सीमा है, आप शायद यह भी सुनिश्चित करना चाहते हैं कि नियंत्रण आदि में अतिरेक हो (उदाहरण के लिए, बड़े लाल बटन को "सेल्फ-डिस्ट्रक्ट बटन" लेबल के साथ एक अच्छा विपरीत रंग में होना चाहिए) (लाल पर काला या लाल पर सफेद)।


अतिरेक के लिए अच्छा कॉल
जेम्सहेनारे

1
@ लॉरेन: ठीक है, जब आप अपनी बुरी खोह के लिए UI डिजाइन कर रहे हैं, तो आप बहुत सावधान नहीं हो सकते ...
Lawndartcatcher

हाँ, और सुनिश्चित करें कि आप अपनी भव्य योजनाओं का परीक्षण करने के लिए एक पांच वर्षीय व्यक्ति को किराए पर लें। :)
लॉरेन-क्लियर-मोनिका-इप्सम

5

कई तरह के कलर ब्लाइंडनेस होते हैं। कुंजी यह सुनिश्चित करने के लिए है कि पर्याप्त विपरीत हो। इससे भी बेहतर, अकेले रंग पर भरोसा न करें - सामान के आकार, विपरीत या क्रम में हमेशा एक ही जानकारी शामिल है। यदि आपकी छवि को काले और सफेद रंग में समझना आसान है, तो यह गुजरता है।


जबकि तकनीकी रूप से कई प्रकार के होते हैं, बड़े बहुमत में ड्यूटेनोपिया या माइल्डनोमाइलियम होता है। लगभग सभी बाकी में प्रोटानोपिया या प्रोटानोमाली है। उपरोक्त सभी लाल-हरे रंग के नुकसान हैं। शेष सभी प्रकार एक साथ (नीले-पीले या मोनोक्रोम) आबादी के 0.01% से कम हैं, जैसा कि मैं इसे समझता हूं। इसलिए, मैं मुख्य रूप से सामान्य दृष्टि और ड्यूटेरोनोपिया (एडोब सिमुलेशन का उपयोग करके) को लक्षित करता हूं और फिर प्रोटानोपिया सिमुलेशन का उपयोग करके थोड़ा मोड़ देता हूं।
जॉन कूम्ब्स

यदि आप लाल को पूरी तरह से एक अन्यथा अप्रयुक्त रंग (आमतौर पर मैजेंटा, या नारंगी) के साथ बदलते हैं, तो इससे मदद मिलती है। Android ने बहुत कुछ किया है। (या, आप हरे रंग की जगह ले सकते हैं।) रंगीन आइकनों को स्वैप करना आसान नहीं है, हालांकि, यदि आप अपने कुछ आइकन में लाल (या हरे) का उपयोग करते हैं। (हमारे लिए, हमारी विरासत आइकन सभी मोनोक्रोम नहीं हो सकते।) यदि आपके पास स्वैपेबल पैलेट्स की विलासिता है, तो आप अलग से ड्यूट के लिए अनुकूलित कर सकते हैं। और विरोध करें। और यहां तक ​​कि ट्रिटेनोपिया / ट्रिटानोमाइल के लिए एक तीसरा विकल्प जोड़ें। यदि आपके पास स्वैप करने योग्य है, तो उच्च-विपरीत मोड (डार्क बीजी पर प्रकाश पाठ) होने के कारण बहुत सारे विकल्प हैं लेकिन और भी अधिक उपयोगी है।
जॉन कॉम्ब्स

4

मैं कलर ब्लाइंड हूं। "हम" ऐसे ग्राफिक्स पसंद करते हैं जिनमें रंग का उपयोग सिर्फ "आप" के रूप में किया जाता है - यह सिर्फ आपकी तुलना में हमारी दुनिया में कम रंग हैं। यहाँ 80/20 नियम की भावना में एक व्यावहारिक सुझाव दिया गया है।

यदि आपके पहले प्रकार के रंगीन सेंसर (प्रोटो) काम नहीं करते हैं तो आपकी दृष्टि प्रोटो-एपिक है। अगर वे सिर्फ थोड़ा सा दुर्व्यवहार करते हैं तो आप प्रोटो-एनोमोलस हैं। अन्य दो प्रकार के रंग संवेदक के लिए दोहराएं और 'प्रोटो' के लिए 'deuter' या 'trito' स्थानापन्न करें। (मुझे लगता है कि ये 1,2,3 के लिए ग्रीक हैं)।

व्यावहारिक अवसर इस तथ्य से उत्पन्न होता है कि अन्य प्रकार की तुलना में ड्यूटेरोनोमल बहुत अधिक प्रचलित है; सभी पुरुषों का 5%। अन्य पुरुषों में 1% से कम और महिलाओं में भी कम स्कोर होता है। तो हमारे लिए एक सरल समाधान deuteranomalists एक लंबा रास्ता तय करता है - मैं व्यक्तिगत रूप से सिर्फ एक ग्राफ पर लाइनों में अंतर देखने में सक्षम होने के लिए खुद को रंगों को कॉन्फ़िगर करने की आवश्यकता नहीं है। (जो हर समय होता है)।

मैंने रंगों के एक छोटे सेट के नीचे शामिल किया है जो मैं सहजता से अंतर देख सकता हूं। मैंने और अधिक डालने की असफल कोशिश की है - ताकि आपको यह पता चल सके कि पैलेट को कितना छोटा होना चाहिए।

नायब। यह मत भूलो कि आपके द्वारा बनाए गए उपयोगकर्ता अनुभव में इन रंगों का उल्लेख करने से कोई फायदा नहीं है। हमारे लिए ड्यू - ऐसा लगता है जैसे "आप" ने बहुत अधिक समान रंगों के लिए एक महान कई अनावश्यक रूप से नकली नामों का आविष्कार किया है :-)

आरजीबी (255, 204, 153)

आरजीबी (204, 204, 255)

आरजीबी (255, 102, 102)

आरजीबी (139, 230, 2)

लाल

पीला

आरजीबी (51, 51, 255)

आरजीबी (153, 153, 153)

आरजीबी (153, 0, 0)

आरजीबी (51, 51, 51)

आरजीबी (0, 0, 102)

आरजीबी (120, 102, 75)


1
HTML टुकड़ा मैंने रंगों को दिखाने के लिए कॉपी किया है, ठीक से दिखाई नहीं दिया है - तो मुझे फिर से कोशिश करने दें:
पीट हावर्ड

यहाँ फिर जाना jsfiddle.net/kgasj68o
सांता

2

रंग अंधापन का सबसे आम प्रकार लाल-हरा रंग अंधापन है (जो लाल का पता लगाने या हरे रंग का पता लगाने में दोष हो सकता है, लेकिन शायद ही कभी दोनों)। इसलिए स्पेक्ट्रम के लाल-हरे हिस्से में अंतर पर निर्भर होने से बचें। (हल्के हरे और हल्के नारंगी ऐसे लोगों के लिए समान दिखाई देंगे, उदाहरण के लिए)

यदि आप विशेष रूप से सतर्क रहना चाहते हैं, तो आप अपने रंगों को एक नीले-पीले अक्ष (बहुत गहरे नीले; एक्वा; सफ़ेद; चार्टरेउसे, भूरा) पर रख सकते हैं। सभी लाल-हरे रंग की समस्याएं अभी भी व्यक्ति को यह बताने में सक्षम करती हैं कि नीला अलग है; पीले को हरे और लाल दोनों शंकुओं को सक्रिय करने का लाभ होता है, इसलिए यदि किसी एक के साथ समस्या है, तो यह अभी भी काफी दिखाई दे रहा है। वैकल्पिक रूप से, कोई भी खिंचाव जहां चमक बढ़ती है (जैसे लाल-> पीला-> सफेद) ज्यादातर लोगों को दिखाई देता है। हालांकि यह मत समझो कि लाल काले रंग से अलग है।


2

वहाँ फ़ायरफ़ॉक्स के लिए कुछ उपकरण हैं उदाहरण

Afaik, एक प्रमाण पत्र भी है जिसमें कुछ दिशानिर्देश हैं। मैंने अपने कागजात में देखा, लेकिन अब तक नहीं मिला है। Google निश्चित रूप से आपके देश के लिए उपलब्ध विभिन्न प्रमाणपत्रों के बारे में कुछ बताएगा।


2

मैं इसे फिर से जीवित कर रहा हूं क्योंकि ठोस उदाहरण या हाउ-टू का पता लगाना कठिन है।

आप इस लक्ष्य को पूरा करने में मदद करने के लिए सिमुलेटर का उपयोग कर सकते हैं, यह ध्यान में रखते हुए कि ड्यूटेरोपिया को लक्षित करना बहुमत को कवर करता है, और प्रोटानोपिया का समर्थन करने के साथ-साथ लगभग सभी को कवर करता है। (मेरा मानना ​​है कि शेष जनसंख्या का 0.01% से भी कम है।)

इलस्ट्रेटर जैसे एडोब उत्पादों में बहुत सहायक सिमुलेटर हैं (एक नई विंडो खोलें और देखें> प्रूफ सेटअप> कलर ब्लाइंडनेस ...) चुनें जो आपको अपने रंगों को ट्विक करने के साथ-साथ तुरंत लाइव-बाय-साइड रेंडर दिखा सकते हैं। और इसमें फ्री स्टैंडअलोन टूल भी हैं, जैसे कलर कंट्रास्ट एनालाइजर।

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

ध्यान दें कि इस मामले में बैंगनी केवल उपयोगी रूप से उपयोगी हो गया है (काफी फीका, और यहां तक ​​कि अभी भी नीले और / या मैजेंटा के साथ कम विपरीत है)। इसके अलावा, "सबसे सुरक्षित" विकल्प (फुल-ऑन मैजेंटा की जगह लाल) जोर से हो सकता है। सीवीडी वाले अधिकांश लोगों के लिए, लाल और हरे रंग की संतृप्ति / चमक को ट्विक करना पहचानने योग्य विपरीत प्रदान कर सकता है।

एक उम्मीद के साथ रंग-सुरक्षित पैलेट

(कृपया इस पैलेट / छवि को पूरी तरह से पुनः उपयोग करने से पहले मेरे साथ देखें।)

मैं एचएसएल रंग स्थान का उपयोग करने की अत्यधिक सलाह दूंगा। एचएसबी (उर्फ एचएसवी) बहुत अनुकूल है, खासकर आरजीबी या सीएमवाईके की तुलना में। (FYI करें, केवल H hue मान दो प्रणालियों में समान होंगे।) यहां, प्रत्येक कॉलम एक एकल संख्या का उपयोग करता है। आप हमेशा RGB कोड निकाल सकते हैं, या तो Adobe से या colorizer.org पर उत्कृष्ट टूल का उपयोग करके । हेक्स आरजीबी कोड, दुख की बात है, प्रोग्रामर आदि द्वारा सबसे संक्षिप्त और सीधे प्रयोग करने योग्य हैं, हालांकि यदि आप सीएसएस में काम कर रहे हैं, तो यह सीधे एचएसएल (याय) का समर्थन करता है।

यहां ब्लू की संतृप्ति जानबूझकर कम है (ए) इन अच्छी तरह से संतृप्त मैजेंटा और पर्स के साथ अधिक विपरीत करने के लिए एक जेंटलर लिंक / बटन रंग और (बी) हो। एक स्तंभ के भीतर, मुख्य भिन्नता चमक है, लेकिन आप कुछ संतृप्ति भिन्नता के साथ भी दूर हो सकते हैं।


1

यदि आप फ़ोटोशॉप में नहीं हैं या आप पुराने संस्करण में हैं, जिसमें ऊपर वर्णित रंग-अंधा सबूत दृश्य नहीं है, तो आप ग्रेस्केल में परिवर्तित करके अपने डिज़ाइन की चमक विपरीत की जांच कर सकते हैं। या, यदि यह PS का एक पुराना संस्करण है, तो आप या तो एक ह्यू और संतृप्ति परत का उपयोग कर सकते हैं संतृप्ति के साथ सभी तरह से नीचे की ओर मुड़ गए, या ढाल के रूप में काले से सफेद का उपयोग करते हुए एक ढाल नक्शा। अपने दस्तावेज़ में उस परत को शीर्ष परत के रूप में रखें, फिर जब भी आप इसके विपरीत की जांच करना चाहें, इसे चालू करें। मैं ग्रेडिएंट मैप पसंद करता हूं क्योंकि यह चमक के मामले में एक-दूसरे के विपरीत रंगों के संदर्भ में अधिक सटीक है (लाल शो थोड़ा हल्का होने की तुलना में यदि आप बस असंतृप्त हैं), लेकिन या तो आप डिजाइन में समस्या क्षेत्रों को दिखा सकते हैं। जब तक आपका पृष्ठ उस दृश्य में ठीक दिखता है, तब तक यह कलर-ब्लाइंड उपयोगकर्ता के लिए ठीक होना चाहिए।


0

यहाँ छवि विवरण दर्ज करें

चित्र 1: इशिहारा कलरब्लेन्डेडनेस टेस्ट

मैंने कुछ ही लंबाई में एक समान प्रश्न का उत्तर दिया:

रंग-अंधा उपयोगकर्ता को प्रदान करने के लिए रंग पट्टियों का एक अच्छा स्रोत क्या है?

मूल अपशॉट है: आपके उपयोगकर्ताबेस का विशिष्ट रंग-अंधा अनुभव (जैसा कि काफी भिन्नता है) जांच के लायक है; आपका पैलेट संभवतः कलरब्लाइंड आंखों के माध्यम से जो कुछ भी देख सकता है उससे विकसित होगा।

Pic संबंधित:

रंग-अंधा बनाम ट्राइक्रोमैटिक


लेकिन यह अजीब लगता है कि यह देखते हुए कि रंग-अंधापन के कुछ रूप कितने सामान्य हैं, ऐसी वेबसाइटें नहीं हैं जो सिर्फ सुविधाजनक पट्टियाँ सूचीबद्ध करती हैं। ऐसा लगता है कि हर बार पहिया को फिर से मजबूत करना।
dumbledad

0

मुझे पता है कि मैं पहले ही इस q का उत्तर दे चुका हूं - लेकिन मैंने अभी यह पाया:

http://disturbmedia.com/max/colour-blindness.html

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

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.