تحقيق معيار WCAG AA لتباين الألوان في قوالب VeloCMS
كيفية التحقق من مشكلات تباين الألوان وإصلاحها عبر القوالب الـ 30 المُسلَّمة (وأي قالب مخصص تبنيه)، مع الأدوات الدقيقة والحدود التي يُحدِّدها WCAG فعليًا.
التباين هو الفحص الوحيد في مجال إمكانية الوصول الذي يُصيب أكبر عدد من القراء — وأسهل ما يُتجاهل حتى يشتكي أحدهم. يشترط WCAG 2.1 المستوى AA نسبة 4.5:1 لنص الجسم و3:1 للنص الكبير أو عناصر واجهة المستخدم غير النصية. هذا ليس اقتراحًا. ما دون هذه النسبة يبدأ 30% من القراء في فئة الأعمار التي تسبق ظهور الساد بالمعاناة؛ وما دون 3:1 لا يستطيع معظم المستخدمين قراءة الصفحة في الضوء الساطع أصلًا.
إجراء المراجعة في 30 ثانية
افتح مدونتك في Chrome، ثم انتقل إلى DevTools → Lighthouse → حدِّد «Accessibility» → أنشئ التقرير. يُحدِّد التقرير كل زوج تباين فاشل مع النسبة الفعلية والنسبة المستهدفة. يستخدم Lighthouse الخوارزمية الرسمية لـ WCAG، لذا تكون الأرقام دقيقة.
للتشخيص الأعمق، استخدم axe DevTools (https://www.deque.com/axe/devtools/)؛ إذ يكشف محدد CSS الدقيق لكل إخفاق، مما يجعل الإصلاح مسألة سطر واحد.
المشكلات الأكثر شيوعًا في المدونات
عبر القوالب الـ 30 المُسلَّمة مع VeloCMS، تتسبب أربع فئات في 90% من الإخفاقات:
- نصوص البيانات الوصفية — اسم الكاتب والتاريخ — التي تستخدم --muted على --bg. غالبًا ما تحوم حول 3.5:1، أقل بقليل من حد نص الجسم البالغ 4.5:1.
- لون الرابط مقابل خلفية الصفحة — تُسلَّم بعض القوالب القديمة بلون أزرق للعلامة التجارية يبدو مقبولًا على الأبيض لكنه يفقد تباينه على أسطح البطاقات الرمادية الفاتحة.
- حالات الأزرار المعطَّلة — تُخفِّض معظم أنظمة التصميم شفافية الأزرار إلى 40%، مما يُسقط التباين دون 3:1.
- نص العنصر النائب في حقول الإدخال — اللون الافتراضي للعنصر النائب في كثير من القوالب فاتح جدًا.
إصلاحات لا تُفسد التصميم
لا تحتاج إلى التخلي عن لوحة الألوان الباستيلية الفاتحة لبلوغ مستوى AA. ثلاثة إجراءات تسد معظم الفجوات:
- أغمِق --muted بنحو 15% — افتح تبويب القالب المخصص وخفِّض مكوّن الإضاءة في قيمة OKLCH. يظل النص بالمظهر نفسه فيما تقفز النسبة.
- أضف وزنًا أثقل للخط عند النصوص الصغيرة — نص بحجم 14px بوزن 500 أكثر وضوحًا عند التباين ذاته مقارنةً بوزن 400. يعدّ WCAG «غامق + 14px» نصًا كبيرًا (حد أدنى 3:1).
- ضع خطًا تحت الروابط — إضافة text-decoration: underline يمنح القراء إشارة بصرية غير لونية، مما يُتيح انخفاض نسبة التباين إلى 3:1 (حد النص الكبير) دون الإخفاق في AA.
حين تستلزم العلامة التجارية ألوان تمييز ذات تباين منخفض
تفرض ألوان العلامات التجارية أحيانًا درجات باستيلية ذات تباين منخفض — لا سيما في مجالات الموضة والجمال والتصوير. احتفظ بها للأسطح الزخرفية (طبقات الخلفية والحدود والأيقونات داخل البطاقات الكبيرة). أبقِ نص الجسم وأزرار CTA الرئيسية على زوج تباين عالٍ. يستخدم الزوار ذوو الرؤية المنخفضة اختصارات إمكانية الوصول على مستوى نظام التشغيل (وضع التباين العالي، الوضع الداكن) التي تُبدِّل لوحتك تلقائيًا — تأكد من أن قالبك يحترم @media (prefers-contrast: more) عبر رفع قيم المتغيرات المعنية.