يمكن أن يبدو النص باللون الرمادي الفاتح على خلفية بيضاء أنيقًا وبسيطًا في لمحة واحدة - ويكون غير قابل للقراءة تمامًا للمستخدمين الذين يعانون من إعاقات بصرية، أو ضوء الشمس القوي على الشاشة، أو مجرد إجهاد العين العادي في نهاية يوم العمل. يعد تباين الألوان أحد أكثر المعايير "تقنية" في إمكانية الوصول - هناك أرقام دقيقة يجب تلبيتها - ولكنه أيضًا أحد أسهل المعايير التي يمكن اختبارها وإصلاحها مسبقًا.

باختصار – ما يغطيه هذا الدليل

  1. ما هي النسب التي يتطلبها WCAG
  2. لماذا يُسمح بالنص الكبير بأقل قدر من التباين
  3. كيفية التحقق من نسبة التباين عمليًا
  4. كيفية اختيار لوحة ألوان يسهل الوصول إليها مسبقًا

ما هي النسب التي يتطلبها WCAG

يحدد WCAG نسبة التباين كرقم بين 1:1 (لا يوجد تباين على الإطلاق - لون متطابق) و21:1 (أقصى تباين ممكن - أسود نقي على أبيض نقي). في المستوى AA (المستوى الإلزامي في معظم الأماكن، بما في ذلك إسرائيل)، يكون المتطلب هو نسبة لا تقل عن 4.5:1 بين النص العادي والخلفية التي تقف وراءه. على مستوى AAA الأكثر صرامة، يرتفع الشرط إلى 7:1.

لماذا يُسمح بالنص الكبير وبتباين أقل

يظل النص الكبير قابلاً للقراءة حتى مع انخفاض التباين، لذلك تحدده WCAG حدًا أسهل: 3:1 عند المستوى AA (بدلاً من 4.5:1)، و4.5:1 عند المستوى AAA (بدلاً من 7:1). يتم تعريف "النص الكبير" على أنه نص بحجم 18 نقطة أو أكبر (حوالي 24 بكسل)، أو 14 نقطة أو أكبر (حوالي 18.7 بكسل) إذا كان غامقًا. على سبيل المثال، يمكن للعناوين الكبيرة أن "تتحمل" تباينًا أقل قليلاً من فقرة النص العادية وتفي بالمتطلبات.

رسم بياني توضيحي مقارنة نسب التباين ثلاثة أمثلة للنص على الخلفية بنسب تباين مختلفة نسبة التباين بين النص والخلفية نموذج للنص 1.8:1 — ✕ فشل نموذج للنص 7.1:1 — ✓ يفي بـ AAA أيضًا نموذج للنص 5.4:1 — ✓ يستوفي المستوى AA النص العادي: على الأقل 4.5:1 · نص كبير (24 بكسل+، أو 18.7 بكسل عريض): 3:1 على الأقل تمنحك أدوات مثل WebAIM Contrast Checker النسبة الدقيقة قبل الانتهاء من لوحة الألوان
ثلاثة أمثلة للنص على الخلفية: نسبة منخفضة جدًا (1.8:1) تفشل حتى في المستوى الأساسي؛ النسبتان الأخريان تلبيان متطلبات AA و AAA، على التوالي.

كيفية التحقق من نسبة التباين عمليًا

ليست هناك حاجة لحسابها يدويًا - تتيح لك الأدوات المجانية مثل WebAIM Contrast Checker إدخال النص ورموز ألوان الخلفية والحصول على النسبة الدقيقة ودرجة النجاح/الرسوب على الفور لكل مستوى. من المفيد التحقق ليس فقط من النص الموجود على خلفية صلبة، ولكن أيضًا النص فوق صور الخلفية أو التدرجات اللونية - حيث يمكن أن يختلف التباين بين مناطق مختلفة من نفس الصورة، لذلك من الأفضل اختبار البقعة الأكثر "إشكالية".

💡 نصيحة عملية

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

كيفية اختيار لوحة الألوان التي يمكن الوصول إليها مسبقًا

الأسلوب الأكثر فعالية هو التحقق من التباين في مرحلة تصميم القالب، وليس في كل مستند على حدة. عند اختيار ألوان العلامة التجارية للعناوين والنص الأساسي والروابط، يجدر التأكيد مسبقًا على أن كل مجموعة نص وخلفية تستخدمها فعليًا تلبي ما لا يقل عن 4.5:1. بهذه الطريقة، فإن كل مستند جديد يتم إنشاؤه من القالب "يرث" تلقائيًا التباين المناسب، بدلاً من التحقق من كل مستند على حدة بعد كتابته بالفعل.

هل تريد معرفة ما إذا كانت المستندات الخاصة بك تلبي متطلبات التباين؟

تقوم أداتنا بفحص تباين الألوان كجزء من الفحص التلقائي لكل ملف PDF على موقعك.

افحص موقعك مجانا ←