# يجب أن تستوفي العناصر الحد الأدنى لنسبة تباين الألوان WCAG ⁨1.4.3 Contrast (Minimum)⁩ · المستوى ⁨AA⁩ بعض النصوص لا تتميز عن خلفيتها بما يكفي ليقرأها ضعاف البصر. ## ما الذي تفحصه هذه القاعدة يتحقق من أن التباين بين لون النص ولون الخلفية يستوفي الحد الأدنى لنسبة التباين في WCAG 2 للمستوى AA. ## لماذا يهم ذلك يتطلب معيار WCAG 1.4.3 نسبة تباين لا تقل عن 4.5:1 للنص العادي و3:1 للنص الكبير. يصعب على ضعاف البصر قراءة الأسعار والشارات واللافتات الباهتة، ويصعب ذلك على الجميع في الضوء الساطع. ## كيف تصلحها ### في أي موقع 1. حدّد النص منخفض التباين ودوّن لونَي النص والخلفية: تعرض أداة فحص التباين أو أدوات المطوّرين في متصفحك كليهما. 2. عدّل لون النص أو الخلفية في ملف CSS الخاص بقالبك حتى تبلغ النسبة 4.5:1 على الأقل (3:1 للنص بحجم 24px أو أكبر، أو 18.66px بخط عريض). 3. انتبه خصوصًا إلى شارات التخفيضات، والنص النائب، وروابط التذييل، والأزرار الموضوعة فوق الصور. ### في Shopify 1. حدّد النص منخفض التباين ودوّن لونَي النص والخلفية: تعرض أداة فحص التباين أو أدوات المطوّرين في متصفحك كليهما. 2. في المتجر الإلكتروني > القوالب > تخصيص > إعدادات القالب > الألوان (Online Store > Themes > Customize > Theme settings > Colors)، اجعل لون النص أغمق أو لون الخلفية أفتح في نظام الألوان المتأثر حتى تبلغ النسبة 4.5:1 على الأقل. 3. انتبه خصوصًا إلى شارات التخفيضات، والنص النائب، وروابط التذييل، والأزرار الموضوعة فوق الصور. ### في WooCommerce وWordPress 1. حدّد النص منخفض التباين ودوّن لونَي النص والخلفية: تعرض أداة فحص التباين أو أدوات المطوّرين في متصفحك كليهما. 2. عدّل لون النص أو الخلفية في ملف CSS الخاص بقالبك حتى تبلغ النسبة 4.5:1 على الأقل (3:1 للنص بحجم 24px أو أكبر، أو 18.66px بخط عريض). 3. انتبه خصوصًا إلى شارات التخفيضات، والنص النائب، وروابط التذييل، والأزرار الموضوعة فوق الصور. ## كيف تتحقق من الإصلاح - أعد تشغيل الفحص وتأكد من أن القاعدة ⁨color-contrast⁩ لم تعد تظهر. - افحص بعض الحالات بأداة لقياس التباين باستخدام الألوان الدقيقة. ## المصادر - وثائق قاعدة axe-core (Deque): https://dequeuniversity.com/rules/axe/4.13/color-contrast - فهم WCAG 1.4.3 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum