مقدمة

لقد تلقيت مؤخرًا تقريرًا عن خطأ حيث لم يتم عرض رمز SVG بشكل صحيح في وضع التباين العالي. في هذه المقالة، سأشارك الحل الذي نجح معي.

حل

في وضع التباين العالي، استخدمت لون نظام CanvasText لضبط لون الأيقونة تلقائيًا.

.icon {
  mask-image: url(svg-link);
  background-color: currentColor;
  ...
}

@media (forced-colors: active) {
  .icon::before {
    background-color: CanvasText;
  }
}

في حالتي، استخدمت في البداية اللون الحالي لوراثة اللون من العنصر الأصلي. ومع ذلك، في وضع التباين العالي، أردت تعيين لون الخلفية إلى CanvasText بشكل عام داخل العنصر الفرعي، لذلك قمت بتطبيق هذا التغيير.

ما هو CanvasText؟

يشير CanvasText إلى لون النص المستخدم لمحتوى التطبيق أو المستندات. يتم ضبطه تلقائيًا لتوفير أفضل تباين مع لون خلفية النظام.

باستخدام CanvasText، فإنك تضمن بقاء النص والأيقونات مرئية حتى عندما يقوم المستخدم بتمكين وضع التباين العالي. بالإضافة إلى ذلك، نظرًا لأن CanvasText يتكيف بناءً على سمة النظام، فإنه يعمل بشكل جيد مع الوضعين الداكن والفاتح.

في حالتي، تم ضبط لون خلفية الأيقونة في البداية على اللون الأسود. ومع ذلك، عندما تتحول الخلفية إلى اللون الأسود في وضع التباين العالي، يصبح الرمز غير مرئي. أدى تغيير اللون إلى اللون الأبيض إلى جعله مرئيًا مرة أخرى، ولكن للتعامل مع هذا بشكل متسق عبر جميع السيناريوهات، اخترت استخدام لون النظام CanvasText.

مراجع

https://developer.mozilla.org/en-US/docs/Web/CSS/system-color