রঙ এবং বৈসাদৃশ্য

আপনি কি কখনো স্ক্রিনের লেখা পড়তে গিয়ে রঙের বিন্যাসের কারণে অসুবিধা বোধ করেছেন, অথবা খুব উজ্জ্বল বা কম আলোর পরিবেশে স্ক্রিনটি দেখতে হিমশিম খেয়েছেন? কিংবা হয়তো আপনি এমন একজন, যার রঙ দেখার ক্ষেত্রে আরও স্থায়ী কোনো সমস্যা রয়েছে, যেমন আনুমানিক ৩০ কোটি মানুষ বর্ণান্ধতায় ভুগছেন অথবা ২৫.৩ কোটি মানুষ স্বল্প দৃষ্টিতে আছেন ?

একজন ডিজাইনার বা ডেভেলপার হিসেবে, আপনাকে বুঝতে হবে মানুষ কীভাবে রঙ এবং বৈসাদৃশ্য উপলব্ধি করে, তা সাময়িক, পরিস্থিতিগত বা স্থায়ী যাই হোক না কেন। এটি আপনাকে তাদের দৃষ্টিগত চাহিদাগুলো সর্বোত্তমভাবে মেটাতে সাহায্য করে।

এই মডিউলটি আপনাকে রঙ এবং কনট্রাস্টের কিছু সহজবোধ্য মৌলিক বিষয়ের সাথে পরিচয় করিয়ে দেবে।

রঙ উপলব্ধি করুন

আপনি কি জানেন যে বস্তুসমূহের নিজস্ব কোনো রঙ নেই, বরং সেগুলো আলোর তরঙ্গদৈর্ঘ্য প্রতিফলিত করে? যখন আপনি রঙ দেখেন, তখন আপনার চোখ সেই তরঙ্গদৈর্ঘ্যগুলো গ্রহণ ও প্রক্রিয়াজাত করে সেগুলোকে রঙে রূপান্তরিত করে।

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

হিউ হলো কোনো রঙকে (যেমন লাল, সবুজ বা নীল) বর্ণনা করার একটি গুণগত উপায়, যেখানে রঙের বর্ণালীতে প্রতিটি হিউ-এর একটি নির্দিষ্ট স্থান থাকে এবং এর মান ০ থেকে ৩৬০ পর্যন্ত বিস্তৃত; এক্ষেত্রে লালের মান ০, সবুজের মান ১২০ এবং নীলের মান ২৪০।

স্যাচুরেশন হলো রঙের তীব্রতা, যা ০% থেকে ১০০% পর্যন্ত শতাংশে পরিমাপ করা হয়। পূর্ণ স্যাচুরেশন (১০০%) যুক্ত একটি রঙ খুব উজ্জ্বল হয়, অন্যদিকে স্যাচুরেশনবিহীন (০%) একটি রঙ ধূসর বা সাদাকালো হয়।

উজ্জ্বলতা হলো কোনো রঙের হালকা বা গাঢ় বৈশিষ্ট্য, যা ০% (কালো) থেকে ১০০% (সাদা) পর্যন্ত শতাংশে পরিমাপ করা হয়।

রঙের বৈসাদৃশ্য পরিমাপ করুন

বিভিন্ন দৃষ্টি প্রতিবন্ধী ব্যক্তিদের সহায়তা করার জন্য, WAI গ্রুপ একটি কালার কনট্রাস্ট ফর্মুলা তৈরি করেছে, যা টেক্সট এবং তার ব্যাকগ্রাউন্ডের মধ্যে পর্যাপ্ত কনট্রাস্ট নিশ্চিত করে। এই কালার কনট্রাস্ট অনুপাতগুলো অনুসরণ করা হলে, মাঝারি স্বল্প দৃষ্টিসম্পন্ন ব্যক্তিরা কনট্রাস্ট-বর্ধক সহায়ক প্রযুক্তির সাহায্য ছাড়াই ব্যাকগ্রাউন্ডের ওপর থাকা টেক্সট পড়তে পারেন।

উজ্জ্বল রঙের ব্যবহার রয়েছে এমন ছবিগুলো দেখুন এবং তুলনা করে দেখুন যে নির্দিষ্ট ধরনের বর্ণান্ধতায় আক্রান্ত ব্যক্তিদের কাছে ছবিটি কেমন দেখাবে।

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

ডিউটেরানোপিয়া

ডিউটেরানোপিয়া (যা সাধারণত সবুজ অন্ধত্ব নামে পরিচিত) ১% থেকে ৫% পুরুষ এবং ০.৩৫% থেকে ০.১% নারীর মধ্যে দেখা যায়।

ডিউটেরানোপিয়ায় আক্রান্ত ব্যক্তিদের সবুজ আলোর প্রতি সংবেদনশীলতা কম থাকে। এই বর্ণান্ধতা ফিল্টারটি অনুকরণ করে দেখায় যে এই ধরনের বর্ণান্ধতা দেখতে কেমন হতে পারে।

প্রোটানোপিয়া

প্রোটানোপিয়া (যা সাধারণত রেড ব্লাইন্ড নামে পরিচিত) ১.০১% থেকে ১.০৮% পুরুষ এবং ০.০২% থেকে ০.০৩% নারীর মধ্যে দেখা যায়।

প্রোটানোপিয়ায় আক্রান্ত ব্যক্তিদের লাল আলোর প্রতি সংবেদনশীলতা কম থাকে। এই বর্ণান্ধতা ফিল্টারটি অনুকরণ করে দেখায় যে এই ধরনের বর্ণান্ধতা দেখতে কেমন হতে পারে।

অ্যাক্রোম্যাটোপসিয়া বা মনোক্রোমাটিজম

অ্যাক্রোম্যাটোপসিয়া বা মনোক্রোমাটিজম (বা সম্পূর্ণ বর্ণান্ধতা) অত্যন্ত বিরল একটি অবস্থা।

অ্যাক্রোম্যাটোপসিয়া বা মনোক্রোমাটিজমে আক্রান্ত ব্যক্তিদের লাল, সবুজ বা নীল আলো উপলব্ধি করার ক্ষমতা প্রায় থাকে না। এই বর্ণান্ধতা ফিল্টারটি অনুকরণ করে দেখায় যে এই ধরনের বর্ণান্ধতা দেখতে কেমন হতে পারে।

রঙের বৈসাদৃশ্য গণনা করুন

কালার কনট্রাস্ট ফর্মুলাটি রঙের আপেক্ষিক উজ্জ্বলতা ব্যবহার করে কনট্রাস্ট নির্ধারণ করতে সাহায্য করে, যার মান ১ থেকে ২১ পর্যন্ত হতে পারে। এই ফর্মুলাটিকে প্রায়শই সংক্ষেপে [color value]:1 লেখা হয়। উদাহরণস্বরূপ, বিশুদ্ধ সাদার বিপরীতে বিশুদ্ধ কালোর কালার কনট্রাস্ট রেশিও সবচেয়ে বেশি, যা 21:1 ।

(L1 + 0.05) / (L2 + 0.05)
L1 is the relative luminance of the lighter color
L2 is the relative luminance of the darker colors

রঙের জন্য ন্যূনতম WCAG প্রয়োজনীয়তা পূরণের জন্য, টেক্সটের ছবি সহ সাধারণ আকারের টেক্সটের কালার কনট্রাস্ট রেশিও অবশ্যই 4.5:1 হতে হবে। বড় আকারের টেক্সট এবং অপরিহার্য আইকনগুলির কালার কনট্রাস্ট রেশিও অবশ্যই 3:1 হতে হবে। বড় আকারের টেক্সটের বৈশিষ্ট্য হলো এর সাইজ কমপক্ষে 18pt / 24px অথবা বোল্ড করা হলে 14pt / 18.5px হওয়া। লোগো এবং আলংকারিক উপাদানগুলি এই কালার কনট্রাস্টের প্রয়োজনীয়তা থেকে অব্যাহতিপ্রাপ্ত।

সৌভাগ্যবশত, এর জন্য কোনো জটিল গণিতের প্রয়োজন নেই, কারণ এমন অনেক টুল রয়েছে যা আপনার জন্য রঙের বৈসাদৃশ্যের হিসাব করে দেবে। Adobe Color , Color Contrast Analyzer , Leonardo এবং Chrome-এর DevTools কালার পিকারের মতো টুলগুলো দ্রুত আপনাকে রঙের বৈসাদৃশ্যের অনুপাত বলে দিতে পারে এবং সবচেয়ে মানানসই রঙের জোড়া ও প্যালেট তৈরি করতে সাহায্য করার জন্য পরামর্শ দিতে পারে।

রঙ ব্যবহার করে

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

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

আপনার ডিজিটাল পণ্যগুলোকে গ্রেস্কেলে পর্যালোচনা করা সম্ভাব্য রঙের সমস্যাগুলো দ্রুত শনাক্ত করার একটি ভালো উপায়।

রঙ-কেন্দ্রিক মিডিয়া কোয়েরি

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

উদাহরণস্বরূপ, @prefers-color-scheme মিডিয়া কোয়েরি ব্যবহার করে আপনি একটি ডার্ক থিম তৈরি করতে পারেন, যা ফটোফোবিয়া বা আলোতে সংবেদনশীল ব্যক্তিদের জন্য সহায়ক হতে পারে। এছাড়াও আপনি @prefers-contrast ব্যবহার করে একটি হাই কনট্রাস্ট থিম তৈরি করতে পারেন, যা রঙের পার্থক্য এবং কনট্রাস্ট সংবেদনশীলতাযুক্ত ব্যক্তিদের জন্য সহায়ক।

রঙের স্কিম পছন্দ করে

@prefers-color-scheme মিডিয়া কোয়েরিটি ব্যবহারকারীদেরকে তাদের ভিজিট করা ওয়েবসাইট বা অ্যাপের একটি লাইট বা ডার্ক-থিমযুক্ত সংস্করণ বেছে নেওয়ার সুযোগ দেয়। আপনার লাইট বা ডার্ক প্রেফারেন্স সেটিংস পরিবর্তন করে এবং এই মিডিয়া কোয়েরিটি সমর্থন করে এমন একটি ব্রাউজারে গিয়ে আপনি এই থিম পরিবর্তনটি দেখতে পারেন। ডার্ক মোডের জন্য ম্যাক এবং উইন্ডোজের নির্দেশাবলী পর্যালোচনা করুন।

লাইট ও ডার্ক মোডের তুলনা করুন।

বৈসাদৃশ্য পছন্দ করে

@prefers-contrast মিডিয়া কোয়েরিটি ব্যবহারকারীর OS সেটিংস পরীক্ষা করে দেখে যে হাই কনট্রাস্ট চালু বা বন্ধ করা আছে কিনা। আপনি আপনার কনট্রাস্ট প্রেফারেন্স সেটিংস পরিবর্তন করে এবং এই মিডিয়া কোয়েরি সমর্থন করে এমন একটি ব্রাউজারে গিয়ে ( ম্যাক এবং উইন্ডোজ কনট্রাস্ট মোড সেটিংস) এই থিম পরিবর্তনটি দেখতে পারেন।

সাধারণ এবং উচ্চ কনট্রাস্টের তুলনা করুন।

স্তর মিডিয়া কোয়েরি

আপনার ব্যবহারকারীদের আরও বেশি বিকল্প দিতে আপনি একাধিক রঙ-কেন্দ্রিক মিডিয়া কোয়েরি ব্যবহার করতে পারেন। এই উদাহরণে, আমরা @prefers-color-scheme এবং @prefers-contrast একসাথে ব্যবহার করেছি।

রঙ এবং বৈসাদৃশ্য উভয়ই তুলনা করুন।