वेबसाइट डिजाइन करते समय, मुझे कैसे पता चलेगा कि उपयोगकर्ता कैसे रंग देखते हैं?


11

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

डिज़ाइन करते समय मुझे किस पर ध्यान देना चाहिए? क्या मैं डिजाइनिंग समाधान के साथ सभी स्क्रीन को काफी समान बनाने में सक्षम हूं?



1
और भ्रम को जोड़ने के लिए, लगभग 10% लोग colourblind हैं - लेकिन कम से कम इसके साथ क्रोम के लिए एक्सटेंशन कम से कम हैं जो आपको (यह मानते हुए कि आप नहीं हैं) मोटे तौर पर देखते हैं कि यह किसी ऐसे व्यक्ति को क्या दिखाई देगा जो है ...
रायकॉच

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

जवाबों:


23

संक्षिप्त उत्तर: आप नहीं।

दीर्घ उत्तर: सभी स्क्रीन सेटिंग्स और अंशांकन, परिस्थितियों और दृश्य (डिस) दर्शकों की क्षमताओं को ध्यान में रखना असंभव है। यही कारण है कि उदाहरण के लिए, पाठ के विपरीत दिशा-निर्देश हैं और यह पृष्ठभूमि है, कम से कम अधिकांश मामलों में कुछ प्रयोज्य की गारंटी देने के लिए।

मेरे व्यक्तिगत वर्कफ़्लो में कम से कम दो अनलिब्रेटेड मॉनिटर और विभिन्न प्रकाश उपकरणों में विभिन्न मोबाइल उपकरणों पर कुछ परीक्षण शामिल हैं।

W3C ने रंग के उपयोग और आवश्यक कंट्रास्ट के बारे में कुछ दिशानिर्देश बनाए हैं जिन्हें आप यहां पढ़ सकते हैं । व्यक्तिगत रूप से, मैं यह देखने के लिए कि क्या मेरे पाठ रंग दिशानिर्देशों का पालन करते हैं या कम से कम पास हैं, यह जांचने के लिए Lea Verou द्वारा पाठ के लिए इस कंट्रास्ट टूल का उपयोग करें


8
मुझे आश्चर्य है कि अगर एसई लोग उन दिशानिर्देशों को पढ़ते हैं। मेरे पास बहुत अच्छी दृष्टि है, लेकिन कई एसई साइटों (यह एक सहित) पर पृष्ठभूमि और लिंक हाइलाइट रंग के बीच विपरीत खराब है।
बारमर B

1
काश मैं इसे एक से अधिक बार उखाड़ सकता! मैं खुद एक डार्क रीडर ब्राउज़र एक्सटेंशन का उपयोग करता हूं, भले ही आपकी साइट कितनी भी सुंदर क्यों न हो, मैं पूरी तरह से तबाह हो जाऊंगा, जब मैं पचास वर्ष का हो चुका हूं, तब भी मेरी आंखों की रोशनी अच्छी है!
PieBie

इस वेबसाइट के अनुसार, webaim.org/resources/contrastchecker , पृष्ठभूमि और लिंक के बीच का रंग विपरीत इस SE साइट पर पहुंच मानकों को विफल करता है। तो शायद यह मान लेना सुरक्षित है कि एसई लोग ऐसे दिशानिर्देशों को नहीं पढ़ते हैं।
ईएसआर

2

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

sRGB वेब पर रंग प्रजनन के लिए दुनिया भर में मानक रंग स्थान है।

यह एक हद तक मदद करेगा, लेकिन अंततः उपयोगकर्ता की अपनी प्राथमिकताएं तय करेंगी कि उनके डिवाइस पर छवियां कैसे देखी जाती हैं। जाहिर है, यह रेखापुंज छवियों के लिए है, न कि एक पृष्ठ पर अन्य चित्रमय तत्व।


और अपने डिस्प्ले को sRGB में कैलिब्रेट करें, इसलिए कम से कम आपके डिस्प्ले दिखा रहे हैं कि यह क्या होना चाहिए
joojaa

टिप्पणियाँ विस्तारित चर्चा के लिए नहीं हैं; इस वार्तालाप को बातचीत में स्थानांतरित कर दिया गया है ।
विंसेंट

1

आज के आधुनिक ब्राउज़रों और कंप्यूटरों को शायद ही कभी सही रंग प्रदर्शित करने में समस्या होती है (देखें https://websafecolors.info/learn उस पर कुछ जानकारी के लिए)।

ऐसा लगता है कि यह स्वयं प्रदर्शित हो सकता है जो रंगों को अलग तरह से प्रदर्शित करता है। यह मॉनिटर ब्राइटनेस, कॉन्ट्रास्ट और ब्लू-लाइट-लेवल सेटिंग्स के कारण हो सकता है, और यहां तक ​​कि मॉनिटर की टेक्नोलॉजी जैसे एलईडी और पैनल टाइप के कारण भी। प्रदर्शनों में लगातार सेटिंग्स लागू करने, या यहां तक ​​कि उनकी सेटिंग्स को पढ़ने और वेबसाइट को समायोजित करने का कोई तरीका नहीं है।

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


0

जवाब नहीं है, क्योंकि लैपटॉप रंग और डेस्कटॉप रंग प्रत्येक कंप्यूटर के लिए समान नहीं है। आप रंग कोड का उपयोग कर सकते हैं यदि आप सुनिश्चित करना चाहते हैं कि रंग समान है, उदाहरण के लिए, आप इस कोड को css में टाइप कर सकते हैं:

background-color: #D2B48C

2
हाय सैली, मैंने आपके उत्तर में फ़ॉन्ट ठीक कर दिया है, लेकिन मुझे नहीं पता कि यह प्रश्न का उत्तर कैसे है। क्या आप विस्तृत कर सकते हैं?
PieBie

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