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

نظرة عامة على ثلاث أدوات وتقنيات لاختبار والتحقق من تباين الألوان الذي يسهل الوصول إليه في تصميمك.

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.

أيّ من ثنائيات الألوان هذه تتباين أكثر برأيك؟

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

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

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

Pika (تطبيق macOS)

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

تنزيل Pika

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

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

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

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

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

قارِن بين ألوان الحدود والتعبئة في الرسومات المتجهية:

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

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

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

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

VisBug

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

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

ومن بين الأدوات التي يقدّمها أداة Accessibility Inspect.

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

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

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

فحص عنصر واحد أو أكثر

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

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

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

إذا كان متصفّح Chrome مثبّتًا على جهازك، فلديك العديد من أدوات اختبار التباين:

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

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

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

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

التصحيح التلقائي في "علبة الألوان"

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

إذا لم تكن من الصعب إرضاؤك بشأن الألوان، فإن ميزة التصحيح التلقائي هي طريقة رائعة لتلبية إرشادات إمكانية الوصول وعدم العمل بجد لإنجاز المهمة.

تلميح الفحص

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

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

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

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

اصطدم بالآخرين حتى تتجاوزهم 🎶

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

الخطوات هي كالتالي، ويجب تنفيذها بالترتيب نفسه:

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

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

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

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

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

منارة

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

في ما يلي أمثلة على هذه النتائج:

وحدة تحكّم JS

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

بعد ذلك، افتح لوحة "المشاكل" (Issue) لمعرفة ما إذا تم العثور على أي مشاكل. إذا حدث ذلك، فيمكن أن تبدو هكذا:

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

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

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

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

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

تجربة خوارزمية APCA من الإصدار 3.0 من إرشادات WCAG

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

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

الخاتمة

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