تكييف مظهر النص مع سطوع الخلفية لإمكانية الوصول والجماليات

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

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

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

الموارد المتاحة

يوفر اتحاد شبكة الويب العالمية (W3C) وخبراء الصناعة الآخرون موارد وتوصيات قيمة بشأن تباين الألوان لإمكانية الوصول:

W3C - تأكد من أن مجموعات الألوان الأمامية والخلفية توفر تباينًا كافيًا
حساب السطوع المدرك للون

التنفيذ العملي

توفر خوارزمية W3C طريقة مباشرة لحساب المقدمة والخلفية التباينات بناءً على قيم ألوان RGB. يتم تحديد سطوع اللون باستخدام الصيغة التالية:

السطوع = (0.299 * R 0.587 * G 0.114 * B) / 1000

brightness = (0.299 * R   0.587 * G   0.114 * B) / 1000

حيث تمثل R وG وB اللون الأحمر، مكونات اللون الأخضر والأزرق على التوالي.

مثال التنفيذ

يوضح كود JavaScript التالي تنفيذ خوارزمية W3C لضبط لون النص بناءً على سطوع الخلفية:

const rgb = [255, 0, 0]; // قم بتحديث الألوان عشوائيًا للعرض التوضيحي setInterval(setContrast, 1000); وظيفة مجموعة التباين () { // قم بتحديث قيم RGB بشكل عشوائي rgb[0] = Math.round(Math.random() * 255); rgb[1] = Math.round(Math.random() * 255); rgb[2] = Math.round(Math.random() * 255); // احسب السطوع باستخدام صيغة W3C سطوع ثابت = Math.round(((parseInt(rgb[0]) * 299) (parseInt(rgb[1]) * 587) (parseInt(rgb[2]) * 114)) / 1000); // قم بتعيين ألوان النص والخلفية بناءً على السطوع لون النص الثابت = (السطوع > 125)؟ 'أسود' : 'أبيض'; constbackgroundColour = 'rgb(' rgb[0] ',' rgb[1] ',' rgb[2] ')'; $('#bg').css('color', textColour); $('#bg').css('لون الخلفية', لون الخلفية);

brightness = (0.299 * R   0.587 * G   0.114 * B) / 1000

الخلاصة

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