تطور العمل في إتاحة الألوان

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

هناك ثلاث مستويات من المطابقة حددتها النسخة الثانية من إرشادات الوصول لمحتوى الويب مرتبةً تصاعديًّا: المقياس الأقل هو A، ثم المقياس AA، وأخيرًا المقياس AAA. ويجب على النصوص والصور النصية أن تطابق المقياس AA كحد أدنى.

يتطلب المقياس AA أن تحتوي النصوص والصور النصية على حد أدنى من نسبة تباين الألوان (Contrast Ratio) وهي 1:4.5؛ بمعنى آخر، يجب أن يحتوي اللون الأفتح في زوجٍ ما على استِضْوَاء (Luminance)- وهو مؤشر لمعرفة درجة السطوع التي سيظهر بها اللون- أكثر أربع مرات ونصف من اللون الآخر الداكن. تم حساب نسبة التباين هذه حتى تشمل تحتها أصحاب الرؤية المقبولة، الذين لا يحتاجون إلى الاعتماد على التكنولوجيا المساعدة على تعزيز التباين، بالإضافة إلى الذين لديهم قصور في رؤية الألوان؛ وقد قُصِد بذلك تعويض النقص لديهم في حساسية التباين، والتي غالبًا ما تكون لدى أصحاب نظر 20/40، أي الذين مستوى نظرهم نصف المعدل الطبيعي 20/20.

ويتطلب المقياس AAA أن تكون نسبة التباين 1:7، والتي من شأنها أن توفر تعويضًا لأصحاب نظر 20/80، أي الذين مستوى نظرهم ربع المعدل الطبيعي. أما الذين مستوى نظرهم أقل من ربع المعدل الطبيعي، فيلزمهم الاعتماد على التكنولوجيا المساعدة على تعزيز التباين والقدرات المكبرة.

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

وإذا لزِم الأمر، فيمكن وصف الشعار باستخدام النصوص المعرفة للصور (Alt Attribute)؛ وذلك تسهيلًا على من يستخدم تطبيقًا قارئًا لمحتويات الشاشة. لمزيد من التعلم، راجع تدوينة Julie Grundy، أخصائية الإتاحة، على Simply Accessible، حيث ناقشت أفضل الممارسات حول وصف النصوص المعرفة للصور.

يلعب حجم الخط دورًا بارزًا في تحديد مقدار التباين المطلوب، فالنص الرمادي بقيم 150 للأحمر، 150 للأخضر، و150 للأزرق (RGB 150,150,150) على خلفية بيضاء نقية، يُعدَ مجتازًا للمقياس AA، طالما كُتبت به العناوين الرئيسية بحجم أكبر من 18 نقطة. أما النص الرمادي بقيم 110 للأحمر، 110 للأخضر، و110 للأزرق (RGB 110,110,110) فإنه يجتاز المقياس AA بأي حجم كُتب به، ويُعد متوافقًا مع المقياس AAA إذا كُتبت به العناوين الرئيسية بحجم أكبر من 18 نقطة. وربما يختلف خطان في درجة الوضوح مع أن لهما نفس الحجم؛ وذلك بسبب الاختلاف في نوع النمط المكتوب به، خصوصًا إذا كان النمط دقيق البنية.

يلعب حجم الخط دورًا مهمًا في حساب نسبة التوافق

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

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

لكن هذا ليس صحيحًا؛ فبتجربة برنامج فاحص تباين الألوان (color-contrast checker)، ثبت أن هناك العديد من نسب التوافق المعقولة وتحقيقها سهل، خصوصًا إذا كان المصمم مدركًا للقواعد من البداية؛ فالأمر سيكون محبطًا للغاية إذا كان المصمم يريد تغيير لونٍ ضعيف المستوى إلى لون أكثر إتاحة في مرحلة لاحقة من التصميم، أو بعد أن تم اختيار ألوان العلامة التجارية بالفعل. أما إذا قرر المصمم اختيار الطريق الصعب، فسيجد بعد ذلك أنه غير مقيد على الإطلاق.

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

فاحص التباين

إحدى أدواتي المفضلة هي Lea Verou’s Contrast Ratio ؛ فهي تسمح لك بإدخال رمز للون الخلفية، ورمز للون النص، ثم تحسب لك النِّسب.

أداة Lea Verou’s Contrast Ratio checker لفحص نسبة التباين

إن نسبة التباين تدعم أسماء الألوان، رموز ألوان هيكس (hex color code)، قيم الأحمر والأخضر والأزرق وألفا (RGBA)، قيم التنوع والتشبع والسطوع وألفا (HSLA)، وحتى أنها تدعم مزيجًا من كل منهم، ودعمها لقيم (RGBA) و(HSLA) يعنى أنها تدعم الألوان الشفافة أيضًا، فهي حقًّا أداة مميزة. كما يمكنك بسهولة مشاركة نتائج الفحص عبر نسخ ولصق الرابط؛ إضافة إلى ذلك، يمكنك تعديل الألوان بتغيير القيم في الرابط السلسة (URL string) بدلًا من استخدام حقول الإدخال في الصفحة.

أداة رائعة أخرى هي Jonathan Snook’s Colour Contrast Check، ومن مميزاتها أنها تُظهر لك إذا ما كان مزيج الألوان يمكنه اجتياز كِلَا المقياسين AA وAAA أم لا؟

أداة Jonathan Snook’s Colour Contrast Check لقياس نسبة التباين

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

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

إذا كنت تعمل على تصميم في بدايته، واحتجت لمساعدة في اختيار ألوانٍ إتاحية، فأنصحك بتجربة أداة Color Safe؛ إن هذه الأداة المعتمدة على الويب تساعد المصممين على تجربة واختيار مزيج من الألوان الجاهزة التي تخضع لمقاييس التباين. كبدايةٍ، أدرج لونًا للخلفية، ثم اختر عائلة من الخطوط، وحدد حجم الخط وكثافته؛ وأخيرًا، اختر مستوى التوافق مع (WCAG)، حينها سيقوم البرنامج بإعداد قائمة شاملة من الاقتراحات التي يمكن استخدامها كألوان إتاحية للنص المراد كتابته فوق الخلفية.

نموذج من عمليات بحث برنامج Color Safe لألوان إتاحية متوافقة اعتمادًا على لون الخلفية المختارة

أدوات التعديل

إذا فَشِلتْ مجموعة الألوان التي اخترتها في مطابقة الحد الأدنى لنسبة التباين؛ ففكر في استخدام شيء مثل Tanaguru Contrast Finder لمساعدتك على إيجاد البديل المناسب. هذه الأداة الرائعة تدمج لون المقدمة ولون الخلفية معًا، ثم تقدم مجموعة من الخَيارات الإتاحية المشابهة للألوان الأصلية. من المهم جدًا ملاحظة أن هذه الأداة تعمل بشكل أفضل حين تكون الألوان بالفعل قريبةً لكونها إتاحية، ولكنها فقط تحتاج إلى دَفعة صغيرة. لذلك، ربما لا تزودك الأداة بأية خَيارات على الإطلاق إذا كانت نسب تباين أزواج الألوان منخفضة للغاية.