الإجابة المختصرة

تباين الألوان هو الفرق في السطوع بين النص وخلفيته. يطلب المستوى AA في WCAG نسبة 4.5:1 على الأقل للنص العادي، و3:1 للنص الكبير (24 بكسل، أو نحو 19 بكسل بخط عريض) وللأزرار والأيقونات وحدود النماذج. اختبر كل زوج ألوان بأداة فحص التباين، ثم اجعل النص أغمق أو الخلفية أفتح حتى ينجح.

أهم النقاط

  • النص العادي يحتاج 4.5:1، والنص الكبير يحتاج 3:1.
  • الأزرار والأيقونات وحدود الحقول تحتاج 3:1 مقارنة بما يجاورها.
  • النص الرمادي الفاتح على الأبيض هو المذنب الأول.
  • افحص النص فوق الصور على الهاتف أيضًا، حيث تختفي الطبقات الداكنة غالبًا.
  • أصلحه مرة واحدة في نظام التصميم فيُصلح في كل مكان.

وجد تقرير WebAIM Million لعام 2026 نصًا منخفض التباين في 83.9% من أكثر مليون صفحة رئيسية زيارة. يضر ذلك بضعاف البصر والمصابين بعمى الألوان وأصحاب العيون المتقدمة في السن، وبأي شخص يقرأ هاتفه تحت الشمس. والخبر الجيد أن الإصلاح غالبًا بضعة أسطر من CSS.

القواعد في دقيقة

  • 4.5:1 للنص العادي (WCAG 1.4.3، المستوى AA).
  • 3:1 للنص الكبير: 24 بكسل فأكثر، أو نحو 19 بكسل فأكثر بخط عريض.
  • 3:1 للعناصر غير النصية التي تحتاج إلى رؤيتها لاستخدام الصفحة: حواف الأزرار وحدود الحقول والأيقونات ومؤشرات التركيز (WCAG 1.4.11).
  • الشعارات والنصوص الزخرفية البحتة مستثناة.

تتراوح النسبة من 1:1 (أبيض على أبيض) إلى 21:1 (أسود على أبيض). لا يُشترط الأسود الخالص على الأبيض؛ فالرمادي الداكن مثل #333333 على الأبيض يعطي نحو 12.6:1، وهو مقروء جدًا.

كيف تختبر، خطوة بخطوة

  1. اكتب قائمة بأزواج ألوانك

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

  2. اختبر كل زوج

    استخدم أداة مجانية مثل WebAIM Contrast Checker، أو منتقي الألوان في أدوات المطور في كروم أو فايرفوكس، الذي يعرض النسبة ونتيجة النجاح أو الفشل.

  3. أصلح حالات الفشل في الأنماط

    اجعل النص الرمادي أغمق (مثلًا من #999999 إلى #595959 على الأبيض) أو استخدم درجة أعمق من لون علامتك للنص. غيّرها في القالب أو في رموز التصميم لتتحدث في كل مكان.

  4. افحص النص فوق الصور

    أضف طبقة داكنة أو تدرجًا خلف النص فوق الصور، واختبر أفتح جزء في الصورة. افحص على الهاتف، حيث يتغير القص.

  5. افحص الحالات المختلفة

    اختبر حالات التمرير والتركيز والتعطيل والروابط التي زيرت، وكذلك إطار التركيز نفسه، فهو يحتاج 3:1 أيضًا.

  6. افحص لتلتقط الباقي

    شغّل فحصًا مع الفحوص المباشرة في المتصفح لتجد التباين الضعيف الناتج عن الأنماط الفعلية المحسوبة في كل صفحة.

إصلاحات تحافظ على هويتك

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

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

لماذا يرى الفاحص أكثر منك

قد يتغير التباين في كل صفحة: زر أبيض على شعار فاتح، أو نص رمادي في شريط ملفات تعريف الارتباط، أو أداة دردشة من طرف ثالث. يفحص Accessible Nord التباين بطريقتين: في كود الصفحة، وفي متصفحات زوار حقيقيين بعد تحميل أنماطك، فيلتقط مشكلات قد يفوّتها فحص الكود وحده.

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

المصادر

معظم المصادر وثائق رسمية باللغة الإنجليزية.

  1. The WebAIM Million, 2026 report
  2. Understanding WCAG 2.2: Contrast (Minimum) (1.4.3)
  3. Understanding WCAG 2.2: Non-text Contrast (1.4.11)
  4. WebAIM Contrast Checker

آخر مراجعة في .

الأسئلة الشائعة

ما نسبة التباين الجيدة؟

على الأقل 4.5:1 للنص العادي و3:1 للنص الكبير لاستيفاء المستوى AA. وللقراءة الطويلة استهدف نسبة أعلى، نحو 7:1، وهو المستوى AAA.

هل يجب أن يستوفي النص التوضيحي داخل الحقول شروط التباين؟

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

هل الأسود الخالص على الأبيض هو الأفضل؟

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

هذا الدليل معلومات عامة وليس استشارة قانونية. لمعرفة التزاماتك المحددة، استشر محاميًا أو الجهة التنظيمية المعنية.