ডায়নামিক ব্যাকগ্রাউন্ড কালারের মাধ্যমে টেক্সট যাতে পড়া যায় তা নিশ্চিত করুন

আবার ব্যবহার করা যায় এমন UI কম্পোনেন্ট (যেমন ব্যাজ বা বোতাম) তৈরি করার সময় বা ডায়নামিক থিম সাপোর্ট করার সময়, অপ্রত্যাশিত ব্যাকগ্রাউন্ড কালারের বিপরীতে টেক্সট যাতে পড়া যায় তা নিশ্চিত করা চ্যালেঞ্জিং হতে পারে। contrast-color() CSS ফাংশন black বা white-এ সমাধান করে, নির্দিষ্ট ব্যাকগ্রাউন্ড কালারের বিপরীতে কন্ট্রাস্ট রেশিও সর্বাধিক করে।

টেক্সটের জন্য সবচেয়ে উপযুক্ত রঙ নির্ধারণ করুন

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

বাধ্যতামূলক: ব্যাকগ্রাউন্ড কালার (বা এর কাস্টম প্রপার্টি) আর্গুমেন্ট হিসেবে পাস করে, contrast-color() ফাংশন ব্যবহার করে color প্রপার্টি সেট করুন।

.badge {
  /* Define the background color as a custom property */
  --badge-bg: #e02424;
  background-color: var(--badge-bg);
  /* MANDATORY: Dynamic contrasting color */
  color: contrast-color(var(--badge-bg));
}

করবেন না: background-color-এর জন্য contrast-color() ব্যবহার করবেন না। এটি বিশেষভাবে ফোরগ্রাউন্ড রঙের (যেমন টেক্সট বা বর্ডার) জন্য ডিজাইন করা হয়েছে যাতে প্রদত্ত ব্যাকগ্রাউন্ড রঙের সাথে বৈপরীত্য তৈরি করা যায়।

থিম ব্যবহারের সাথে ইন্টিগ্রেট করুন

যেহেতু contrast-color() CSS কাস্টম প্রপার্টি সহ যেকোনও সঠিক <color> ভ্যালু গ্রহণ করে, তাই এটি ডিজাইন সিস্টেমের মধ্যে বিশেষভাবে শক্তিশালী। ভেরিয়েবল হিসেবে আপনার ব্যাকগ্রাউন্ড থিম সেন্ট্রালাইজ করার মাধ্যমে, আপনি নিশ্চিত করেন যে থিম পরিবর্তন হলে, এমনকি ব্যবহারকারীর নির্দিষ্ট করা রঙে পরিবর্তন হলেও, ফোরগ্রাউন্ড কন্টেন্ট অটোমেটিক এর কনট্রাস্ট আপডেট করে।

করণীয়: আপনার অ্যাপ্লিকেশন জুড়ে সিঙ্ক করার গ্যারান্টি দিতে contrast-color()-এর মধ্যে শেয়ার করা ব্যাকগ্রাউন্ড ভেরিয়েবল রেফারেন্স করুন।

.theme-card {
  background-color: var(--theme-surface-color);
  color: contrast-color(var(--theme-surface-color));
}

.theme-container[data-theme="light"] {
  --theme-surface-color: #f4f4f4;
}
.theme-container[data-theme="dark"] {
  --theme-surface-color: #1a1a1a;
}
.theme-container[data-theme="custom"] {
  --theme-surface-color: var(--user-custom-theme);
}

যা করবেন না: ব্যাকগ্রাউন্ড ডাইনামিক হলে প্রতিটি ইন্টার‍্যাকশন স্ট্যাটের জন্য আলাদা টেক্সট কালার হার্ড-কোড করবেন না। এটি করলে, contrast-color() যে অমিল প্রতিরোধ করার জন্য তৈরি করা হয়েছে, সেই অমিল আবার দেখা যায়।

ফলব্যাক স্ট্র্যাটেজি

contrast-color() ছাড়া ব্রাউজারকে সাপোর্ট করতে, আপনাকে অবশ্যই একটি ফলব্যাক প্রদান করতে হবে। ব্যাকগ্রাউন্ডের রঙ জানা থাকলে এবং সেটি স্থির থাকলে, হার্ড-কোডেড কনট্রাস্ট কালার ব্যবহার করুন। ডায়নামিক ব্যাকগ্রাউন্ডের ক্ষেত্রে যেখানে রঙ অজানা, সেখানে আপনার UI-এর প্রয়োজনীয়তা এবং ব্রাউজার সাপোর্ট টার্গেটের উপর ভিত্তি করে নিচের টেবিল থেকে একটি স্ট্র্যাটেজি বেছে নিন।

সাজেস্ট করা হয়েছে: রিলেটিভ কালার সিনট্যাক্স (RCS)

যেসব ব্রাউজারে এটি কাজ করে, সেগুলিতে ডায়নামিক কালারের জন্য RCS সবচেয়ে শক্তিশালী অটোমেটিক ফলব্যাক প্রদান করে।

@supports (color: oklch(from red l c h)) {
  .badge {
    /* Highest threshold that passes WCAG. Higher values may be more legible. */
    --threshold: 0.623;
    --l: max(0, sign(var(--threshold) - l));
    color: oklch(from var(--badge-bg) var(--l) 0 h);
  }
}

@supports (color: contrast-color(red)) {
  .badge {
    color: contrast-color(var(--badge-bg));
  }
}

বিকল্প CSS ফলব্যাক

করণীয়: RCS পর্যাপ্ত বা কাজ না করলে, আপনার ডিজাইনের সীমাবদ্ধতার সাথে সবচেয়ে ভালোভাবে মেলে এমন ফলব্যাক বেছে নিন।

বিকল্প ১: টেক্সট স্ট্রোক

.badge--stroke {
  -webkit-text-stroke: 4px black;
}

বিকল্প ২: লেটারফর্ম বজায় রাখতে paint-order সহ টেক্সট স্ট্রোক

.badge--stroke {
  -webkit-text-stroke: 4px black;
  paint-order: stroke fill;
}

বিকল্প ৩: ট্রান্সলুসেন্ট ব্যাকগ্রাউন্ড ওভারলে

.badge--overlay {
  position: relative;
  color: #fff;
  overflow: hidden;
}
.badge--overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 0.4);
  z-index: 0;
}
.badge--overlay span {
  position: relative;
  z-index: 1;
}

বিকল্প ৪: টেক্সট শ্যাডো

.badge--shadow {
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.8);
}

বিকল্প ৫: SVG ফিল্টার

1. এই SVG ফিল্টার ডেফিনিশন লোড করুন। এই WebKit বাগ দ্বারা প্রভাবিত Safari ভার্সন সাপোর্ট করতে চাইলে, এটি সরাসরি HTML ডকুমেন্টে যোগ করতে হবে, যা ফিল্টারের জন্য এক্সটার্নাল ও ডেটা URL রেফারেন্সকে বাধা দেয়। অন্যথায়, এটি কোনও এক্সটার্নাল ফাইল থেকে লোড করতে হবে, হয় SVG ফাইল অথবা CSS-এ ইনলাইন করা।

   <!-- Technique from https://miunau.com/posts/dynamic-text-contrast-in-css/ -->
   <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="0" style="display: none;">
     <defs>
       <filter id="contrast-filter" color-interpolation-filters="sRGB">
         <feColorMatrix type="matrix"
           values="0.2126 0.7152 0.0722 0 0
             0.2126 0.7152 0.0722 0 0
             0.2126 0.7152 0.0722 0 0
             0 0 0 1 0"/>
         <feMorphology operator="dilate" radius="2"/>
         <feComponentTransfer>
           <feFuncR type="linear" slope="-255" intercept="128"/>
           <feFuncG type="linear" slope="-255" intercept="128"/>
           <feFuncB type="linear" slope="-255" intercept="128"/>
         </feComponentTransfer>
         <feComposite operator="in" in2="SourceGraphic"/>
       </filter>
     </defs>
   </svg>
   

2. <span>-এ টেক্সট র‍্যাপ করুন।

   <div class="badge--svg">
     <span>Badge content</span>
   </div>
   

3. <span>-এ ফিল্টার প্রয়োগ করুন।

.badge--svg span{
  color: var(--badge-bg);
  filter: url(#contrast-filter);
}