كيفية إصلاح خطأ إمكانية الوصول “ألوان الخلفية والمقدمة لا تحتوي على نسبة تباين كافية”

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

إذا لم يكن من الممكن الوصول إلى موقع الويب الخاص بك، فقد ترى تحذيرات مثل “لا تحتوي ألوان الخلفية والمقدمة على نسبة تباين كافية”.

يعني هذا الخطأ تحديدًا أن المستخدمين قد يجدون صعوبة في تحديد عناصر معينة على الصفحة.

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

في هذه المقالة، سنشرح ما يعنيه الخطأ “لا تحتوي ألوان الخلفية والأمامية على نسبة تباين كافية” وسبب أهمية التباين لإمكانية الوصول إلى الويب.

وبعد ذلك، سنوضح لك أيضًا كيفية إصلاحها باستخدام الأدوات المتاحة لك. دعنا نذهب اليها!

ما هي رسالة “ألوان الخلفية والأمامية لا تحتوي على نسبة تباين كافية”؟

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

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

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

ومن الضروري أيضًا أن تستخدم قدرًا كافيًا من التباين على موقعك. وهذا يعني اختيار ألوان الخلفية التي تمكن المستخدمين من رؤية العناصر الأساسية في الصفحة.

الخطأ “لا تحتوي ألوان الخلفية والأمامية على نسبة تباين كافية” يعني أن نسبة التباين بين العنصرين لا تفي بالمعايير الموصى بها. على سبيل المثال، قد تستخدم ظلًا مشابهًا للون الرمادي لكل من الخلفية والنص.

تم وضع هذه المعايير بواسطة إرشادات الوصول إلى محتوى الويب (WCAG).

هذه مجموعة من الإرشادات المعترف بها دوليًا لتسهيل الوصول إلى محتوى الويب. تقترح WCAG حدًا أدنى لنسبة التباين يبلغ 4.5:1 للنص العادي و3:1 للنص الكبير لضمان الوضوح الأمثل.

إذا لم تكن متأكدًا من كيفية عمل هذه النسب، فلا تقلق. سنلقي نظرة فاحصة عليهم 🔎 في البرنامج التعليمي.

أهمية التباين في إمكانية الوصول إلى الويب

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

خذ عبارة تحث المستخدم على اتخاذ إجراء (CTA)، على سبيل المثال. تميل هذه العناصر إلى استخدام الألوان التي تبرز من الخلفية، بحيث يسهل رؤيتها.

نظرًا لأن هذه العناصر الجريئة تلفت انتباهك، فمن المرجح أن تنقر عليها:

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

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

كيفية إصلاح خطأ إمكانية الوصول “ألوان الخلفية والأمامية لا تحتوي على نسبة تباين كافية”.

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

الخطوة 1: تحديد العناصر التي تظهر تباينًا منخفضًا
الخطوة 2: تحديد نسبة التباين للعناصر الخاصة بك
الخطوة 3: اضبط الألوان لتتوافق مع نسبة التباين الموصي بها

الخطوة 1: تحديد العناصر التي تظهر تباينًا منخفضًا

يمكن أن تساعدك Page Speed Insights في تحديد العناصر الموجودة على صفحتك بتباين غير كافٍ. للبدء، ستحتاج إلى إنشاء تقرير للصفحة التي تريد اختبارها. ثم قم بالتمرير لأسفل إلى قسم إمكانية الوصول وإلقاء نظرة على التوصيات.

إذا رأيت رسالة “ألوان الخلفية والأمامية لا تحتوي على نسبة تباين كافية”، فيمكنك النقر عليها لرؤية قائمة بالعناصر المعنية، بما في ذلك فئة CSS الخاصة بها:

وبما أن Page Speed Insights لا تتيح لك سوى اختبار صفحة واحدة في كل مرة، فمن المفترض أن يكون من السهل التعرف على هذه العناصر.

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

الخطوة 2: تحديد نسبة التباين للعناصر الخاصة بك

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

هذه هي الأدوات التي تمكنك من النقر على أجزاء معينة من الصفحة ورؤية الرمز السداسي الفريد الخاص بها.

إذا كنت تستخدم Chrome، فيمكنك التفكير في ملحقات Chrome مثل Smart Color Picker أو Geco . بالنسبة لنظام التشغيل macOS، يمكنك تجربة ColorSlurp .

أيًا كانت الأداة التي تختارها، يمكنك استخدامها للحصول على الرمز السداسي لكل من عناصر المقدمة والخلفية التي تظهر تباينًا غير كافٍ.

عندما يكون لديك كلا الرمزين السداسي، ستحتاج إلى استخدام WebAIM Contrast Checker للتحقق منهما. ستعرض لك هذه الأداة تلقائيًا نسبة التباين بين هذه الألوان:

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

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

الخطوة 3: اضبط الألوان لتتوافق مع نسبة التباين الموصي بها

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

إذا كنت تستخدم محرر الكتل، فيمكنك النقر فوق أي كتلة للوصول إلى إعداداتها. ومن هناك، ستتمكن من تعديل اللون:

اضبط الألوان لتتوافق مع نسبة التباين الموصي بها

يمكّنك كل خيار ضمن قائمة اللون من تعديل عنصر معين داخل الكتلة، مثل النص أو الخلفية. عندما تحدد خيارًا، سيظهر منتقي الألوان.

الآن، انقر على التدرج وأدخل الرمز السداسي الذي تريد استخدامه:

بمجرد الانتهاء من ذلك، احفظ التغييرات على الصفحة واختبرها باستخدام PageSpeed Insights. إذا كانت الألوان الجديدة تتمتع بنسبة تباين كافية، فلن تظهر رسالة الخطأ بعد الآن.

👉 بالنسبة للمحتوى الآخر، قد تحتاج إلى ضبط الأشياء باستخدام إعدادات السمة الخاصة بك في أداة التخصيص أو ربما بعض أكواد CSS المخصصة.

أصلح أخطاء نسبة تباين الألوان للأبد

عند استخدام Page Speed Insights لاختبار أداء موقعك، ستحصل أيضًا على تقرير إمكانية الوصول. إذا رأيت التحذير ” ألوان الخلفية والمقدمة لا تحتوي على نسبة تباين كافية “، فهذا يعني أن المستخدمين ذوي الإعاقة البصرية قد يجدون صعوبة في رؤية العناصر الموجودة على الصفحة.

📌 إليك ما عليك فعله إذا واجهت هذا الخطأ: