डाइनैमिक बैकग्राउंड कलर की मदद से, टेक्स्ट को पढ़ने लायक बनाएं

फिर से इस्तेमाल किए जा सकने वाले यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट (जैसे, बैज या बटन) बनाते समय या डाइनैमिक थीम का इस्तेमाल करते समय, यह पक्का करना मुश्किल हो सकता है कि टेक्स्ट को किसी भी बैकग्राउंड कलर पर पढ़ा जा सके. contrast-color() सीएसएस फ़ंक्शन, 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(), <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() के बिना काम करने वाले ब्राउज़र के लिए, आपको फ़ॉलबैक देना होगा. अगर बैकग्राउंड का रंग पहले से तय है, तो हार्ड कोड किए गए कंट्रास्ट वाले रंग का इस्तेमाल करें. ऐसे डाइनैमिक बैकग्राउंड के लिए जिनका रंग तय नहीं है, नीचे दी गई टेबल में से कोई रणनीति चुनें. यह रणनीति, यूज़र इंटरफ़ेस (यूआई) की ज़रूरतों और ब्राउज़र के साथ काम करने के टारगेट के आधार पर चुनें.

सुझाया गया: रिलेटिव कलर सिंटैक्स (आरसीएस)

आरसीएस, डाइनैमिक कलर के लिए सबसे बेहतर ऑटोमेटेड फ़ॉलबैक उपलब्ध कराता है. हालांकि, यह सुविधा सिर्फ़ उन ब्राउज़र पर काम करती है जो इसे सपोर्ट करते हैं.

@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));
  }
}

वैकल्पिक सीएसएस फ़ॉलबैक

क्या करें: अगर आरसीएस की सुविधा उपलब्ध नहीं है या काम नहीं करती है, तो ऐसा फ़ॉलबैक चुनें जो आपके डिज़ाइन की सीमाओं के हिसाब से सबसे सही हो.

पहला विकल्प: टेक्स्ट स्ट्रोक

.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);
}

पांचवां विकल्प: एसवीजी फ़िल्टर

1. इस SVG फ़िल्टर की परिभाषा लोड करें. अगर आपको Safari के उन वर्शन के साथ काम करना है जिन पर WebKit की इस गड़बड़ी का असर पड़ा है, तो इसे सीधे एचटीएमएल दस्तावेज़ में जोड़ना होगा. इस गड़बड़ी की वजह से, फ़िल्टर के लिए बाहरी और डेटा यूआरएल के रेफ़रंस नहीं दिए जा सकते. इसके अलावा, इसे किसी बाहरी फ़ाइल से लोड किया जाना चाहिए. यह फ़ाइल, SVG फ़ाइल या सीएसएस में इनलाइन की गई फ़ाइल हो सकती है.

   <!-- 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);
}