ليس باللون وحده

01القاعدة وسببها

تنص WCAG 1.4.1 (استخدام اللون، المستوى A) على ألا يكون اللون الوسيلة البصرية الوحيدة لنقل المعلومات أو الإشارة إلى إجراء أو طلب استجابة أو تمييز عنصر.

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

02اقرن اللون بشيء آخر

• الأخطاء والنجاح

  أضف أيقونة ورسالة نصية لا مجرد حد أحمر أو أخضر.

• الروابط في النص

  ضع تحتها خطًا. اللون وحده إشارة ضعيفة داخل الفقرة.

• المخططات

  سمِّ الخطوط مباشرة، واستخدم الأنماط أو أشكال العلامات إلى جانب اللون.

• الحالة والتحديد

  استخدم علامة صح أو تسمية أو تغيير سماكة لإظهار الحالة المحددة.

03أمثلة صغيرة

• حقل مطلوب: أضف كلمة «مطلوب» إلى جانب التسمية الملونة.
• خطأ في نموذج: «خطأ: أدخل بريدًا إلكترونيًا صحيحًا» مع أيقونة، إضافة إلى الإطار الأحمر.
• تقويم: أظهر الأيام المحجوزة بنمط أو تسمية لا بلون تعبئة مختلف فقط.
• تغيّر السعر: استخدم إشارة زائد أو ناقص وكلمة، إضافة إلى الأخضر أو الأحمر.

اسأل نفسك: لو تحوّلت كل الألوان إلى رمادي، هل يبقى المعنى؟

04كيف تختبر

1. اعرض التصميم بتدرجات الرمادي. تتيح ذلك أدوات تصميم كثيرة وأدوات مطوّري المتصفح.
2. استخدم محاكيًا لنقص رؤية الألوان لنوع الأحمر والأخضر، وهو متاح في أدوات مطوّري المتصفح.
3. افحص كل حالة وكل مخطط: هل ما زلت تميّز بين العناصر؟

اللون يظل مفيدًا كإشارة ثانية. الهدف هو التكرار الداعم لا إزالة اللون.

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

• سمِّ السلاسل مباشرة عند نهاية الخط بدل الاعتماد على وسيلة الإيضاح.
• استخدم أنماط خطوط مختلفة (متصل، متقطع) أو أشكال علامات لكل سلسلة.
• قلّل عدد السلاسل وقدّم جدول بيانات كعرض بديل.
• اختر ألوانًا تختلف في الإضاءة لا في الصبغة فقط.

05المصادر

• W3C. Understanding SC 1.4.1 Use of Color. https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html