فحص التباين وفق WCAG: دليل عملي
نُشر في 2026-07-15
نسبة التباين ليست مجرد خانة امتثال، إنها الفرق بين نص يمكن للناس قراءته ونص لا يستطيعون. إليك كيف تُحسب وماذا تعني الحدود فعليًا.
لماذا يهم التباين
النص الذي لا يتباين بما يكفي مع خلفيته يصعب قراءته على الجميع، ويمكن أن يكون غير قابل للقراءة بالمرة لذوي ضعف البصر أو عمى الألوان. إرشادات إتاحة محتوى الويب (WCAG) تضع نسب تباين دنيا خصيصًا كي يظل النص واضحًا لأوسع نطاق ممكن من القدرات البصرية، والوفاء بها هو تحسين حقيقي لقابلية الاستخدام، وفي كثير من الولايات القضائية، متطلب قانوني للمواقع الموجهة للجمهور.
كيف تُحسب نسبة التباين فعليًا
نسبة التباين هي مقارنة بين السطوع النسبي (السطوع المُدرَك) للون النص ولون الخلفية، تُعبَّر كنسبة من 1:1 (متطابق، بلا تباين على الإطلاق) إلى 21:1 (أسود خالص على أبيض خالص، أقصى تباين ممكن). إنها ليست مقارنة سطوع بسيطة، السطوع يُحسب باستخدام صيغة توزن الأحمر والأخضر والأزرق بشكل مختلف، لأن العين البشرية تُدرك الأخضر أكثر سطوعًا من الأحمر أو الأزرق عند نفس الشدة، وتطبق تصحيح جاما لمراعاة كيفية عرض الشاشات للألوان فعليًا. لست بحاجة لحساب هذا يدويًا، لكن معرفة أن الأمر يتعلق بالسطوع المُدرَك (وليس فقط قيم RGB الخام) تساعد في تفسير بعض النتائج غير البديهية حقًا، مثل سبب فشل بعض الألوان متوسطة الدرجة التي تبدو متمايزة بشكل معقول رغم ذلك.
الحدود الفعلية
يحدد WCAG 2.1 مستويين للمطابقة. AA، وهو المعيار الذي تستهدفه معظم المؤسسات، يتطلب نسبة تباين لا تقل عن 4.5:1 للنص العادي و3:1 للنص الكبير (يُعرَّف بأنه 18 نقطة عادي أو 14 نقطة عريض وأكبر). AAA، وهو مستوى أكثر صرامة، يتطلب 7:1 للنص العادي و4.5:1 للنص الكبير. معظم متطلبات الإتاحة القانونية (مثل ADA في الولايات المتحدة، كما تُفسَّر عبر WCAG، أو معيار EN 301 549 في الاتحاد الأوروبي) تشير إلى AA كخط أساس، بينما يُعامَل AAA عمومًا كهدف طموح أكثر منه متطلبًا صارمًا.
أخطاء التباين الشائعة
النص الرمادي الفاتح على خلفية بيضاء هو الفشل الأكثر شيوعًا على الإطلاق، غالبًا ما يبدو «نظيفًا» و«عصريًا» في نموذج التصميم لكنه يفشل في AA بشدة ويصعب قراءته فعليًا على كثير من المستخدمين. النص التوضيحي داخل حقول النماذج غالبًا ما يكون منخفض التباين للغاية، وبما أنه يختفي بمجرد أن تبدأ الكتابة، غالبًا لا يلاحظ المصممون أنها مشكلة. النص المُركَّب فوق صور أو تدرجات لوني محفوف بالمخاطر لأن نسبة التباين قد تنجح في منطقة من الصورة وتفشل في أخرى، إضافة طبقة لون صلبة أو ظل نص خلف النص حل شائع لذلك. ألوان العلامة التجارية، خاصة لوحات العلامة التجارية الباستيلية أو متوسطة التشبع، غالبًا ما تفشل في متطلبات التباين عند استخدامها كلون للنص وتحتاج إلى نسخة أغمق أو أفتح مخصصة للنص تحديدًا.
كيف تفحص ألوانك الخاصة
اختر لون المقدمة (النص) ولون الخلفية، ثم افحص النسبة الناتجة مقابل حدَّي AA وAAA لحجم النص الذي تستخدمه. إذا فشل مزيج ما، فإن الإصلاح الأكثر موثوقية عادةً هو تغميق لون النص (للخلفيات الفاتحة) أو تفتيحه (للخلفيات الداكنة) حتى يتجاوز الحد، بدلاً من تغيير الخلفية، لأن لون الخلفية غالبًا ما يكون أكثر ارتباطًا بهوية العلامة التجارية من لون النص.