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

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

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

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

إدراك اللون

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

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

تدرج اللون هي طريقة نوعية لوصف اللون، مثل الأحمر أو الأخضر أو الأزرق، حيث يكون لكل تدرج بقعة معينة على نطاق الألوان بقيم تتراوح من 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٪ من الإناث.

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

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

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

لا يشعر الأشخاص المصابون بعمى الألوان (Achromatopsia) أو أحادي اللون أو الأخضر أو الأزرق. ويحاكي فلتر عمى الألوان هذا ما يشبه قد يبدو عليه عمى الألوان.

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

تستخدم معادلة تباين الألوان الضوء النسبي الألوان للمساعدة في تحديد التباين، والذي يمكن أن يتراوح من 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 أداة تحليل تباين الألوان ليوناردو، علبة ألوان أدوات مطوري البرامج في Chrome يمكن أن يخبرك بسرعة نسب تباين الألوان وتقديم اقتراحات للمساعدة لإنشاء أزواج الألوان ولوحات الألوان الأكثر شمولاً.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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