تباين الألوان: ليش نصك الرمادي الأنيق ما يقدر أحد يقرأه؟

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

وش يعني التباين بالضبط؟

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

الأرقام اللي تحتاج تعرفها

• النص العادي: نسبة ٤٫٥ إلى ١ على الأقل (مستوى AA).
• النص الكبير والعناوين العريضة: ٣ إلى ١ على الأقل.
• حدود الحقول والأيقونات المهمة وعناصر التحكم: ٣ إلى ١ على الأقل مقابل ما حولها.
• مستوى AAA الأعلى للنص العادي: ٧ إلى ١، مفيد للمحتوى الطويل.

وتذكّر إن الخط العربي الرفيع يحتاج تبايناً أعلى مما تتوقع، لأن النقاط والتفاصيل الصغيرة أول ما يختفي.

أدوات فحص مجانية

• أدوات المطوّر في متصفح Chrome تعرض نسبة التباين عند فحص أي نص.
• إضافات Figma المجانية لفحص التباين مباشرة داخل التصميم.
• مواقع فحص التباين اللي تكتب فيها لونين وتعطيك النتيجة فوراً.
• أدوات محاكاة ضعف تمييز الألوان في المتصفح وبرامج التصميم.

لا تعتمد على اللون وحده

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

النص فوق الصور

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

أماكن يختبئ فيها التباين الضعيف

• النص التلميحي داخل الحقول (placeholder).
• الأزرار المعطّلة اللي ما تشرح ليش هي معطّلة.
• روابط التذييل الصغيرة وحقوق النشر.
• النص الأبيض فوق اللون الأساسي الفاتح للهوية.
• الوضع الداكن، خصوصاً النصوص الثانوية.

كيف تصلح التباين بدون ما تكسر الهوية؟

أكثر اعتراض يسمعه المصمم: «بس لون الهوية كذا، ما نقدر نغيّره». والحل غالباً ما يحتاج تغيير الهوية، يحتاج استخدامها بذكاء:

• احتفظ بلون الهوية الفاتح للمساحات الكبيرة والزخارف، واستخدم درجة أغمق منه للنصوص والأزرار.
• لو النص الأبيض ما يقرأ فوق لون الهوية، جرّب نصاً داكناً فوقه بدلاً منه.
• اجعل النص الثانوي أغمق قليلاً؛ الفرق بين «أنيق» و«غير مقروء» غالباً درجات بسيطة.
• كبّر الخط أو زد وزنه في المواضع اللي لازم يبقى فيها اللون الفاتح.
• ابنِ درجات للون الأساسي من الفاتح للغامق، واختر لكل استخدام الدرجة اللي تنجح في الفحص.

ويمكن تسأل: هل كل هذا الاهتمام يستحق، إذا كان أغلب مستخدمينا نظرهم سليم؟

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

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

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

التباين الجيد مو تنازل عن الجمال؛ هو اللي يخلّي الجمال يوصل. في منصة أزهل الرقمية نفحص تباين الألوان قبل تسليم أي تصميم. عندك موقع تحس نصوصه باهتة؟ أرسل الرابط على واتساب ونعطيك ملاحظات محددة بالعناصر اللي تحتاج تعديل.