اللون والتباين

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

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

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

إدراك الألوان

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

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

تدرّج اللون هو طريقة نوعية لوصف لون، مثل الأحمر أو الأخضر أو الأزرق، حيث يكون لكل تدرّج لون موضع محدّد في طيف الألوان بقيم تتراوح بين 0 و360، مع الأحمر عند 0 والأخضر عند 120 والأزرق عند 240.

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

السطوع هو درجة اللون الفاتحة أو الداكنة، ويتم قياسه بنسب مئوية تتراوح بين 0% (أسود) و100% (أبيض).

قياس تباين الألوان

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

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

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

عمى اللون الأخضر

يصيب عمى الألوان الثنائي (المعروف باسم عمى الأخضر) من% 1 إلى% 5 من الذكور، ومن% 0.1 إلى% 0.35 من الإناث.

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

عمى اللون الأحمر

يصيب عمى الألوان الأحمر (المعروف باسم Protanopia) %1.01 إلى% 1.08 من الذكور و% 0.02 إلى% 0.03 من الإناث.

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

عمى الألوان التام أو عمى الألوان الأحادي

عمى الألوان الكامل (أو عمى الألوان الأحادي) هو حالة نادرة جدًا.

لا يمكن للأشخاص المصابين بعمى الألوان التام أو أحادي اللون رؤية الضوء الأحمر أو الأخضر أو الأزرق. يحاكي فلتر عَمى الألوان هذا الشكل الذي قد يبدو عليه هذا النوع من عَمى الألوان.

حساب تباين الألوان

تستخدِم صيغة تباين الألوان السطوع النسبي للألوان للمساعدة في تحديد التباين الذي يمكن أن يتراوح بين 1 و21. وغالبًا ما يتم اختصار هذه الصيغة إلى [color value]:1. على سبيل المثال، يحقّق اللون الأسود النقي مع اللون الأبيض النقي أعلى نسبة تباين ألوان، وهي 21:1.

(L1 + 0.05) / (L2 + 0.05)
L1 is the relative luminance of the lighter color
L2 is the relative luminance of the darker colors

يجب أن تبلغ نسبة تباين الألوان في النص العادي الحجم، بما في ذلك صور النص، 4.5:1 لاستيفاء الحد الأدنى من متطلبات إرشادات إتاحة محتوى الويب (WCAG) المتعلقة بالألوان. يجب أن تبلغ نسبة تباين الألوان في النصوص الكبيرة الحجم والرموز الأساسية 3:1. يتميّز النص الكبير الحجم بأنّه يبلغ 18 نقطة / 24 بكسل على الأقل أو 14 نقطة/18.5 بكسل مع تنسيق غامق. يُستثنى من متطلبات تباين الألوان هذه الشعارات والعناصر الزخرفية.

لحسن الحظ، لا حاجة إلى مهارات رياضية متقدمة، إذ تتوفّر العديد من الأدوات التي تجري عمليات حساب تباين الألوان نيابةً عنك. يمكن لأدوات مثل Adobe Color وColor Contrast Analyzer وLeonardo وأداة اختيار الألوان في "أدوات مطوّري البرامج" من Chrome أن تخبرك بسرعة بنسب تباين الألوان وتقدّم اقتراحات للمساعدة في إنشاء أكثر مجموعات ولوحات الألوان شمولاً.

استخدام اللون

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

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

تُعدّ مراجعة منتجاتك الرقمية بالتدرّج الرمادي طريقة جيدة لرصد المشاكل المحتملة في الألوان بسرعة.

طلبات الاستعلام عن الوسائط التي تركّز على الألوان

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

على سبيل المثال، باستخدام الاستعلام عن الوسائط @prefers-color-scheme، يمكنك إنشاء مظهر داكن قد يكون مفيدًا للأشخاص الذين يعانون رهاب الضوء أو حساسية الضوء. يمكنك أيضًا إنشاء مظهر عالي التباين باستخدام @prefers-contrast، الذي يتيح استخدام التطبيق للأشخاص الذين يعانون من قصور في رؤية الألوان وحساسية التباين.

نظام الألوان المفضّل

يتيح الاستعلام عن الوسائط @prefers-color-scheme للمستخدمين اختيار إصدار ذي مظهر فاتح أو داكن من الموقع الإلكتروني أو التطبيق الذي يزورونه. يمكنك الاطّلاع على هذا التغيير في المظهر من خلال تغيير إعدادات المظهر الفاتح أو الداكن والانتقال إلى متصفّح يتيح الاستعلام عن الوسائط هذا. راجِع تعليمات Mac وWindows المتعلّقة بالوضع الداكن.

مقارنة الوضعَين الفاتح والداكن

تفضيل التباين

يتحقّق الاستعلام عن الوسائط @prefers-contrast من إعدادات نظام التشغيل لدى المستخدم لمعرفة ما إذا كان وضع التباين العالي مفعَّلاً أو غير مفعَّل. يمكنك ملاحظة تغيير المظهر هذا من خلال تغيير إعدادات التفضيلات الخاصة بالتباين والانتقال إلى متصفّح يتيح الاستعلام عن الوسائط هذا (إعدادات وضع التباين في Mac وWindows).

مقارنة بين التباين العادي والتباين العالي

الاستعلامات عن الوسائط في الطبقات

يمكنك استخدام طلبات بحث متعددة خاصة بالوسائط تركّز على الألوان لمنح المستخدمين المزيد من الخيارات. في هذا المثال، جمعنا @prefers-color-scheme و@prefers-contrast معًا.

قارِن بين اللون والتباين.