إذا كانت لديك رؤية جيدة، قد تفترض أن كل شخص يدرك الألوان أو وضوح النص، كما تفعل تمامًا. بالطبع، ليس الأمر كذلك. كما قد تتخيل، فإن بعض مجموعات الألوان التي يمكن لبعض الأشخاص قراءتها جيدًا تكون صعبة أو مستحيلة للآخرين. يحدث هذا عادةً بسبب تباين الألوان، والعلاقة بين سطوع ألوان المقدمة والخلفية. عندما تكون الألوان متشابهة، تكون نسبة التباين منخفضة، وعندما تكون أكثر اختلافًا، تكون نسبة التباين أعلى.
تقترح إرشادات WebAIM نسبة تباين AA (بحدّ أدنى) تبلغ 4.5:1 لكل النص. هناك استثناءات للنص الكبير جدًا (أكبر من 120-150% من النص الأساسي الافتراضي)، والتي يمكن أن تنخفض نسبتها إلى 3:1. لاحظ الفرق في نسب التباين الموضحة هنا:
تم اختيار نسبة التباين 4.5:1 للمستوى AA لأنه يعوض النقص في حساسية التباين التي يواجهها عادةً المستخدمون الذين يعانون من فقدان البصر يعادل الرؤية 20/40 تقريبًا. يشيع الإبلاغ عن 20/40 على أنها الحدة البصرية النموذجية للأشخاص في سن 80 عامًا تقريبًا. بالنسبة للمستخدمين الذين يعانون من إعاقات بصرية أو قصور في الألوان، يمكننا زيادة التباين إلى 7:1 لنص النص.
يمكنك استخدام "التدقيق في تسهيل الاستخدام" في Lighthouse للتحقق من تباين الألوان. لتشغيل التقرير:
- افتح "أدوات مطوري البرامج".
- انقر على عمليات التدقيق.
- اختَر إمكانية الوصول.
يتضمّن Chrome أيضًا ميزة تجريبية لمساعدتك في رصد كل النص المنخفض التباين على صفحتك. يمكنك أيضًا استخدام اقتراحات الألوان التي يمكن الوصول إليها لإصلاح النص المنخفض التباين.
للحصول على تقرير أكثر اكتمالاً، ثبِّت إضافة إحصاءات تسهيل الاستخدام. وتتضمن تقارير Fastpass تفاصيل حول أي عناصر تفشل في عمليات فحص تباين الألوان.
خوارزمية التباين المتقدمة (APCA)
خوارزمية التباين المتقدمة (APCA) هي طريقة جديدة لحساب التباين استنادًا إلى الأبحاث الحديثة المتعلّقة بإدراك الألوان.
تعتمد APCA على السياق بشكل أكبر مقارنةً بإرشادات AA وAAA.
ويتم احتساب التباين استنادًا إلى الميزات التالية:
- الخصائص المكانية (عرض الخط وحجم النص)
- لون النص (فرق الإضاءة الملموس بين النص والخلفية)
- السياق (الضوء المحيطي والبيئة المحيطة والغرض المقصود من النص)
يتضمّن Chrome ميزة تجريبية لاستبدال إرشادات نسبة التباين AA/AAA ببروتوكول APCA.
يجب عدم نقل المعلومات باستخدام الألوان فقط.
هناك ما يقرب من 320 مليون شخص في جميع أنحاء العالم يعانون من قصور في رؤية الألوان. حوالي 1 من كل 12 رجلاً وامرأة واحدة من بين كل 200 امرأة يعانيان من عمى الألوان، ما يعني أن حوالي خمسة بالمائة من المستخدمين لن يجربوا موقعك بالطريقة التي تريدها. الاعتماد على اللون لنقل المعلومات يدفع هذا الرقم إلى مستويات غير مقبولة.
على سبيل المثال، في نموذج إدخال، قد يتم تسطير رقم الهاتف باللون الأحمر لإظهار أنه غير صالح. إلى مستخدم يعاني من عجز في اللون أو قارئ الشاشة، يتم نقل هذه المعلومات بشكل سيئ أو لا يتم نقلها على الإطلاق. لهذا السبب، يجب أن تحاول دائمًا توفير طرق متعددة للمستخدم للوصول إلى المعلومات الهامة.
تنص قائمة تحقق WebAIM في القسم 1.4.1 على أنّه "يجب عدم استخدام اللون باعتباره الطريقة الوحيدة لنقل المحتوى أو
لتمييز العناصر المرئية". ويشير أيضًا إلى أنه "لا يجب استخدام اللون وحده
للتمييز بين الروابط والنص المحيط" ما لم تلبي متطلبات تباين معينة. بدلاً من ذلك، تقترح قائمة التحقّق إضافة مؤشر إضافي، مثل شرطة سفلية (باستخدام سمة text-decoration في CSS) للإشارة إلى أنّ الرابط نشط.
تتمثل إحدى الطرق الأساسية لإصلاح المثال السابق في إضافة رسالة إضافية إلى الحقل، للإعلان عن أنها غير صالحة وسبب ذلك.
عند إنشاء تطبيق، ضع هذه الأنواع من الأشياء في الاعتبار وانتبه من المناطق التي قد تعتمد فيها بشكل كبير على اللون لنقل معلومات مهمة.
إذا كنت مهتمًا بمعرفة كيف يبدو موقعك الإلكتروني للمستخدمين المختلفين أو إذا كنت تعتمد بشكل كبير على استخدام الألوان في واجهة المستخدم، يمكنك استخدام "أدوات مطوري البرامج" لمحاكاة أشكال مختلفة من العجز البصري. يشتمل Chrome على ميزة محاكاة قصور النظر. للوصول إليها، افتح "أدوات مطوري البرامج" ثم افتح علامة التبويب العرض في "الدرج". من هناك، يمكنك محاكاة أوجه القصور في الألوان التالية:
- عمى اللون الأحمر: عدم القدرة على رؤية أي ضوء أحمر.
- عمى اللون الأخضر: عدم القدرة على رؤية أي ضوء أخضر.
- عمى اللون الأزرق: عدم القدرة على رؤية أي ضوء أزرق.
- عمى اللون الرمادي: عدم القدرة على رؤية أي لون باستثناء الظلال الرمادية (نادرة للغاية).
وضع التباين العالي
يتيح وضع التباين العالي للمستخدم قلب ألوان المقدّمة والخلفية، مما يساعد غالبًا في إبراز النص بشكل أفضل. بالنسبة للأشخاص الذين يعانون من ضعف في النظر، يمكن أن يسهل وضع التباين العالي التنقل في المحتوى على الصفحة. هناك عدة طرق للحصول على إعداد عالي التباين على جهازك:
توفر أنظمة التشغيل مثل Mac OSX وWindows أوضاعًا عالية التباين يمكن تمكينها لكل شيء على مستوى النظام.
ومن التمارين المفيدة تفعيل إعدادات التباين العالي والتحقق من أن كل واجهة المستخدم في تطبيقك لا تزال مرئية وقابلة للاستخدام.
على سبيل المثال، قد يستخدم شريط التنقل لون خلفية خفيف للإشارة إلى الصفحة التي تم تحديدها. فعند عرضها على شكل إضافة عالية التباين، ستختفي هذه التفاصيل الدقيقة تمامًا، وبالتالي سيتعرّف القارئ على الصفحة النشطة.
وبالمثل، في المثال السابق، قد يتم عرض التسطير الأحمر على حقل رقم الهاتف غير الصالح بلون أزرق وأخضر يصعب تمييزه.
إذا كنت تحقق نسب التباين التي تم تناولها سابقًا، فيُفترض أن تكون على ما يرام عندما يتعلق الأمر بدعم وضع التباين العالي. ولكن لمزيد من راحة البال، يمكنك تثبيت إضافة Chrome ذات التباين العالي وإعادة زيارة صفحتك مرة واحدة للتأكّد من أنّ كل الأمور تعمل على النحو المطلوب.