← المدونة
5 دقائق قراءة

اختيار الخلفيات لمن يعيش مع عمى الألوان

القصّ سهل، أما اللون خلفه فلا يمكن التحقق منه بالعين. اقرأ أكواد Hex بدل العينات، ودع الإضاءة تفصل العنصر، وثبّت خمسة ألوان.

  • colour blindness
  • accessibility
  • product photography
  • background colour
  • hex codes
  • contrast
  • ecommerce
اختيار الخلفيات لمن يعيش مع عمى الألوان

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

الأمر شائع بما يكفي لتصميم سير عملك حوله. يقدّر المعهد الوطني الأمريكي للعيون (NEI) أن اضطراب رؤية الألوان يصيب نحو رجل واحد من كل 12 رجلًا، والشكل الأحمر-الأخضر هو الأكثر شيوعًا. يصف المعهد حالة "ديوترانومالي" — النوع الأكثر انتشارًا — بأنها تجعل بعض درجات الأخضر تبدو أكثر احمرارًا، وحالة "بروتانومالي" بأنها تجعل بعض درجات الأحمر تبدو أكثر اخضرارًا وأقل سطوعًا. أما "تريتانومالي"، وهي أندر، فتخلط الأزرق بالأخضر.

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

اعمل من أكواد Hex، لا من شبكة العينات أبدًا

اختيار اللون بالعين يتطلب حكمًا دقيقًا على درجة اللون في المنطقة ذاتها التي تكون فيها رؤيتك غير موثوقة، ومن دون أي تغذية راجعة بعد ذلك. أما كود Hex المكتوب فهو ستة أحرف يمكنك التحقق منها بالحساب.

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

كود Hex هو ثلاث قيم قنوات مكتوبة تباعًا — الأحمر ثم الأخضر ثم الأزرق — كل قناة زوج من حرفين يمتد من 00 (لا شيء) إلى FF (القيمة الكاملة). في #8A8A8A تتساوى القنوات الثلاث، فهو إذن رمادي محايد حقيقي. وفي #F5F0E8 تقلّ قناة الأزرق عن الأحمر والأخضر — وهذا هو معنى "الدافئ". ومن هنا يأتي الفخ الكلاسيكي: عينة تحمل اسم "رمادي فاتح" وهي في الحقيقة لون طيني دافئ، واللون الطيني يبتلع بهدوء أي منتج بيج أو كريمي أو بلون الجِمال.

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

الأزواج التي توقع الناس في الخطأ

احظر هذه التركيبات من لوحة ألوانك حظرًا تامًا بدل الحكم عليها حالة بحالة:

  • المنتجات الحمراء أو الصدئة أو التيراكوتا على خلفيات زيتونية أو مرمرية أو كاكية
  • الجلد البني أو الفاتح أو بلون الجِمال أو الكونياك على البيج أو ورق الكرافت أو لون الشوفان
  • القطع الوردية والسلمونية على الرماديات الدافئة الفاتحة، حيث تُنقص حالة "بروتانومالي" السطوع الظاهري أيضًا
  • أي شيء أخضر صُوِّر مع أوراق نباتات أو نبتة تُستخدم دعامةً للمنتج ما تزال ظاهرة في صورة الخلفية البديلة
  • الأزرق المخضرّ (التركواز الداكن) على الرمادي، والأزرق على الأخضر إن كان اضطرابك في اتجاه الأزرق-الأصفر — والبنفسجي على الأزرق إن كان في اتجاه الأحمر-الأخضر، لأن المكوّن الأحمر في البنفسجي هو الجزء الذي يختفي

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

الإضاءة هي القناة التي ما زال بإمكانك الوثوق بها

توضح وثيقة الشرح الصادرة عن W3C لمعيار النجاح 1.4.3 من إرشادات WCAG 2.2 الأمر بجلاء: تُحسب نسب التباين من الإضاءة النسبية لا من درجة اللون، و"عدم القدرة على تمييز بعض درجات الألوان لا يؤثر سلبًا في إدراك التباين بين الفاتح والداكن". هذا التوجيه كُتب للنصوص، لكن الفسيولوجيا الكامنة خلفه هي ذاتها التي تحدد ما إذا كانت حافة منتجك تظهر بوضوح أمام الخلفية.

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

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

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

ابنِ لوحة الألوان مرة واحدة وتوقف عن اتخاذ القرار

ثبّت هذه الخمسة، ثم لا تعد إلى هذا الحكم مرة أخرى:

  1. #FFFFFF أبيض نقي، لقوائم أسواق البيع الإلكترونية التي تشترطه
  2. #F2F2F2 رمادي شبه أبيض، للمنتجات البيضاء والكريمية التي قد تختفي على الأبيض النقي
  3. #8A8A8A رمادي متوسط، للمنتجات الفاتحة جدًا أو الداكنة جدًا فقط
  4. #1C1C1C شبه أسود، للخزف الفاتح والأواني الزجاجية والعبوات فاتحة اللون
  5. لون واحد للعلامة التجارية، يُسجَّل كوده Hex كتابةً في اليوم الذي يختاره فيه أحدهم

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

اسأل شخصًا واحدًا مرة واحدة، ثم دوّن الإجابة

احجز خمس عشرة دقيقة مع شخص واحد تثق برؤيته للألوان، عند مكتبك، والمنتجات أمامكما. اسأل سؤالين عن كل قطعة: هل تنفصل الحافة عن الخلفية؟ وهل ذلك اللون "المحايد" محايد فعلًا؟ سجّل الإجابات أكوادَ Hex مرتبطة بالفئات — "المصنوعات الجلدية: #1C1C1C" — لا صفاتٍ مثل "اللون الناعم" أبدًا. الصفات تجبرك على إعادة الحكم في كل مرة؛ أما أكواد Hex فلا.

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

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

قرّر مرة واحدة، وكتابةً

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

واصل القراءة