قد تفترض أن الجميع يدرك الألوان أو وضوح النص كما أنت. يمكن أن تعتمد الطريقة التي نتصور بها اللون على بيئتنا (الأضواء المنخفضة أو الساطعة) وقدرات الرؤية لدينا. قد تكون أنت أو المستخدمين من بين ملايين الأشخاص الذين يعانون من عمى الألوان أو ضعف البصر.
ولمساعدة الأشخاص الذين يعانون من إعاقات بصرية مختلفة، أنشأت مجموعة WAI صيغة تباين الألوان لضمان ظهور تباين كافٍ بين النص وخلفيته. عند اتّباع نسب تباين الألوان هذه، يمكن للأشخاص الذين يعانون ضعفًا متوسطًا قراءة النص على الخلفية بدون تحسين التباين بين التكنولوجيا المساعِدة.
لاحظ الفرق في نِسب التباين الموضحة في الشكل 1.
نسبة التباين 4.5:1 هي الحد الأدنى المطلوب الذي تم تحديده في الإصدار 2.0 من إرشادات إتاحة محتوى الويب (WCAG). تم اختيار هذه الحصة لأنها تعوِّض النقص في حساسية التباين التي غالبًا ما يعاني منها المستخدمون الذين يعانون من فقدان البصر، بما يعادل الرؤية 20/40 تقريبًا.
ونؤكد مرة أخرى، أن 4.5:1 هي مجرد الحد الأدنى. لمساعدة المستخدمين الذين يعانون من ضعف البصر أو غيرهم من عمى الألوان، عليك استيفاء المستوى AAA وإنشاء محتوى بنسبة تباين 7:1.
يمكنك التحقّق من تباين الألوان من خلال الاطّلاع على Lighthouse Accessibility تدوين في "أدوات مطوري البرامج".
خوارزمية التباين الحسي المتقدمة
خوارزمية التباين المتقدمة (APCA) هي طريقة لحساب التباين استنادًا إلى الأبحاث الحديثة المتعلّقة بإدراك الألوان.
تعتمد APCA على السياق بشكل أكبر من مستويَي AA وAAA في WCAG.
في هذا النموذج، يتم احتساب التباين بناءً على الميزات التالية:
- الخصائص المكانية (عرض الخط وحجم النص)
- لون النص (فرق الإضاءة الملموس بين النص والخلفية)
- السياق (الضوء المحيطي والبيئة المحيطة والغرض المقصود من النص)
يتضمّن Chrome ميزة تجريبية لاستبدال إرشادات نسبة التباين AA/AAA ببروتوكول APCA.
توصيل المعلومات المهمة بأكثر من اللون
عندما تنقل معلومات مهمة إلى المستخدمين، اعتمد على النص أو النص البديل بالإضافة إلى الإشارات المرئية عند مشاركة المعلومات المهمة. تتضمن الإشارات المرئية الألوان والأنماط والصور ونمط الخط ولغة الاتجاه.
على سبيل المثال، قد يكون لديك نموذج تواصل يشير إلى الإدخالات غير الصالحة من خلال تسطيرها باللون الأحمر. لا يخبر مؤشر اللون هذا قارئ الشاشة أو المستخدمين الذين يعانون من إعاقات في رؤية الألوان أن شيئًا ما لا يعمل. قد يترك المستخدم يتساءل عن سبب عدم عمل إرسال النموذج والاستسلام.
احرص على تنبيه المستخدم بطرق متعددة بالخطأ المحدد. على سبيل المثال، يمكنك إضافة رسالة خطأ للإعلان عن أنّ المُدخل المحدد غير صالح والسبب في ذلك. يمكنك أيضًا إضافة نص مساعدة بشأن الشكل الصحيح للإدخال المناسب.
لا يزال بإمكانك تسطير الإدخال غير الصالح باللون الأحمر، طالما كانت هناك إشارات إضافية غير مرئية.
إذا كنت تعتمد بشكل كبير على استخدام الألوان في واجهتك، يمكنك الاطّلاع على مشاكل التباين في "أدوات مطوري البرامج في Chrome".
زيادة التباين وقلب الألوان
بالنسبة إلى من يعانون ضعفًا في النظر، يمكن لأوضاع التباين العالي أن تسهل التنقل في المحتوى على الصفحة. هناك عدة طرق لإعداد التباين العالي.
يوفّر كل من نظامَي التشغيل macOS وWindows طرقًا لزيادة مستوى التباين في نظام التشغيل.
قد يختار المستخدمون أيضًا قلب ألوان المقدّمة والخلفية (على سبيل المثال على نظام التشغيل macOS)، وهو أمر مفيد بشكل خاص للمواقع الإلكترونية والتطبيقات التي لا توفّر الأوضاع الداكنة.
بصفتك مطوِّرًا، يمكنك إجراء اختبار للتأكّد من أنّ واجهتك لا تزال مرئية وقابلة للاستخدام من خلال تفعيل هذه الإعدادات والتحقّق يدويًا من سهولة الاستخدام.
على سبيل المثال، قد يستخدم شريط التنقل لون خلفية خفيف للإشارة إلى الصفحة التي تم تحديدها. إذا عرضتها في وضع التباين العالي، تختفي هذه الدقة تمامًا ويفهم القارئ الصفحة النشطة.
إذا وصلت إلى المستوى AA أو المستوى الأعلى من التباين، من المفترض أن يبقى المحتوى الخاص بك يعمل كما هو متوقع عند قلب الألوان أو تباين الألوان فيها. ومع ذلك، لا يزال الأمر يستحق الاختبار للتأكد من أن التجربة كما هو متوقع.