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

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

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

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

إدراك اللون

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

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

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

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

الإضاءة هي رمز لون فاتح أو داكن، ويتم قياسه بنسب مئوية تتراوح من 0٪ (أسود) إلى 100٪ (أبيض).

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

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

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

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

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

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

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

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

تصيب عمى الألوان الأحمر والأخضر (المعروف باسم عمى الألوان الأحمر) ما بين ‎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 وأداة تحليل تباين الألوان وLeonardo وأداة اختيار الألوان في أدوات مطوّري البرامج من Chrome إطلاعك بسرعة على نسب تباين الألوان وتقديم اقتراحات للمساعدة في إنشاء أكثر مجموعات الألوان والألوان شمولاً.

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

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

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

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

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

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

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

يُفضّل استخدام نظام الألوان

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

قارِن بين الوضعَين الفاتح والداكن.

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

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

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

الاستعلامات عن الوسائط المتعددة الطبقات

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

المقارنة بين اللون والتباين.

التحقق من فهمك

اختبِر معلوماتك حول اللون والتباين