24

मैं एक मौजूदा वेब साइट को बेहतर बनाने की कोशिश कर रहा हूं, और यही मैं शुरू कर रहा हूं:

<body style='
        background-color: rgb(50,101,152);
        color: red;
        text-decoration-color: red;
        text-decoration-style: solid;
        font-size: 12px;
        font-weight: 700;
        font-family: "Bitstream Vera Sans", Verdana, Lucida, Arial, Helvetica, sans-serif;
        //text-shadow: 0px 0px 15px white;
    '>
    This is hard to read!
</body>

मुझे लगता है कि इस रंग संयोजन को पढ़ना मुश्किल है। अन्य लोग असहमत हैं, लेकिन हम सहमत हुए हैं कि यह कंट्रास्ट, ब्राइटनेस और अन्य डिस्प्ले प्रॉपर्टीज (यहां तक कि व्यूइंग एंगल) पर भी बहुत कुछ निर्भर करता है:

मैंने पहले से ही काफी प्रयोग किया है -webkit-text-stroke, text-shadow(ऊपर कोड देखें), लेकिन जैसा कि मैं एक डिस्प्ले पर चीजों को बेहतर बनाता हूं, यह दूसरे पर खराब हो जाता है।

समग्र रंग योजना को बनाए रखते हुए मैं इसे विभिन्न प्रकार के डिस्प्ले पर और अधिक पठनीय बनाने की कोशिश कर सकता हूं।

color website-design color-theory

— bers
स्रोत

22

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

— मई से

15

मेरे पास एक डिजाइनर के रूप में 30 से अधिक वर्षों का अनुभव है ... मैं संभवतः @mayersdesign के ऊपर की टिप्पणी से अधिक सहमत नहीं हो सकता। उस रंग योजना को तुरंत अस्वीकार कर दिया जाना चाहिए।

— स्कॉट

6

सबसे पहले, आपको अपनी रंग योजना के उद्देश्य को समझना चाहिए। UI के लिए एक रंग योजना में, यह प्राथमिक रंगों के रूप में तटस्थ रंगों का उपयोग करने के लिए समझ में आता है, किसी भी उच्चारण रंगों को संयम से फेंक दिया जाना चाहिए । उदाहरण के लिए YouTube के बारे में सोचें, कौन सा रंग दिमाग में आता है? लाल और काले, लेकिन वास्तविक YouTube वेबपृष्ठ, इसके 98% सफेद और हल्के भूरे रंग पर एक नज़र डालें। लाल का उपयोग केवल एक उच्चारण के रूप में किया जाता है।

— हैप्पी आवर कोडिंग 16

सभी को धन्यवाद (उत्तरदाताओं सहित)! मैंने आज सुबह से एसई को डबल-चेक किया, जो मैंने आज सुबह से 1 या 2 टिप्पणी की उम्मीद की थी, और अब यह। मैंने बहुत कुछ सीखा और कुछ ठोस तर्क दिए - धन्यवाद!

— 22

1

1995 को बुलाया गया। वे अपनी रंग योजना वापस चाहते हैं।

— माज़ुरा

54

ग्राहक के मन को बदलें।

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

इस वेबसाइट webaim.org से पता चलता है कि आपके दो रंगों के बीच का अंतर 1.52: 1 है

कंट्रास्ट लेगबिलिटी के लिए महत्वपूर्ण है

टेक्स्ट कंट्रास्ट, पाठ की सुगमता के अधिक महत्वपूर्ण पहलुओं में से एक है। सौभाग्य से हमारे लिए वेब कंटेंट एक्सेसिबिलिटी गाइडलाइंस (WCAG) 2.0 विशेष रूप से टेक्स्ट कॉन्ट्रास्ट को संबोधित करता है, और दिशानिर्देश प्रदान करता है, हालांकि विकलांग लोगों के लिए वेब एक्सेसिबिलिटी प्रदान करने के उद्देश्य से, सामान्य रूप से ध्वनि सलाह भी प्रदान करता है।

WCAG स्तर AA के लिए सामान्य पाठ के लिए कम से कम 4.5: 1 के विपरीत अनुपात की आवश्यकता होती है और बड़े पाठ के लिए 3: 1 और स्तर AAA के लिए सामान्य पाठ के लिए कम से कम 7: 1 के विपरीत अनुपात और बड़े पाठ के लिए 4.5: 1 की आवश्यकता होती है।

तो आपके ग्राहकों की वेबसाइट प्रकाशित पेशेवर दिशानिर्देशों के सीधे विरोधाभास में है । यह सौंदर्य के स्वाद के विरोधाभास में भी है (मेरी पेशेवर राय में)

यदि आवश्यक हो तो आप अभी भी एक डिजाइन में लाल और नीले रंग के तत्वों का उपयोग कर सकते हैं। लेकिन नीली पृष्ठभूमि पर "सामग्री-आकार" लाल पाठ बिछाने से आपकी साइट पर आने वाले आगंतुकों का एक बड़ा प्रतिशत दूर हो जाएगा। मेरी राय में आपके पास अपने ग्राहक को इसे इस्तेमाल न करने के लिए राजी करने की एक पेशेवर जिम्मेदारी है।

उम्मीद है कि प्रदान किए गए लिंक आपके मामले को और अधिक मजबूत तरीके से बनाने में मदद कर सकते हैं बस यह बहस करने से कि आपको पढ़ना मुश्किल लगता है। यह वास्तव में है provably पढ़ने में कठिन।

Chromostereopsis

यदि वह प्रेरक पर्याप्त नहीं था, तो यह कोशिश करें - Chromostereopsis (संक्षेप में!) एक ऑप्टिकल भ्रम है जो दर्शकों के लिए गहराई से क्षेत्र की समस्याओं का कारण बनता है। यह अप्रिय है!

— mayersdesign
स्रोत

11

स्पष्ट करने के लिए, W3C दस्तावेज़ में कंट्रास्ट अनुपात न्यूनतम हैं । मत कहो कि अनुपात 4.5: 1 या 7: 1 के बीच होना चाहिए; वे कहते हैं कि यह कम से कम एक होना चाहिए , यह इस बात पर निर्भर करता है कि आप लक्ष्यीकरण की किस स्तर तक पहुँच प्राप्त कर रहे हैं।

— एड्रियन मैक्कार्थी

1

बहुत अच्छी बात, मैंने अधिक विवरणों को शामिल करने के लिए उत्तर को अपडेट किया है, खासकर यह एक।

— मेवेदेसिग्न

8

हालांकि किसी भी तरह से परिपूर्ण (या यहां तक कि) अच्छा नहीं है, पाठ में एक सफेद (या अन्य) रूपरेखा जोड़ने से पठनीयता में मदद मिल सकती है:

यह उपयोगी हो सकता है यदि आपके ग्राहक रंगों को रखने पर जोर देते हैं।

— दुष्टात्मा
स्रोत

निष्पक्ष होना, कि केवल 36pt प्रकार के साथ काम करता है।

— user8356

हाँ, महान अवधारणा। व्यंग्य के रूप में नहीं। और जितना अधिक आप इसे लागू करेंगे, हम पाठ को बेहतर पढ़ सकते हैं। तो स्क्रीन के किनारे पर सभी तरह से सफेद रूपरेखा लें ... पलक, झपकी।

— मार्टिन ज़स्के

8

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

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

— user8356
स्रोत

7

जैसा कि बताया गया है, यह भयानक रंग विपरीत है। यह कलरब्लाइंड लोगों के लिए भी एक बुरा पैलेट है (लाल-नीले रंगब्लिंडनेस के साथ, इसके विपरीत अनुपात 1: 1 के करीब कुछ लानत पर गिरता है, जो पूरी तरह से अपठनीय है)।

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

यदि वह विकल्प नहीं है, तो अन्य चीजें जिन्हें आप पठनीयता में सुधार करने का प्रयास कर सकते हैं, उनमें शामिल हैं (ध्यान दें कि इनमें से कोई भी कलरब्लिंडनेस समस्या को हल नहीं करता है, वे केवल इसके विपरीत या सामान्य पठनीयता के साथ मदद करते हैं:

मोनो-स्पॉन्टेड फ़ॉन्ट का उपयोग करें। बेवकूफ लगता है, लेकिन यह वास्तव में ज्यादातर लोगों को पाठ पढ़ने में मदद करता है। जाहिर तौर पर कूरियर न्यू नहीं, बल्कि बिटस्ट्रीम वेरा सैंस मोनो, (या ड्रॉयड सेन्स मोनो जैसी कुछ) अभी भी सभ्य दिखनी चाहिए, और कुछ अधिक पठनीय होगी।
फ़ॉन्ट का वजन बनाएं, और शायद आकार भी थोड़ा सा। बड़ा, bolder पाठ पढ़ने में आसान है, इसके विपरीत स्वतंत्र है।
रंग योजना को स्वैप करें (अर्थात, इसे चमकदार लाल पृष्ठभूमि पर गहरे नीले रंग का टेक्स्ट बनाएं)। यह सरल लगता है, लेकिन आम तौर पर ज्यादातर लोगों के लिए यह आसान है कि वे चारों ओर से दूसरे रास्ते की तुलना में गहरे लाल रंग में तैयार हों।
ऑफसेट के साथ पाठ में एक उच्च-विपरीत संकीर्ण ड्रॉप छाया जोड़ें । आप यहाँ क्या चाहते हैं, पृष्ठभूमि में मिश्रण नहीं है, यह एक अच्छा किनारा है जो अच्छा कंट्रास्ट प्रदान करता है। छाया को परेशान करना इसके साथ भी मदद कर सकता है, विशेष रूप से एक साधारण विकर्ण ऑफसेट। मैं सफेद के बजाय यहां काले रंग के साथ जाऊंगा (आप पाठ को उच्चारण करना चाहते हैं, पृष्ठभूमि नहीं, इसलिए पाठ के खिलाफ उच्च विपरीत के लिए जाएं)। कुल मिलाकर, कुछ की तर्ज पर text-shadow: 2px 2px 4px black;शायद एक अच्छी शुरुआत है।
लाल को काफी हल्का करें। अभी, आप उपयोग कर रहे हैं rgb(255,0,0)। मैं पहले rgb(255,204,204)(या संभवतः भी हल्का) की तरह कुछ के साथ कोशिश करूँगा , और वहाँ से समायोजित करूँगा ।
गहरे नीले रंग। rgb(25,51,77)उसी रंग के बारे में कुछ के करीब है, लेकिन पाठ को अधिक पठनीय बनाने के लिए पर्याप्त अंधेरा होना चाहिए।

एक और विकल्प जो कलरब्लिंडनेस समस्या के साथ कुछ मदद करता है:

नीली पृष्ठभूमि का वर्णन करें। सबसे अच्छा विकल्प नहीं है (यह कुछ हद तक रंग योजना को तिरछा करता है), इससे पठनीयता को उन सभी चीजों में से सबसे अधिक मदद करनी चाहिए, जिन्हें मैंने सूचीबद्ध किया है, क्योंकि यह सक्रिय रूप से कंट्रास्ट को बढ़ावा देगा। मैं rgb(82,102,122)शुरुआती बिंदु के रूप में लगभग 30% कम संतृप्ति (यह ) कोशिश करूँगा ।

— ऑस्टिन हेममेलगरन
स्रोत

6

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

<div> <span0>This is hard to read!</span></div><br>
<div> <span1>This is hard to read!</span></div><br>
<div> <span2>This is hard to read!</span></div><br>

शैलियाँ

span0 {text-shadow: 0px 2px 1px black;
}

span1 {padding:0 4px;
background-color: rgba(255,255,255,0.25);
position:relative;
display:inline-block;
}

span2 {padding:0 4px;
background-color: rgba(0,0,0,0.35);
position:relative;
display:inline-block;
}

— Danielillo
स्रोत

1

या यहां तक कि एक कठोर सादा सफेद बेहतर है

— अलोएडग ने

1

उन लोगों को मेरे लिए पढ़ना मुश्किल है ..

— हैप्पी आवर कोडिंग

आप के बारे में क्या सोचते हैं @Dylan jsfiddle.net/bersbers/xdkj76L3

— BERS

2

इसका पठनीय। मुझे नहीं लगता कि यह एक अच्छा विचार है। लेकिन इसे पढ़ा जा सकता है।

— हैप्पी आवर कोडिंग

blog.theteamw.com/2009/11/09/…

— yunzen

5

आपके पास पठनीय होने के लिए पृष्ठभूमि और पाठ (अग्रभूमि में वस्तु) के बीच एक उच्च पर्याप्त विपरीत अनुपात होना चाहिए, जिसमें न्यूनतम अनुपात 4.5: 1 है। https://www.oss-usa.com/color-check-ada-image-compliance दिखाता है कि आपकी पृष्ठभूमि और अग्रभूमि पठनीय होने के लिए एक साथ बहुत करीब हैं।

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

— मैक्स टोकमैन
स्रोत

3

"आप पाठ को और अधिक पठनीय कैसे बनाते हैं?" संक्षेप में, आप नहीं! रंग संयोजन वेब पहुंच संबंधी दिशानिर्देशों को पूरा नहीं करता है और इसका उपयोग नहीं किया जाना चाहिए। एक अलग अग्रभूमि या पृष्ठभूमि रंग का उपयोग किया जाना चाहिए। कोई फर्क नहीं पड़ता कि आपके लक्षित दर्शक कौन हैं, आपको हमेशा दृश्य हानि वाले लोगों के लिए लक्ष्य बनाना चाहिए और यह एक आसान तरीका है।

आपके रंग संयोजन के विपरीत कंट्रास्ट यहाँ देखे जा सकते हैं ... https://snook.ca/technical/colour_contrast/colour.html#fg=FF0000,bg=326598

— एंड्रयू
स्रोत

2

(टिप्पणी के लिए पर्याप्त बिंदु नहीं)

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

— allthemikeysaretaken
स्रोत

मैं इस रंग संयोजन को अधिक पठनीय कैसे बनाऊं?

ग्राहक के मन को बदलें।