ما الذي تفحصه هذه القاعدة
يتحقق من أن التباين بين لون النص ولون الخلفية يستوفي الحد الأدنى لنسبة التباين في WCAG 2 للمستوى AA.
لماذا يهم ذلك
يتطلب معيار WCAG 1.4.3 نسبة تباين لا تقل عن 4.5:1 للنص العادي و3:1 للنص الكبير. يصعب على ضعاف البصر قراءة الأسعار والشارات واللافتات الباهتة، ويصعب ذلك على الجميع في الضوء الساطع.
كيف تصلحها
في أي موقع
- حدّد النص منخفض التباين ودوّن لونَي النص والخلفية: تعرض أداة فحص التباين أو أدوات المطوّرين في متصفحك كليهما.
- عدّل لون النص أو الخلفية في ملف CSS الخاص بقالبك حتى تبلغ النسبة 4.5:1 على الأقل (3:1 للنص بحجم 24px أو أكبر، أو 18.66px بخط عريض).
- انتبه خصوصًا إلى شارات التخفيضات، والنص النائب، وروابط التذييل، والأزرار الموضوعة فوق الصور.
في Shopify
- حدّد النص منخفض التباين ودوّن لونَي النص والخلفية: تعرض أداة فحص التباين أو أدوات المطوّرين في متصفحك كليهما.
- في المتجر الإلكتروني > القوالب > تخصيص > إعدادات القالب > الألوان (Online Store > Themes > Customize > Theme settings > Colors)، اجعل لون النص أغمق أو لون الخلفية أفتح في نظام الألوان المتأثر حتى تبلغ النسبة 4.5:1 على الأقل.
- انتبه خصوصًا إلى شارات التخفيضات، والنص النائب، وروابط التذييل، والأزرار الموضوعة فوق الصور.
كيف تتحقق من الإصلاح
- أعد تشغيل الفحص وتأكد من أن القاعدة color-contrast لم تعد تظهر.
- افحص بعض الحالات بأداة لقياس التباين باستخدام الألوان الدقيقة.
كيف يكتشفها FixReports
يشغّل فحصنا قاعدة axe-core color-contrast في متصفح Chrome حقيقي على كل صفحة يختبرها، ويبلّغ عن كل عنصر لا يجتازها مع صفحته وترميزه، ومع لقطة شاشة حيثما ينطبق ذلك.
يؤكد الاختبار الآلي وجود هذه المشكلة بعينها، لكنه لا يستطيع أن يحكم على إمكانية الوصول في بقية الصفحة: فبعض العوائق لا تظهر إلا عندما يفحص شخصٌ الصفحة بنفسه.