بعد أخذ لون هويتي من الصورة، هل أكتب عليه نصًا أبيض أم أسود؟

أين تجد التلميح في المنتقي؟

كل نقرة في منتقي الألوان من الصور تعرض اللون بثلاث صيغ، والثالثة مثل hsl(172, ⁦75%⁩, ⁦24%⁩). الرقم الأخير هو الإضاءة: ⁦0%⁩ أسود و⁦100%⁩ أبيض. لون عند ⁦24%⁩ داكن بوضوح، والنص الأبيض فوقه سيقرأ جيدًا على الأرجح. ولون عند ⁦90%⁩ فاتح جدًا، والأسود فوقه هو الخيار الطبيعي.

المشكلة: ألوان في المنتصف

التلميح يتعطل حين تكون الإضاءة قريبة من ⁦50%⁩، لأن العين لا ترى كل الألوان بالسطوع نفسه. الأصفر يبدو أفتح كثيرًا من الأزرق حتى لو كانت قيمة الإضاءة في HSL واحدة. قارن هذين اللونين:

• أصفر #F0C814، أي hsl(49, ⁦88%⁩, ⁦51%⁩): التباين مع الأبيض 1.62 إلى 1 فقط، ومع الأسود 12.98 إلى 1. الأسود هو الخيار الوحيد المقبول.
• أزرق #3C78C8، أي hsl(214, ⁦56%⁩, ⁦51%⁩): التباين مع الأبيض 4.46 إلى 1، ومع الأسود 4.71 إلى 1. كلاهما قريب من الحد، والأبيض لا ينجح في اختبار النص العادي الذي يحتاج 4.5.
• الأخضر الفيروزي #0F6B5F، أي hsl(172, ⁦75%⁩, ⁦24%⁩): الأبيض 6.39 إلى 1، والأسود 3.29 إلى 1. هنا صدق التلميح، والأبيض هو الخيار الصحيح.

لاحظ أن الأصفر والأزرق لهما إضاءة ⁦51%⁩ كلاهما، ومع ذلك يختلف القرار فيهما تمامًا. لهذا لا تعتمد على رقم الإضاءة وحده.

الطريقة الصحيحة في خطوات

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

وماذا لو وقع لونك في المنطقة الحرجة؟

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