تختار علامة تجارية لونًا مميزًا: برتقالي دافئ، أو رمادي أنيق، أو ذهبي فاخر. يبدو رائعًا في ملف الهوية وعلى الشعار. ثم يُستخدم للنص على الموقع، فيصبح الزر صعب القراءة، والروابط تختفي في الفقرات، والسعر لا يُرى على الجوال في ضوء الشمس. المشكلة ليست في اللون نفسه، بل في التباين بينه وبين ما حوله.
هذا الدليل يشرح كيف تقيس التباين، وكيف تبني لوحة ألوان عملية لعلامتك تجمع بين الجمال وسهولة القراءة، مع تفاصيل خاصة بالخطوط العربية والوضع الداكن.
ما هي نسبة التباين؟
نسبة التباين تقارن «الإضاءة النسبية» للونين، أي كم يبدو كل منهما فاتحًا للعين البشرية. النتيجة تتراوح بين 1:1 (لونان متطابقان) و21:1 (أسود على أبيض). المعادلة يحددها معيار WCAG، وهو المرجع الدولي لإمكانية الوصول في الويب.
| المستوى | نص عادي | نص كبير |
|---|---|---|
| AA (الحد المعتمد غالبًا) | 4.5 : 1 | 3 : 1 |
| AAA (مستوى أعلى) | 7 : 1 | 4.5 : 1 |
«النص الكبير» حسب المعيار هو نحو 24 بكسل فأكثر، أو نحو 18.7 بكسل فأكثر إذا كان عريضًا. والعناصر غير النصية المهمة، مثل حدود حقول الإدخال والأيقونات التي تحمل معنى، تحتاج 3:1 على الأقل مع ما حولها.
فاحص تباين الألوان يحسب النسبة فورًا، ويعرض نتيجة كل مستوى، مع معاينة حية بنص عربي وإنجليزي، ويقترح أقرب لون لنصك يجتاز المعيار.
أمثلة تكشف المشكلة
| النص على أبيض | النسبة التقريبية | النتيجة للنص العادي |
|---|---|---|
| أسود #000000 | 21 : 1 | ناجح |
| رمادي داكن #5F6368 | نحو 6 : 1 | ناجح AA |
| رمادي فاتح #AAAAAA | نحو 2.3 : 1 | غير ناجح |
الرمادي الفاتح من أكثر اختيارات «الأناقة» شيوعًا في النصوص الثانوية، وأكثرها إرهاقًا للقراءة. والألوان الدافئة الزاهية (البرتقالي والأصفر) كثيرًا ما تفشل كلون نص على الأبيض رغم أنها ممتازة كخلفية لزر بنص داكن، أو كلون زخرفي.
الخطوط العربية الرفيعة والأحجام الصغيرة تحتاج تباينًا أعلى من الحد الأدنى. الحروف العربية فيها تفاصيل دقيقة (النقاط والأسنان والحركات) تضيع أسرع من الحروف اللاتينية عندما يضعف التباين. إذا كان نصك العربي بوزن خفيف أو حجم صغير، استهدف أكثر من 4.5:1.
بناء لوحة ألوان عملية للعلامة
الخطأ الشائع أن تتكون هوية العلامة من «لون أساسي ولون ثانوي» فقط. على الشاشة تحتاج أكثر من ذلك: درجات متعددة لكل لون، وأدوارًا واضحة لكل درجة.
1. الدرجات (Shades)
من اللون الأساسي، أنشئ سلسلة من الأفتح إلى الأغمق (مثل 50 إلى 900). الدرجات الفاتحة للخلفيات والبطاقات، والمتوسطة للأزرار والعناصر البارزة، والغامقة للنصوص على خلفيات فاتحة أو لحالة الضغط على الزر.
2. الأدوار (Roles)
- لون النص الأساسي: داكن جدًا على الفاتح، أو فاتح جدًا على الداكن.
- لون النص الثانوي: أقل حدة، لكن يجتاز 4.5:1 دائمًا.
- لون العلامة: للأزرار والروابط والعناصر المميزة، بدرجة تجتاز التباين في دورها.
- ألوان الحالات: نجاح، وتحذير، وخطأ، بدرجات واضحة.
- الخلفيات والحدود: درجتان أو ثلاث محايدة.
3. ألوان متناسقة
اللون المكمّل (المقابل على عجلة الألوان) يصنع تباينًا قويًا للعناصر التي تحتاج لفت الانتباه، والألوان المجاورة تعطي إحساسًا هادئًا ومتجانسًا. لا تحتاج كل هذه الألوان في الواجهة؛ استخدمها باعتدال في الرسوم والتصاميم.
قسم «لوحة الألوان» في الأداة ينشئ عشر درجات من لونك الأساسي، وخمسة ألوان متناسقة، ويعطيك متغيرات CSS جاهزة للمطورين، فيصبح تطبيق الهوية في الموقع متسقًا.
الوضع الداكن
في الواجهات الداكنة، لا تقلب الألوان ببساطة:
- تجنب الأبيض النقي على الأسود النقي للفقرات الطويلة؛ التباين الحاد جدًا قد يتعب العين. أبيض مائل للرمادي على خلفية داكنة غير سوداء تمامًا أريح.
- لون العلامة قد يحتاج درجة أفتح على الخلفية الداكنة ليجتاز التباين.
- افحص كل زوج ألوان مرة أخرى في الوضع الداكن، لأن النجاح في الفاتح لا يعني النجاح في الداكن.
الألوان في السوشيال والإعلانات
النص فوق الصور هو أصعب حالات التباين، لأن الخلفية متغيرة. أضف طبقة تظليل خلف النص، أو ضعه في منطقة هادئة من الصورة، أو داخل شريط بلون العلامة. ولأن المنصات تضغط الصور، فالتباين الضعيف يزداد سوءًا بعد النشر، كما يشرح دليل تصدير التصاميم.
لا تعتمد على اللون وحده
نسبة ملحوظة من الناس لديها درجة من صعوبة تمييز بعض الألوان، خاصة الأحمر والأخضر. لذلك لا تجعل اللون الوسيلة الوحيدة لنقل المعلومة: الخطأ في النموذج يحتاج رسالة نصية لا حدًا أحمر فقط، والرابط في الفقرة يحتاج خطًا تحته أو وزنًا مختلفًا، لا لونًا فقط.
خطوات عملية لمراجعة ألوان موقعك
- اكتب قائمة بأزواج الألوان الفعلية: نص الفقرات على الخلفية، ونص الأزرار على لونها، والروابط، والنص الثانوي، والنص فوق الصور.
- افحص كل زوج في الأداة، وسجل ما يفشل.
- استبدل الألوان الفاشلة بأقرب درجة ناجحة من نفس اللون، للحفاظ على الهوية.
- حدّث دليل الهوية بالدرجات والأدوار الجديدة، وشاركها مع المطورين كمتغيرات.
- كرر الفحص للوضع الداكن إن وجد.
مثال: تصحيح لون زر برتقالي
علامة تستخدم برتقاليًا دافئًا (#D4562E) للأزرار بنص أبيض. نسبة التباين بين الأبيض وهذا البرتقالي نحو 4.06:1، أي أقل قليلًا من 4.5:1 المطلوبة لنص الزر العادي. والدرجة الأفتح (#F08A4B) أسوأ: نحو 2.5:1 فقط مع الأبيض.
الحلول دون التخلي عن الهوية:
- درجة أغمق للزر: مثل #B24320، تعطي نحو 5.65:1 مع النص الأبيض، وتبقى في عائلة اللون نفسها.
- نص داكن على البرتقالي الفاتح: نص #1A1A1A على #F08A4B يعطي نحو 7:1.
- تكبير نص الزر وجعله عريضًا: فيدخل في فئة «النص الكبير» التي تحتاج 3:1 فقط، مع الانتباه أن هذا حل محدود.
هكذا يبقى البرتقالي لون العلامة، لكن بالدرجة المناسبة لكل دور.
الخلاصة في نقاط
- 4.5:1 للنص العادي و3:1 للنص الكبير هو الحد الأدنى في مستوى AA.
- الخطوط العربية الرفيعة تحتاج تباينًا أعلى من الحد الأدنى.
- لوحة العلامة تحتاج درجات وأدوارًا، لا لونين فقط.
- افحص الوضع الداكن والنص فوق الصور بشكل منفصل.
- لا تجعل اللون الوسيلة الوحيدة لنقل المعنى.
أسئلة شائعة
لون علامتي يفشل في التباين. هل أغيّره؟
ليس بالضرورة. احتفظ به للشعار والعناصر الزخرفية والخلفيات، واستخدم درجة أغمق أو أفتح منه للنصوص والأزرار. هكذا تبقى الهوية وتتحقق القراءة.
كيف أختار لون النص على لون العلامة؟
افحص الأبيض والأسود (أو أغمق درجة في لوحتك) على لون العلامة، واختر الأعلى تباينًا. الألوان الفاتحة والدافئة غالبًا تحتاج نصًا داكنًا، والغامقة تحتاج نصًا أبيض.
هل AAA ضروري؟
ليس لأغلب المواقع، لكنه مفيد للمحتوى الطويل ولمواقع الجهات التي يخدم جمهورها كبار السن أو ضعاف البصر.
هل التباين يؤثر على السيو؟
ليس عامل ترتيب مباشرًا، لكنه يؤثر على تجربة المستخدم والوقت في الصفحة والتحويل، وهي أمور تهم نجاح أي موقع.
الألوان الجميلة التي لا تُقرأ لا تخدم أحدًا. افحص ألوانك وابنِ لوحة علامتك عبر فاحص تباين الألوان المجاني، وإذا كنت تريد هوية بصرية متكاملة تعمل على الشاشة كما تعمل على الورق، تواصل معي.
