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

ডিজাইনার হিসাবে আমার ৩০ বছরেরও বেশি অভিজ্ঞতা আছে ... উপরের @ মায়ারস ডিজাইন-এর মন্তব্যে আমি সম্ভবত আরও সম্মত হতে পারিনি। যে রঙ পরিকল্পনাটি অবিলম্বে প্রত্যাখ্যান করা উচিত।

— স্কট

6

প্রথমে আপনার রঙীন স্কিমের উদ্দেশ্যটি বোঝা উচিত। ইউআই এর জন্য একটি রঙের স্কিমে, এটি নিরপেক্ষ রঙগুলিকে প্রাথমিক রঙ হিসাবে ব্যবহার করার অর্থ বোধ করে, যে কোনও অ্যাকসেন্টুয়াল রঙগুলি খুব কম করে ফেলে দেওয়া উচিত । উদাহরণস্বরূপ ইউটিউব সম্পর্কে চিন্তা করুন, মনে আসে কোন রঙ? লাল এবং কালো, তবে প্রকৃত ইউটিউব ওয়েবপৃষ্ঠায় একবার দেখুন, এটির 98% সাদা এবং হালকা ধূসর। নিছক অ্যাকসেন্ট হিসাবে লাল ব্যবহৃত হয়।

— শুভ আওয়ার কোডিং

সবাইকে (উত্তরদাতাদের সহ) ধন্যবাদ! আমি আজ সকাল থেকে 1 বা 2 মন্তব্য হওয়ার প্রত্যাশা রেখেছিলাম তা দেখার জন্য আমি কেবল এসই ডাবল-চেক করেছি এবং এখন এটি। আমি অনেক কিছু শিখেছি এবং কিছু দৃinc়প্রত্যয়ী যুক্তি পেয়েছি - ধন্যবাদ!

— bers

1

1995 বলা হয়। তারা তাদের রঙিন স্কিম ফিরে চায়।

— মাজুরা

54

ক্লায়েন্টের মন পরিবর্তন করুন।

নীল পটভূমিতে লাল টেক্সটটি সুচরতার পক্ষে অত্যন্ত দরিদ্র পছন্দ বলে এই সত্যটি ঠিক করতে পারে এমন কিছুই নেই কারণ বৈসাদৃশ্যটি খুব কম, এবং বিশেষত লাল এবং নীল বিপরীত রঙ হিসাবে খারাপ কাজ করে।

এই ওয়েবসাইট ওয়েবাইম.আরজি দেখায় যে আপনার দুটি রঙের মধ্যে বিপরীতে একটি করুণ 1.5-2 : 1

বৈসাদৃশ্যটি সুগম্যতার জন্য গুরুত্বপূর্ণ

পাঠ্য বৈসাদৃশ্য পাঠ্যের বৈসাদৃশ্য একটি আরও গুরুত্বপূর্ণ বিষয়। ভাগ্যক্রমে আমাদের জন্য ওয়েব সামগ্রী অ্যাক্সেসিবিলিটি গাইডলাইনস (ডাব্লুসিএজি) ২.০ বিশেষভাবে পাঠ্যের বিপরীতে সম্বোধন করে এবং এমন গাইডলাইন সরবরাহ করে যা প্রতিবন্ধী ব্যক্তিদের ওয়েব অ্যাক্সেসযোগ্যতা সরবরাহ করার লক্ষ্যে, সাধারণত সাধারণভাবে পরামর্শও দেয়।

ডাব্লুসিএজি স্তর এএর জন্য সাধারণ পাঠ্যের জন্য কমপক্ষে 4.5: 1 এবং বড় পাঠ্যের জন্য 3: 1 এবং বিস্তৃত অনুপাতের প্রয়োজন হয় সাধারণ পাঠ্যের জন্য কমপক্ষে 7: 1 এবং বড় লেখার জন্য 4.5: 1 এর বিপরীতে অনুপাত প্রয়োজন।

সুতরাং আপনার ক্লায়েন্টদের ওয়েবসাইট প্রকাশিত পেশাদার নির্দেশিকাগুলির সরাসরি বিরোধী । এটি নান্দনিক স্বাদের বিপরীতেও রয়েছে (আমার পেশাদার মতে)

যদি প্রয়োজন হয় তবে আপনি একটি নকশায় এখনও লাল এবং নীল উপাদান ব্যবহার করতে পারেন। তবে নীল পটভূমিতে "বিষয়বস্তু আকারের" লাল পাঠ্যটি রাখা কেবল আপনার সাইটে দর্শকদের একটি বিশাল শতাংশকে ফিরিয়ে আনবে। আমার মতে আপনার ক্লায়েন্টকে এটি ব্যবহার না করার জন্য প্ররোচিত করার আপনার একটি পেশাদার দায়িত্ব রয়েছে।

আশা রাখি, প্রদত্ত লিঙ্ক কেবল যে তর্ক চেয়ে আরো জোরালো ভাবে আপনার ক্ষেত্রে করতে পারে আপনি এটি হার্ড পড়তে পাবেন। এটা তোলে আসলে provably পড়া কঠিন।

Chromostereopsis

যদি এটি যথেষ্ট প্ররোচিত না করে থাকে - ক্রোমোস্টেরিপসিস হ'ল (সংক্ষেপে!) একটি অপটিক্যাল মায়া যা দর্শকদের জন্য গভীরতার ক্ষেত্রের সমস্যা তৈরি করে। এটা অপ্রীতিকর!

— mayersdesign
সূত্র

11

স্পষ্ট করার জন্য, ডাব্লু 3 সি নথিতে বিপরীতে অনুপাত সর্বনিম্ন । অনুপাতটি 4.5: 1 বা 7: 1 এর মধ্যে হওয়া উচিত নয়; তারা বলছেন যে আপনি যে স্তরের অ্যাক্সেসিবিলিটি টার্গেট করছেন তার উপর নির্ভর করে এটি কমপক্ষে একটি হওয়া উচিত ।

— অ্যাড্রিয়ান ম্যাকার্থি

1

খুব ভাল কথা, আমি আরও বিশদটি অন্তর্ভুক্ত করার জন্য উত্তরটি আপডেট করেছি, বিশেষত এটি।

— মেয়রডিজাইন

8

যদিও কোনও উপায়ে নিখুঁত (বা এমনকি ভাল) নয়, পাঠ্যের সাথে একটি সাদা (বা অন্য) রূপরেখা যুক্ত করা পাঠযোগ্যতার সাথে সহায়তা করতে পারে:

যদি আপনার ক্লায়েন্ট রঙগুলি রাখার জন্য জোর দেয় তবে এটি কার্যকর হতে পারে।

— অলস
সূত্র

মোটামুটিভাবে, এটি কেবল 36pt টাইপের সাথে কাজ করে।

— ব্যবহারকারী 8356

হ্যাঁ, দুর্দান্ত ধারণা। কটাক্ষ হিসাবে বোঝানো হয়নি। এবং আপনি এটি যত বেশি প্রয়োগ করবেন ততই আমরা পাঠ্যটি পড়তে পারি। সুতরাং পর্দার প্রান্তে সমস্ত ধরণের সাদা রূপরেখা ধরুন ... চোখ ধাঁধানো, চোখ ধাঁধানো।

— মার্টিন জাস্কে

8

আপনি পারবেন না। লাল এবং নীল রঙের এই ছায়াগুলি উভয় অন্ধকার, স্যাচুরেটেড রঙের, তারা কার্যত একে অপরের বিরুদ্ধে কম্পন করে এবং এই পাঠ্যটি মানুষের চোখকে রক্তক্ষরণ করে তোলে। যে কোনও বিকাশকারী বা ডিজাইনার যিনি পাঠ্যের যোগ্যতার বিষয়ে চিন্তা করেন না তাদের একটি রুবি রেলের উপরের বাইরে চলে যেতে হবে।

লাল একটি লট হালকা করার চেষ্টা করুন। এটি গোলাপী দেখায় তবে এটি আরও বেশি পঠনযোগ্য। অথবা সেই পটভূমিতে সাদা বা ফ্যাকাশে হলুদ ব্যবহার করুন। গাark় ব্যাকগ্রাউন্ডগুলি সুসংগঠনের ক্ষেত্রে কুখ্যাত। আপনার মতো একই সাধারণ রঙ থাকতে পারে - একটি সবুজ নীল - তবে এটি আরও হালকা করুন। তবে উজ্জ্বল লাল লেখাটি কখনও পড়া সহজ হয় না, তাই আমি কেবল রঙের জন্য এই লেখাকে স্ক্র্যাপ করব would

— user8356
সূত্র

7

হিসাবে চিহ্নিত করা হয়েছে, এটি ভয়াবহ রঙ বৈপরীত্য। কালারব্লাইন্ড লোকদের জন্য এটিও খারাপ প্যালেট (লাল-নীল রঙের মিশ্রণ সহ, বিপরীতে অনুপাতটি 1: 1 এর নিকটবর্তী জঘন্য কিছুতে নেমে আসে যা সম্পূর্ণ অপঠনযোগ্য)।

এখানে আপনার সেরা বেটটি ক্লায়েন্টকে বোঝাতে চলেছে যে তারা রঙিন পাঠ্য এবং ব্যাকগ্রাউন্ড মিশ্রিত করা উচিত নয়। হয় উভয় নয়, পাঠ্য বা পটভূমিটি রঙ করুন। এমন কোনও সরঞ্জামে একটি মক-আপ লোড করার চেষ্টা করুন যা আপনাকে কালারব্লাইন্ড উপলব্ধিগুলি অনুকরণ করতে দেয় (আপনি অনলাইনে বেশ কয়েকটি শালীন বিকল্প খুঁজে পেতে পারেন), এবং আপনার ক্লায়েন্টকে ফলাফলটি প্রদর্শন করুন, এটি তাদের বোঝাতে উল্লেখযোগ্যভাবে সহায়তা করবে।

যদি এটি কোনও বিকল্প না হয় তবে আপনি পঠনযোগ্যতার উন্নতি করতে চেষ্টা করতে পারেন এমন অন্যান্য জিনিসগুলির মধ্যে অন্তর্ভুক্ত রয়েছে (নোট করুন যে এগুলির কোনওটিই রঙিনতা সমস্যা সমাধান করে না, তারা কেবল বৈপরীত্য বা সাধারণ পাঠযোগ্যতার সাথে সহায়তা করে:

মনো-স্পেসযুক্ত ফন্ট ব্যবহার করুন। বোকা মনে হচ্ছে, তবে এটি আসলে বেশিরভাগ লোককে পাঠ্য আরও সহজভাবে পড়তে সহায়তা করে। স্পষ্টতই কুরিয়ার নিউ নয়, তবে বিটস্ট্রিম ভেরা সানস মনো, (বা এমনকি ড্রড সানস মনোোর মতো কিছু) এখনও দেখতে সুন্দর হওয়া উচিত এবং এটি আরও কিছুটা পাঠযোগ্য হবে।
ফন্টের ওজন করুন এবং সম্ভবত আকারটিও খানিকটা বেশি। আরও বড়, সাহসী পাঠ্য বিস্তৃত থেকে পৃথক, পড়া সহজ read
রঙের স্কিমটি অদলবদল করুন (এটি একটি উজ্জ্বল লাল পটভূমিতে গা dark় নীল পাঠ্য তৈরি করুন)। এটি সহজ শোনায়, তবে বেশিরভাগ লোকের পক্ষে চারিদিকের অন্যান্য উপায়ে তুলনামূলকভাবে উজ্জ্বল লালচে গা dark় নীল প্রস্তুত করা সহজ।
অফসেট সহ পাঠ্যে একটি উচ্চ-বিপরীতে সরু ড্রপ ছায়া যুক্ত করুন। আপনি এখানে যা চান তা পটভূমিতে মিশ্রণ নয়, এটি একটি শক্ত প্রান্ত যা ভাল বৈপরীত্য সরবরাহ করে। ছায়া অফসেট করা এটির সাথেও বিশেষত একটি সাধারণ তির্যক অফসেট সহায়তা করতে পারে। আমি সাদা রঙের পরিবর্তে এখানে কালো রঙের সাথেও যাব (আপনি পাঠ্যটি উচ্চারণ করতে চান, পটভূমিটি নয়, তাই পাঠ্যের বিপরীতে উচ্চ বিপরীতে যেতে হবে)। সামগ্রিকভাবে, এর লাইন বরাবর কিছু text-shadow: 2px 2px 4px black;সম্ভবত একটি শালীন শুরু জায়গা।
উল্লেখযোগ্যভাবে লাল হালকা। এখনই, আপনি ব্যবহার করছেন rgb(255,0,0)। আমি rgb(255,204,204)প্রথমে (বা সম্ভবত এমনকি হালকা) মতো কিছু দিয়ে চেষ্টা করব এবং সেখান থেকে সামঞ্জস্য করব।
নীলকে গাark় করুন। কাছাকাছি কিছু 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/…

— ইউনজেন

5

আপনার পাঠ্যযোগ্য হওয়ার জন্য পটভূমি এবং পাঠ্যের (পূর্বভূমিতে বস্তু) মধ্যে একটি উচ্চ পর্যায়ে বৈপরীত্য অনুপাত থাকা দরকার যা নূন্যতম বিপরীতে রেশন সহ 4.5: 1 হয়। https://www.oss-usa.com/color-check-ada-image-comp अनुसरण দেখায় যে আপনার পটভূমি এবং পূর্বভূমি একসাথে খুব সহজেই পড়তে পারা যায়।

কখনও কখনও ক্লায়েন্টকে বলতে হয় যে রঙিন স্কিমটি পুরোপুরি সংরক্ষণ করা যায় না এবং পাঠযোগ্যতার প্রয়োজনীয়তাগুলি পূরণ করার জন্য সংশোধন করা দরকার। স্পষ্টতই, পাঠ্যটিকে হালকা রঙে ফিরিয়ে দেওয়া অন্ধকার পটভূমির বিপরীতে যথেষ্ট বৈপরীত্য দেয়।

— সর্বোচ্চ টোকম্যান
সূত্র

3

"আপনি কীভাবে পাঠ্যটিকে আরও পঠনযোগ্য করে তুলবেন?" সংক্ষেপে, আপনি না! রঙ সমন্বয় ওয়েব অ্যাক্সেসযোগ্যতার নির্দেশিকাগুলি পূরণ করে না এবং ব্যবহার করা উচিত নয়। একটি আলাদা অগ্রভাগ বা পটভূমি রঙ ব্যবহার করা উচিত। আপনার অনুমিত টার্গেটের শ্রোতা কে তা বিবেচনা করুন না কেন, আপনার দৃষ্টিভঙ্গি দ্বারা ক্ষতিগ্রস্থ লোকদের যত্ন নেওয়া সবসময় লক্ষ্য করা উচিত এবং এটি একটি সহজ সমাধান।

আপনার রঙের সংমিশ্রণের জন্য বৈপরীত্য অনুপাতগুলি এখানে দেখা যায় ... https://snook.ca/technical/colour_contrast/colour.html#fg=FF0000,bg=326598

— অ্যান্ড্রু
সূত্র

2

(মন্তব্য করার পর্যাপ্ত পয়েন্ট নেই)

আপনি লেখায় স্ট্রোক যুক্ত করার চেষ্টা করতে পারেন। আমি ফটোশপ অর্থে "স্ট্রোক" শব্দটি ব্যবহার করছি, মূলত বিপরীতে হিসাবে পরিবেশন করার জন্য পাঠ্যের সীমানা / রূপরেখার রঙ। কালো / সাদা ঠিক থাকতে হবে (বিশেষত আপনি যদি স্ট্রোকের বেধের সাথে খেলেন) তবে আমি ধারণা করি যে লাল / নীল রঙের কয়েকটি শেড খুব কার্যকর হতে পারে।

— allthemikeysaretaken
সূত্র

আমি কীভাবে এই রঙের সংমিশ্রণটিকে আরও পঠনযোগ্য করে তুলব?

ক্লায়েন্টের মন পরিবর্তন করুন।