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

لماذا يفشل البرتقالي أصلًا؟

البرتقالي والأصفر من أفتح الألوان في نظر العين، حتى حين تبدو زاهية وقوية. نسبة التباين لا تهتم بمدى حيوية اللون، بل بمقدار سطوعه مقارنة بالخلفية. لهذا يعطي #F7A21B على الأبيض نسبة 2.07:1 فقط، ويفشل في كل الفحوص الخمسة، بما فيها فحص عناصر الواجهة الذي يطلب 3:1.

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

الخطوات في الأداة

1. افتح فاحص تباين الألوان واكتب #F7A21B في حقل «لون النص» و#FFFFFF في حقل «لون الخلفية».
2. ستظهر النسبة 2.07:1 مع «غير ناجح» أمام المعايير كلها.
3. انزل إلى قسم «اقتراح لون يحقق الهدف» واختر من «النسبة المستهدفة» الخيار 4.5:1 للنص العادي.
4. ستجد في «أقرب لون أغمق» الدرجة #A26A12 بنسبة 4.56:1. اضغط «استخدام هذا اللون» لتنقلها إلى الحقل وتراها في العيّنة الحيّة.
5. أما «أقرب لون أفتح» فستقول لك الأداة إن الأبيض الخالص نفسه لا يبلغ 4.5:1 مع هذه الخلفية، وهذا منطقي لأن الخلفية بيضاء أصلًا.

كيف تعمل الاقتراحات، وما حدودها؟

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

جرّب أيضًا الأهداف الأخرى لترى المسافة بين المستويات:

• الهدف 3:1 يعطي #CC8616 بنسبة 3.00:1، ويكفي للعناوين الكبيرة وحدود الأزرار والأيقونات، لا للنص العادي.
• الهدف 4.5:1 يعطي #A26A12 بنسبة 4.56:1، وهي الدرجة المناسبة للروابط والأسعار والنصوص الصغيرة.
• الهدف 7:1 يعطي #7A500D بنسبة 7.05:1، وتقترب من البني، فاستخدمها فقط إن كنت تستهدف AAA.

كيف تقسّم الأدوار في متجرك؟

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

وإن كان لموقعك وضع داكن فالأمر ينقلب: البرتقالي نفسه على الخلفية #121212 يعطي 9.04:1، فيصلح هناك للنص مباشرة. تذكّر أن الأداة تحسب نسبة WCAG 2 فقط، ونجاح اللون فيها خطوة واحدة في قابلية القراءة، لا شهادة بأن الموقع كله متاح لذوي الإعاقة.

إن لم تكن متأكدًا من كود لونك بالضبط، التقطه من ملف الشعار عبر منتقي الألوان من الصور ثم افحصه هنا.