ضمان سهولة قراءة النص باستخدام ألوان الخلفية الديناميكية

عند إنشاء مكوّنات واجهة مستخدم قابلة لإعادة الاستخدام (مثل الشارات أو الأزرار) أو استخدام المظاهر الديناميكية، قد يكون من الصعب ضمان سهولة قراءة النص على لون خلفية غير متوقّع. تؤدي دالة CSS‏ contrast-color() إلى black أو white، ما يزيد من نسبة التباين مع لون الخلفية المحدّد.

تحديد لون النص الأمثل

عندما يكون للعنصر لون خلفية متغيّر أو يتم إدخاله ديناميكيًا، يمكنك الاعتماد على المتصفّح لاحتساب لون النص الأكثر أمانًا.

إجراء إلزامي: اضبط السمة color باستخدام الدالة contrast-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));
}

لا تستخدِم contrast-color() لـ background-color. تم تصميمها خصيصًا لألوان الواجهة (مثل النص أو الحدود) لتتباين مع لون خلفية معيّن.

الدمج مع المظاهر

بما أنّ السمة contrast-color() تقبل أي قيمة صالحة للسمة <color>، بما في ذلك خصائص CSS المخصّصة، فهي فعّالة بشكل خاص في أنظمة التصميم. من خلال تجميع مظاهر الخلفية كمتغيّرات، يمكنك ضمان تعديل تباين محتوى المقدّمة تلقائيًا عند تغيُّر المظهر، حتى إلى الألوان التي يحدّدها المستخدم.

ما يجب فعله: الإشارة إلى متغيّرات الخلفية المشتركة داخل 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()، يجب توفير خيار احتياطي. إذا كان لون الخلفية معروفًا وثابتًا، استخدِم لونًا متباينًا غير قابل للتغيير في البرنامج. بالنسبة إلى الخلفيات الديناميكية التي يكون لونها غير معروف، اختَر استراتيجية من الجدول أدناه استنادًا إلى متطلبات واجهة المستخدم وأهداف دعم المتصفّح.

الخيار المقترَح: Relative Color Syntax (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) كافية أو متاحة.

الخيار 1: حدود النص

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

الخيار 2: حدّ النص مع paint-order للحفاظ على أشكال الحروف

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

الخيار 3: تراكب خلفية شفافة

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

الخيار 4: ظل النص

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

الخيار 5: فلاتر SVG

1. تحميل تعريف فلتر SVG هذا ويجب إضافته مباشرةً إلى مستند HTML إذا كنت بحاجة إلى إتاحة إصدارات Safari المتأثرة بخطأ WebKit هذا، والذي يمنع مراجع عناوين URL الخارجية وعناوين 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);
}