اختبار تباين الألوان لتصميم الويب

نظرة عامة على ثلاث أدوات وأساليب لاختبار التباين بين الألوان في تصميمك والتأكّد من أنّه سهل الاستخدام

Adam Argyle

Charlie Gleason

لنفترض أنّ لديك بعض النصوص على خلفية فاتحة، مثل هذا:

على الرغم من أنّ جميع الأمثلة قد تكون قابلة للقراءة بالنسبة إليك، إلا أنّ الأمر ليس كذلك بالنسبة إلى الجميع.

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

معايير WCAG وتباين الألوان

توفّر مبادرة إمكانية الوصول إلى الويب التابعة لـ W3C استراتيجيات ومعايير وموارد لضمان توفّر الإنترنت لأكبر عدد ممكن من المستخدمين. تُعرف الإرشادات التي تستند إليها هذه المعايير باسم إرشادات إتاحة محتوى الويب (WCAG). يتناول أحدث إصدار WCAG 2.1 أحد متطلبات إتاحة الاستخدام المهمة، وهو الحد الأدنى من التباين.

يتم وصف العلاقة بين لونَين في معيار WCAG 2.1 من خلال نسبتَي تباينهما، أي العدد الذي تحصل عليه عند مقارنة شدّة الإضاءة للونَين. الشدة الضوئية هي طريقة لوصف مدى قرب لون معيّن من الأسود (0%) أو الأبيض (100%). تحدِّد إرشادات إتاحة محتوى الويب (WCAG) بعض القواعد وخوارزميات الحساب حول نسبة التباين التي يجب أن تكون عليها الشاشة لكي يكون الويب متاحًا للجميع. ومع ذلك، هناك مشاكل معروفة في هذا الحساب. في النهاية، سيتم اعتماد طريقة أكثر موثوقية، ولكن، في الوقت الحالي، إرشادات إتاحة WCAG هي أفضل ما لدينا.

ما هي القواعد؟

	AA	AAA
النص الأساسي (< 24 بكسل)	4.5	7
نص كبير (> 24 بكسل)	3	4.5
واجهة المستخدم (الأيقونات والرسوم البيانية وما إلى ذلك)	3	غير محدّد

يتم تسجيل نسبة تباين أعلى برقم أعلى، مثل 4.5 أو 7 بدلاً من 3. للتعرّف أكثر على جدول النقاط، يمكنك الاطّلاع على أداة Polypane's Contrast Checker.

أيّ من هذه الألوان المتناسقة ترى أنّها أكثر تباينًا؟

اختبار التباين بين الألوان

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

1. Pika
   تطبيق MacOS، يتميز بقدرته الفريدة على عرض تباين أي ألوان على الشاشة بأكملها، والألوان على التدرجات، والألوان الشفافة، إلى جانب أشياء أخرى. نية الشراء واضحة، وفي هذه الحالة يختار المستخدمون يدويًا وحدات البكسل لمقارنتها. ميزة أقل قليلاً برمجة مع زيادة كبيرة في الميزات
2. VisBug
   إضافة متوافقة مع جميع المتصفحات، ويمكنها بشكل فريد عرض أكثر من طبقة تداخل لتحسين التباين في الوقت نفسه، ولكنّها لا يمكنها أحيانًا رصد المحتوى المقصود، مثل "أدوات المطوّر".
3. أدوات مطوّري البرامج في Chrome
   تم دمج "أدوات مطوّري البرامج" في Chrome وهي مزوّدة بطرق مختلفة لفحص مشاكل الألوان وتصحيحها وتصحيح أخطاءها، ولكنّها تواجه عيوبًا عند فحص الألوان المموّهة والألوان شبه الشفافة، وفي بعض الأحيان لا يمكنها رصد المحتوى المقصود.

Pika (تطبيق macOS)

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

تنزيل تطبيق Pika

ملاحظة: تتوفّر أداة Pika لنظام التشغيل macOS فقط، أما لأجهزة الكمبيوتر، فتتوفّر أداة PowerToys التي تتضمّن أداة اختيار الألوان.

ويعني ذلك أيضًا أنّ تجربة استخدام Pika تختلف عن DevTools أو VisBug. يبذل كلّ من DevTools وVisBug قصارى جهدهما لعرض ألوان النص والخلفية من عنصر DOM للمتصفح، في حين يتم اختيار الألوان التي يقارنها Pika يدويًا من أي نقطة على الشاشة. يمنحك هذا مزيدًا من التحكّم في Pika، ويفتح بعض حالات الاستخدام الإضافية:

• مقارنة أي لونين بغض النظر عما إذا كانا في المتصفح أم لا - إذا كان بإمكانك رؤيته على الشاشة، يمكنك اختباره.
• مقارنة الألوان مع الشفافية
• مقارنة الألوان ضمن التدرجات
• مقارنة الألوان التي تستخدم أوضاع المزج، مثل وضع المزج في CSS

مقارنة أي لونَين

مقارنة النص بلون الخلفية:

مقارنة ألوان الخط والتعبئة لرسومات المتجه:

مقارنة الألوان مع الشفافية

قارِن لون النص بمجموعة متنوعة من وحدات البكسل لعيّنات الخلفية. في ما يلي، يتم استخدام أخفّ shade من تأثير الزجاج المموّه كلون المقارنة في الخلفية.

مقارنة الألوان باستخدام التدرجات

قارِن النص على صورة متدرجة أو على صورة. في ما يلي مقارنة الحرف L من "Lasso" باللون الأزرق الفاتح في الصورة:

VisBug

VisBug هي أداة مستوحاة من FireBug تتيح للمصممين والمطورين فحص تصميم المواقع الإلكترونية وتصحيحها والتعامل معها بشكل مرئي. ومن المفترض أن يكون استخدامها أسهل من "أدوات مطوّري البرامج في Chrome" من خلال محاكاة واجهة مستخدم وتجربة مستخدم أدوات التصميم التي عرفها المستخدمون وأحبّوا استخدامها.

جرِّب VisBug أو ثبِّته على Chrome أو Firefox أو Edge أو Brave أو Safari .

ومن بين الأدوات التي يوفّرها، أداة "فحص إمكانية الوصول".

الفحص على جميع المتصفحات (وحتى على الأجهزة الجوّالة)

بعد النقر على أداة "فحص تسهيل الاستخدام"، سيتم إدراج معلومات تسهيل الاستخدام في التلميح بأي عنصر يشير إليه المستخدم أو ينتقل إليه باستخدام لوحة المفاتيح. تتضمّن هذه التلميحة مقارنةً للألوان بين لونَي المقدّمة والخلفية المكتشفَين.

ملاحظة: إنّ واجهة مستخدم تباين الألوان في VisBug مستوحاة من تصميم Pika الرائع.

فحص منتج واحد أو عدة منتجات

يمكن لأداة DevTools الاطّلاع على تركيبة ألوان واحدة أو الحصول على تقرير عن كل تركيبات الألوان في الصفحة، ولكنّ VisBug توفّر حلًا وسطًا جيدًا من خلال السماح بتركيبات ألوان متعددة. انقر على عنصر وسيظل التلميح معروضًا. اضغط مع الاستمرار على مفتاح Shift واستمر في النقر على العناصر الأخرى، وستبقى كل التلميحات في مكانها:

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

أدوات مطوري البرامج في Chrome

إذا كان Chrome مثبّتًا، يكون لديك العديد من أدوات اختبار التباين:

• علبة الألوان
• تلميح الفحص
• نظرة عامة حول CSS
• Lighthouse
• وحدة تحكّم JavaScript
• أدوات محاكاة قصر النظر في الألوان
• محاكاة إعدادات التباين اللوني المفضّلة للنظام
• تجربة APCA وفقًا لمعيار WCAG 3.0

علبة الألوان في "أدوات مطوري البرامج في Chrome"

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

في المثال التالي، يتم فتح أداة اختيار الألوان لقيمة لون موقع مخصّص. تم تسجيل نتيجة نسبة التباين على أنّها 15.79، وتظهر عليها علامتا اختيار خضراوتان، ما يشير إلى أنّ النتيجة تستوفي متطلبات AA وAAA في إرشادات WCAG 2.1:

التصحيح التلقائي لأداة اختيار الألوان

من المفيد الاطّلاع على النتيجة أثناء اختيار الألوان، ولكن تتضمّن "أدوات مطوّري البرامج في Chrome" ميزة إضافية للتصحيح التلقائي. عندما يبلغ منتقي الألوان عن نتيجة تباين ألوان تعذّر الوصول إليها، يمكن توسيعها للكشف عن أهداف درجة AA وAAA، بالإضافة إلى أداة قطارة العين. بجانب AA وAAA، تظهر عيّنات ألوان ورمز إعادة تحميل. عند النقر على الرمز، سيتم العثور على أقرب لون مقبول لك:

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

تلميح بشأن الفحص

تتضمّن أداة اختيار العناصر ميزة خاصة أثناء تمرير مؤشر الماوس فوق الصفحة، وهي تعرض معلومات عامة عن الخط واللون وإمكانية الاستخدام. أداة تحديد العناصر هي الأيقونة الموجودة على اليسار في لقطة الشاشة التالية. إنه المربع الذي يحتوي على مؤشر سهم فوق الزاوية اليمنى السفلية. يمكن أيضًا اختياره باستخدام مفتاح الاختصار Control+Shift+C (أو Command+Shift+C على نظام التشغيل MacOS).

بعد تفعيل الرمز، سيتحول لون الرمز إلى اللون الأزرق، ويشير إلى أي محتوى في الصفحة، وسيتم عرض تلميح الفحص السريع التالي:

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

ملاحظة: تم استلهام هذه الأداة ونمط التفاعل من تجربة المستخدم في VisBug.

Bump bump 'til you pass 🎶

غالبًا ما أفحص إقران اللون بأداة الفحص السريع هذه وأجده أقل من تمرير النسبة المطلوبة. بدلاً من استخدام ميزة التصحيح التلقائي أداة اختيار الألوان (لأنّني من الأشخاص المتطلبين)، أضبط قنوات الألوان في CSS وأراقبها إلى أن أحصل على النسبة التي أحتاجها. أُطلق على هذه العملية اسم "التحسين المستمر"، لأنّني أُجري تعديلات على أرقام قنوات الألوان إلى أن تجتاز إرشادات إتاحة المحتوى على الويب 2.1.

الخطوات هي على النحو التالي، ويجب تنفيذها بالترتيب الدقيق:

1. اضبط تركيز لوحة المفاتيح داخل لون في لوحة "الأنماط".
2. فعِّل أداة فحص العناصر باستخدام اختصار لوحة المفاتيح Control+Shift+C (أو Command+Shift+C على نظام التشغيل MacOS).
3. مرِّر مؤشر الماوس فوق هدف.
4. اضغط على مفتاح السهم المتّجه للأعلى أو للأسفل على لوحة المفاتيح لتغيير الأرقام في قيمة اللون.

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

نظرة عامة حول CSS

حتى الآن، كانت "أدوات مطوّري البرامج في Chrome" توفّر طرقًا للاطّلاع على تنسيق لون واحد في كل مرة، ولكن يمكن لمحة CSS الزحف إلى صفحتك بالكامل وعرض جميع التنسيقات التي يتعذّر الوصول إليها في آنٍ واحد:

يمكنك الاطّلاع على مزيد من المعلومات عن هذه الميزة في هذا المنشور نظرة عامة على CSS: تحديد التحسينات المحتمَلة على CSS أو مشاهدة Jecelyn Yeen على YouTube في سلسلة نصائح DevTools التي تشرح كيفية تحديد التحسينات المحتمَلة على CSS باستخدام لوحة CSS Overview (نظرة عامة على CSS).

منارة

Lighthouse هي أداة تدقيق أخرى في "أدوات مطوّري البرامج في Chrome". ويمكنه الزحف إلى صفحتك والإبلاغ عن مجموعات الألوان التي لا يمكن الوصول إليها. ويعرض التطبيق لقطات شاشة صغيرة لكل تنسيق ألوان لكي تتمكّن من مراجعته وتحديد ما إذا كان مقبولًا أو مرفوضًا. وستؤثّر أي مجموعات تؤدي إلى ظهور أخطاء سلبًا في نتيجة Lighthouse.

في ما يلي الشكل الذي يمكن أن تظهر به تلك النتائج:

وحدة تحكّم JavaScript

قد لا تكون جميع الأدوات المُدرَجة حتى الآن متاحة في بلدك. ربما مكانك (طوال اليوم) هو JavaScript. إليك تجربة يمكنك تجربتها. يمكن لجزء "المشاكل" في وحدة التحكم الإبلاغ باستمرار عن أي مشاكل في إمكانية الوصول إلى تباين الألوان أثناء إنشائها. فعِّل الميزة في الإعدادات > التجارب، كما هو موضّح في ما يلي:

بعد ذلك، افتح لوحة "المشكلة" لمعرفة ما إذا تم رصد أي مشاكل. إذا كان الأمر كذلك، يمكن أن تبدو كما يلي:

محاكاة عمى الألوان

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

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

محاكاة الإعدادات المفضّلة للنظام في ما يتعلّق بتباين الألوان

يغيّر المستخدمون بشكل متزايد إعدادات التباين في نظام التشغيل، ما يتيح لهم طلب تخصيص التباين بشكل أقل أو أكثر في واجهة المستخدم. يمكن لصفحات الأنماط المتتالية (CSS) الاستفادة من هذا الإعداد، تمامًا كما يمكنها الاستفادة من الإعدادات المفضّلة للموضوع المشرق أو الداكن. توفّر أدوات مطوّري البرامج في Chrome إمكانية محاكاة هذا الخيار المفضّل كي تتمكّن التصاميم من اختبار طلب المستخدم والتكيّف معه بدون تبديل الإعداد من النظام.

تجربة APCA وفقًا لـ WCAG 3.0

يمكنك أيضًا تجربة اختبار مجموعات الألوان باستخدام نظام تقييم تناسب الألوان المُعترَف به experimental APCA. يمكن تفعيل هذه الميزة من خلال الانتقال إلى الإعدادات > التجارب، وهي تستبدل نظام نسبة WCAG 2.1 بأحد أنظمة فحص التباين الأحدث والمحسّن، ما يتيح لك معاينة نتائجه أثناء العمل على تحسين المحتوى ليصبح متوافقًا مع أحد المعايير.

بعد تفعيل هذه الميزة، استخدِم التلميح الخاص بفحص النقاط أو أداة اختيار الألوان للاطّلاع على نتيجة مطابقة الألوان والتحقّق مما إذا كانت تلبي المتطلبات التالية:

الخاتمة

تباين الألوان هو جزء مهم من لغز سهولة الوصول على الويب، والتزامه بهذا يجعل الويب أكثر قابلية للاستخدام لأكبر عدد من الأشخاص في المواقف الأكثر تنوعًا. نأمل أن تساعدك هذه الأدوات الثلاث في الشعور بالتحرّر عند اختيار ألوان رائعة.