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

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

لنفترض أن لديك نصًا على خلفية فاتحة، مثل ما يلي:

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

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

WCAG وتباين الألوان

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

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

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

يتم تسجيل نسبة تباين أعلى برقم أعلى، مثل 4.5 أو 7 بدلاً من 3. للتعرف أكثر على جدول النتائج، راجع أداة التحقق من التباين من Polypane.

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

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

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

Pika (تطبيق macOS)

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

تنزيل Pika

.

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

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

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

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

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

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

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

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

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

VisBug

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

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

أداة فحص إمكانية الوصول هي أحد عروض أدواتها.

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

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

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

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

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

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

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

• أداة اختيار الألوان
• تلميح الفحص
• نظرة عامة حول خدمة مقارنة الأسعار (CSS)
• Lighthouse
• وحدة تحكُّم JavaScript
• أدوات محاكاة عمى الألوان
• محاكاة تباين ألوان النظام
• تجربة APCA في WCAG 3.0

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

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

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

التصحيح التلقائي منتقي الألوان

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

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

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

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

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

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

التصادم 'حتى تتمكّن من اجتياز 💡

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

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

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

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

نظرة عامة حول خدمة مقارنة الأسعار (CSS)

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

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

منارة

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

إليك ما يمكن أن تبدو عليه هذه النتائج:

وحدة تحكم JavaScript

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

ثم افتح جزء المشكلة ومعرفة ما إذا كان قد تم اكتشاف أي اكتشافات أم لا. إذا كان الأمر كذلك، فيمكن أن تبدو كما يلي:

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

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

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

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

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

تجربة WCAG 3.0 APCA

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

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

الخلاصة

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