معايير WCAG EN 301 549

4.5:1نص عادي - نسبة التباين الدنياEN 301 549 / WCAG AA
3:1نص كبير - نسبة التباين الدنيا18pt+ أو 14pt+ عريض

تباين النص

مثال سيء

نص رمادي فاتح على أبيض (2.2:1) - فشل

Ratio: 2.2:1

نص رمادي متوسط على أبيض (3.8:1) - فشل

Ratio: 3.8:1

نص أصفر على أبيض (1.9:1) - فشل

Ratio: 1.9:1

برتقالي على أحمر (1.2:1) - فشل

Ratio: 1.2:1

رمادي داكن على خلفية سوداء (2.5:1) - فشل

Ratio: 2.5:1

أزرق على خلفية داكنة (1.8:1) - فشل

Ratio: 1.8:1

مثال جيد

نص رمادي داكن على أبيض (7.0:1) - نجاح AAA

Ratio: 7.0:1

نص أسود على أبيض (21:1) - نجاح AAA

Ratio: 21:1

نص أزرق داكن على أبيض (5.9:1) - نجاح AA

Ratio: 5.9:1

أبيض على أزرق داكن (8.6:1) - نجاح AAA

Ratio: 8.6:1

أبيض على خلفية سوداء (21:1) - نجاح AAA

Ratio: 21:1

أصفر على خلفية داكنة (12.3:1) - نجاح AAA

Ratio: 12.3:1

الشرح: تتطلب نسبة التباين WCAG AA حدًا أدنى قدره 4.5:1 للنص العادي و 3:1 للنص الكبير (18pt+ أو 14pt+ عريض). مستوى AAA أكثر صرامة مع 7:1 و 4.5:1.

المعلومات حسب اللون

مثال سيء

نموذج التسجيل

🔴 أحمر = خطأ، أخضر = صالح

حالة الطلب

#1234
#1235
#1236

مثال جيد

نموذج التسجيل

❌ يجب أن يحتوي الاسم على 3 أحرف على الأقل
✅ بريد إلكتروني صالح
❌ يجب أن تحتوي كلمة المرور على 8 أحرف على الأقل

حالة الطلب

#1234 قيد الانتظار
#1235 جارٍ المعالجة
#1236 تم التسليم

الشرح: يجب ألا تعتمد المعلومات على اللون وحده. أضف دائمًا مؤشرات بصرية إضافية (أيقونات، أنماط، نص).

عمى الألوان وإمكانية الوصول

مثال سيء

رسم بياني للأداء

الفشل النجاح
يناير
فبراير
مارس

مثال جيد

رسم بياني للأداء

الفشل النجاح
يناير
فبراير
مارس

الشرح: حوالي 8٪ من الرجال و 0.5٪ من النساء يعانون من عمى الألوان. مجموعات الأحمر والأخضر إشكالية بشكل خاص.

مبدل السمات القابل للوصول

مثال سيء

☀️
🌙
محتوى الصفحة

يتغير لون هذا النص وفقًا للسمة.

بطاقة معلومات

معلومات مهمة للقراءة.

مثال جيد

اختر السمة
محتوى الصفحة

يحافظ هذا النص على تباين جيد في جميع السمات.

بطاقة معلومات

معلومات مهمة قابلة للقراءة دائمًا.

الشرح: يجب أن يحافظ مبدل السمات على نسب التباين، والحفاظ على القابلية للقراءة، واحترام تفضيلات نظام المستخدم.

الروابط - التسطير والتعريف

مثال سيء

مثال جيد

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