التباين والألوان
ضمان قراءة مثالية لجميع المستخدمين
معايير WCAG EN 301 549
تباين النص
مثال سيء
نص رمادي فاتح على أبيض (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.
المعلومات حسب اللون
مثال سيء
نموذج التسجيل
🔴 أحمر = خطأ، أخضر = صالح
حالة الطلب
مثال جيد
نموذج التسجيل
حالة الطلب
الشرح: يجب ألا تعتمد المعلومات على اللون وحده. أضف دائمًا مؤشرات بصرية إضافية (أيقونات، أنماط، نص).
عمى الألوان وإمكانية الوصول
مثال سيء
رسم بياني للأداء
مثال جيد
رسم بياني للأداء
الشرح: حوالي 8٪ من الرجال و 0.5٪ من النساء يعانون من عمى الألوان. مجموعات الأحمر والأخضر إشكالية بشكل خاص.
مبدل السمات القابل للوصول
مثال سيء
محتوى الصفحة
يتغير لون هذا النص وفقًا للسمة.
بطاقة معلومات
معلومات مهمة للقراءة.
مثال جيد
محتوى الصفحة
يحافظ هذا النص على تباين جيد في جميع السمات.
بطاقة معلومات
معلومات مهمة قابلة للقراءة دائمًا.
الشرح: يجب أن يحافظ مبدل السمات على نسب التباين، والحفاظ على القابلية للقراءة، واحترام تفضيلات نظام المستخدم.
الروابط - التسطير والتعريف
مثال سيء
روابط تعتمد على اللون فقط
إمكانية الوصول إلى الويب ضرورية لإنشاء مواقع شاملة. تعلم المزيد عن إمكانية الوصول يمكن أن تساعدك على فهم أفضل الممارسات. توفر إرشادات WCAG إطارًا شاملاً لتحسين إمكانية الوصول.
قم بزيارة صفحة الموارد الخاصة بنا للعثور على أدوات ودروس تعليمية.
مثال جيد
روابط تعتمد على اللون فقط
إمكانية الوصول إلى الويب ضرورية لإنشاء مواقع شاملة. تعلم المزيد عن إمكانية الوصول يمكن أن تساعدك على فهم أفضل الممارسات. توفر إرشادات WCAG إطارًا شاملاً لتحسين إمكانية الوصول.
قم بزيارة صفحة الموارد الخاصة بنا للعثور على أدوات ودروس تعليمية.
الشرح: يجب أن تكون الروابط قابلة للتعريف دون الاعتماد على اللون وحده. التسطير أو الاختلافات في الأنماط أو المؤشرات البصرية الأخرى ضرورية.