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

هل حاولت من قبل قراءة النص على الشاشة ووجدت صعوبة في قراءته بسبب نظام الألوان أو واجهت صعوبة في رؤية الشاشة في بيئة ساطعة أو منخفضة الإضاءة؟ أو ربما أنت شخص يعاني من مشكلة دائمة في رؤية الألوان، مثل 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 وأداة تحليل تباين الألوان وLeolardo وأداة اختيار الألوان DevTools من Chrome يمكنها أن تخبرك بسرعة بنسب تباين الألوان وتقدّم اقتراحات للمساعدة في إنشاء أزواج الألوان ولوحات الألوان الأكثر شمولاً.

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

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

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

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

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

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

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

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

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

يفضل التباين

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

استعلامات الوسائط المتعددة

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

التحقّق من استيعابك

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