هناك مشاكل عدة تظهر على موقعك و أهمها الأشياء التي تسبب قلقا على المدونة مما يجعلها غير مناسبة للزوار من ناحية المظهر او الأداء أو غير مناسبة من ناحية السيو seo .

سنتعرف في هذا الموضوع كيفية حل مشكلة Background and foreground colors do not have a sufficient contrast ratio .

نجد هذه المشكلة في قياس سرعة الموقع عبر # PageSpeed Insights التابع لجوجل أيضا نجدها عبر الاداة القوية التي تساعدنا على حل جميع مشاكل موقعنا الإلكتروني نهائيا .

يمنحك خيار lighthouse الذي نجده في المتصفحات و أهمها متصفح Google Chrome ، معرفة أربعة أشياء مهمة للغاية :

1. Performance
2. Accessibility
3. Best Practices
4. SEO

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

ماذا تعني مشكلة Background and foreground colors do not have a sufficient contrast ratio

المعنى هو أن تظهر الكتابة سوى بيضاء أو سوداء بخلفية توضح الكتابة بشكل كلي ، يعني الزائر عندما يشاهد الخلفية مع الكلمات لن يصعب عليه القراءة ، لنأخذ مثال :

كلمة باللون الأبيض بخلفية خضراء فاتحة 

ستكون غير واضحة و هنا تظهر هذه المشكلة

مثال آخر يحل المشكلة :

كلمة باللون الأسود مع خلفية خضراء فاتحة

لاحظ معي أن الكتابة واضحة تماما و الخلفية تبدوا جيدة الآن .  

كيفية حل مشكلة Background and foreground colors do not have a sufficient contrast ratio

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

سنحتاج إلى برنامج يقدم لنا حل مشكلة colors do not have a sufficient contrast ratio من خلاله ستنحل المشكلة إن شاء الله .

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

برنامج Colour Contrast Analyser CCA

أداة فحص تباين الألوان المجانية من TPGi والتي تتيح لك تحديد نسبة التباين للونين بسهولة باستخدام أداة قطرة العين يمكّنك CCA من تحسين المحتوى الخاص بك بما في ذلك العناصر النصية والعناصر المرئية للأفراد ذوي الإعاقات البصرية مثل عمى الألوان وضعف البصر.

مميزات برنامج Colour Contrast Analyser CCA

• مؤشرات الامتثال لإرشادات الوصول إلى محتوى الويب 2.1 (WCAG 2.1)
• طرق متعددة لتحديد الألوان: يمكنك إدخال تنسيقات ألوان CSS يدويًا أو استخدام RGB Slider أو اختيار أداة منتقي الألوان
• محاكي عمى الألوان
• دعم شفافية ألفا على ألوان المقدمة

تحميل البرنامج Colour Contrast Analyser CCA

لتحميل البرنامج المستعمل في الشرح حمله على الرابط التالي :

# Colour Contrast Analyser (CCA)