اللون الرمادي نفسه نجح على الخلفية البيضاء وفشل على خلفية متجري البيج، لماذا؟

الرمادي الذي يقف على الحافة

#767676 مشهور بين المصممين لأنه من أفتح درجات الرمادي التي تنجح على الأبيض للنص العادي. وهذه بالضبط مشكلته: هامشه صغير جدًا. 4.54:1 تعني أنه يتجاوز الحد بجزء بسيط، فأي تغيير في الخلفية نحو الغمق يسقطه. الرمادي المجاور له #777777 يفشل على الأبيض نفسه بنسبة 4.48:1.

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

افحصها بنفسك في دقيقة

1. افتح فاحص تباين الألوان واكتب #767676 في «لون النص» و#FFFFFF في «لون الخلفية»: النسبة 4.54:1 وناجح في AA للنص العادي.
2. غيّر الخلفية إلى لون متجرك، مثلًا #F5F0E6: النسبة 4.00:1، و«AA للنص العادي» صار غير ناجح.
3. راقب العيّنة الحيّة: الفرق قد لا يلفت نظرك على شاشتك، لكن الرقم لا يجامل.

من أين تأتي بلون الخلفية الصحيح؟

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

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

الإصلاح: درجة أغمق بقليل

• في قسم الاقتراحات، مع الخلفية #F5F0E6 والهدف 4.5:1، يظهر «أقرب لون أغمق» #6D6D6D بنسبة 4.56:1.
• الدرجة نفسها على الأبيض تعطي 5.17:1، فتنجح على الخلفيتين معًا ويمكنك توحيدها في المتجر كله.
• لون الهوية #0F6B5F على البيج يعطي 5.62:1 وينجح، فليس كل لون يتأثر بالقدر نفسه، والألوان ذات الهامش الكبير تتحمل الخلفيات الدافئة.

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