زر «أضف إلى السلة» في متجري بلون أحمر برتقالي، هل أكتب عليه بالأبيض أم بالأسود؟

لماذا يخدعك الأبيض على الألوان المتوسطة؟

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

النتيجة في الأداة واضحة: الأبيض على هذا الزر 3.68:1، أي ناجح في AA للنص الكبير وفي عناصر الواجهة، وغير ناجح في AA للنص العادي الذي يطلب 4.5:1. والأسود 5.70:1، ناجح في AA للنص العادي وفي AAA للنص الكبير.

افحص الاحتمالين في دقيقة

1. افتح فاحص تباين الألوان واكتب لون الزر #E4572E في حقل «لون الخلفية».
2. اكتب #FFFFFF في «لون النص» واقرأ النسبة وقائمة المعايير.
3. بدّل لون النص إلى #000000 وقارن.
4. انظر إلى العيّنة الحيّة: سترى النص بحجم 16 بكسل و24 بكسل على لون زرك فعليًا، بالعربية والإنجليزية.

إن كنت متمسكًا بالنص الأبيض

هنا تفصيل مهم: الاقتراحات في الأداة تغيّر دائمًا الحقل الأول، أي لون النص. لو تركت الأبيض في حقل النص وطلبت 4.5:1، ستقترح عليك نصًا أغمق هو #1E1E1E، وهذا ليس ما تريده. المطلوب تغميق الزر لا النص.

• اضغط «تبديل اللونين» ليصبح #E4572E في حقل النص والأبيض في حقل الخلفية. النسبة لا تتغير لأنها متماثلة، وتبقى 3.68:1.
• اختر الهدف 4.5:1، فيظهر في «أقرب لون أغمق» اللون #CB4D29 بنسبة 4.53:1.
• هذا هو لون الزر الجديد: الأبيض فوقه ينجح للنص العادي، وهو قريب جدًا من لونك الأصلي.

وملاحظة لطيفة: على #CB4D29 ينجح الأسود أيضًا بنسبة 4.63:1، فالزر الجديد يقبل اللونين. لكن الأبيض عليه يتجاوز الحد بفارق صغير، فلا تفتّح الزر بعد ذلك في حالة المرور بالمؤشر (hover) دون فحصه مجددًا.

ماذا عن الزر نفسه على الصفحة؟

هناك فحص ثانٍ ينساه كثيرون: هل يظهر الزر نفسه على خلفية الصفحة؟ ضع لون الزر مقابل لون الصفحة وانظر إلى «عناصر الواجهة والرسوم». #E4572E على صفحة بيضاء يعطي 3.68:1، فيتجاوز 3:1 المطلوبة لشكل الزر. هذا الفحص لا علاقة له بلون الكتابة، بل بقدرة العميل على رؤية حدود الزر.

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