রঙ

অ্যাক্সেসিবল রঙ

কোনও ইউজার ইন্টারফেস কম্পোনেন্ট বা তার স্ট্যাটাস বোঝাতে শুধু রঙ ব্যবহার করবেন না: পার্থক্য বোঝাতে আইকনোগ্রাফি এবং/অথবা আকার ব্যবহার করুন। শুধুমাত্র রঙ দিয়ে সাফল্য/সমস্যা বোঝাবেন না। আইকন বা টেক্সট ব্যবহার করুন।

<!-- Good: Denotes state without colors alone -->
<div class="error-msg">
  <span aria-hidden="true">❌</span>
  <span>The password entered was invalid.</span>
</div>

কনট্রাস্ট

• ন্যূনতম কনট্রাস্ট স্ট্যান্ডার্ড: সাধারণ টেক্সটের জন্য ৪.৫:১ এবং বড় টেক্সট বা আইকনের জন্য ৩:১ বজায় রাখুন।
• টেক্সট নয় এমন কন্টেন্টের ক্ষেত্রে কনট্রাস্টের স্ট্যান্ডার্ড মেনে চলুন: ইউজার ইন্টারফেস কম্পোনেন্টের বাউন্ডারি ও স্ট্যাটাসের ক্ষেত্রে সর্বনিম্ন কনট্রাস্টের অনুপাত ৩:১ বজায় রাখুন।
  • এর মধ্যে ভিজ্যুয়াল এলিমেন্ট (বর্ডার, ব্যাকগ্রাউন্ড, বক্স-শ্যাডো, আন্ডারলাইন) অন্তর্ভুক্ত যা UI কম্পোনেন্টের (যেমন, ইনপুট ফিল্ড বর্ডার) সীমানা তৈরি করে বা উপস্থিতি নির্দেশ করে।
  • এছাড়াও, এর মধ্যে কোনও কম্পোনেন্টের মধ্যে অ্যাক্টিভ স্ট্যাটাস নির্দেশ করে এমন ভিজ্যুয়াল এলিমেন্ট অন্তর্ভুক্ত (যেমন, চেকবক্স টিকচিহ্ন বা থাম্ব সুইচ)।
  • সতর্কতা: ৩:১ নন-টেক্সট কনট্রাস্টের সাথে ম্যাচ করা মিনিমালিস্টিক ডিজাইনের ক্ষেত্রে চ্যালেঞ্জিং হতে পারে। সফ্ট গ্রেডিয়েন্ট বা সূক্ষ্ম ইনসেট/আউটসেট শ্যাডো অ্যাক্সেসিবিলিটি সংক্রান্ত প্রয়োজনীয়তা পূরণ করার সাথে সাথে ভিজ্যুয়াল বাউন্ডারিকে আরও মসৃণ করতে পারে।
• শুধুমাত্র প্রয়োজন হলে prefers-contrast ব্যবহার করুন: ডিজাইনে কম-কনট্রাস্ট অ্যাকসেন্ট (যেমন, সূক্ষ্ম বর্ডার, মিউট করা সেকেন্ডারি টেক্সট) ব্যবহার করা হলে @media (prefers-contrast: more) ব্যবহার করুন; যেসব সাইট ইতিমধ্যেই বেসলাইন কনট্রাস্ট পূরণ করে সেগুলির ক্ষেত্রে এটির প্রয়োজন হবে না।

লাইট ও ডার্ক রঙের স্কিম

• হালকা ও গাঢ় রঙের স্কিম সাপোর্ট করা: @media (prefers-color-scheme: dark)-কে সম্মান করুন এবং এটিকে color-scheme CSS প্রপার্টির সাথে পেয়ার করুন যাতে ফর্ম কন্ট্রোল, স্ক্রলবার এবং অন্যান্য UA-রেন্ডার করা সারফেস ম্যাচ করে। আরও বিবরণের জন্য ডার্ক মোড দেখুন।

ফোর্সড কালার মোড

• ফোর্সড কালার মোড সাপোর্ট করা: ফোর্সড কালার মোডে (Windows-এ হাই কনট্রাস্ট), ব্রাউজার সিস্টেম কীওয়ার্ড দিয়ে লেখকের কালার ওভাররাইড করে এবং background-image, box-shadow ও border-image স্ট্রিপ করে। @media (forced-colors: active) ব্যবহার করে কালার টোকেনের জন্য সিস্টেম কালার ফলব্যাক নির্ধারণ করুন।
• শুধুমাত্র যেখানে রঙ সংক্রান্ত তথ্য অপরিহার্য সেখানে forced-color-adjust: none ব্যবহার করুন (সিনট্যাক্স হাইলাইটার, রঙ চয়নকারী সোয়াচ)। শুধু নান্দনিকতা বজায় রাখার জন্য forced-color-adjust: none ব্যবহার করবেন না।
• বর্ডার, বিভাজক বা স্টেট বোঝাতে background-image, box-shadow বা border-image-এর উপর নির্ভর করবেন না: এগুলি ফোর্সড কালারে (এবং প্রায়ই প্রিন্টেও) অদৃশ্য হয়ে যায়। যদি আপনাকে করতেই হয়, তাহলে নিশ্চিত করুন যে ফোর্সড কালার মোডে কোনও বিকল্প আছে, যেমন সিস্টেম কালার কীওয়ার্ড (CanvasText, LinkText, ButtonText, Highlight, GrayText ইত্যাদি) সহ outline বা border।

টিন্ট তৈরি করা হচ্ছে

ডায়নামিকভাবে টিন্ট জেনারেট করার আগে, আপনি আগে থেকে নির্ধারিত ডিজাইন টোকেন ব্যবহার করতে পারবেন কিনা তা চেক করুন। এটি ডিজাইনারকে অনেক বেশি কন্ট্রোল দেয় এবং ধারাবাহিকতা বজায় রাখে।

আপনাকে যদি ডায়নামিকভাবে হালকা বা গাঢ় রঙ তৈরি করতে হয়:

• oklch/oklab বা lch/lab-এ শুধু লাইটনেস চ্যানেল অ্যাডজাস্ট করবেন না, যেমন oklab(from var(--primary) 0.9 a b)। তাত্ত্বিকভাবে এটি সঠিক পদ্ধতি হলেও, ব্রাউজার এখনও গ্যামাট ম্যাপিং প্রয়োগ করে না, তাই এর ফলে যে রঙ পাওয়া যায় তা আগে থেকে অনুমান করা যায় না।
• আপনি সাদা বা কালো রঙের সাথে color-mix() মিক্স করতে পারেন (oklab-এ করলে ভালো হয়)। এটি রঙকে গ্যামাটে নিরাপদে রাখে, তবে রঙকে অতিরিক্ত ডিস্যাচুরেট করে এবং ওয়াশড আউট টিন্ট ও শেড তৈরি করে।
• আপনি দুটির মধ্যে ভারসাম্য বজায় রাখার জন্য অন্য যেকোনও পদ্ধতির (যেমন, color-mix(in oklab, oklch(from var(--primary) 0.9 c h), white 30%)) সাথে উজ্জ্বলতা অ্যাডজাস্টমেন্ট একত্রিত করতে পারেন, তবে উজ্জ্বলতা অ্যাডজাস্টমেন্টের জন্য ৩০%-এর বেশি এড়িয়ে চলুন।