ألواني الزاهية كانت فخاً: كيف أنقذني ‘تباين الألوان’ من تصميم واجهات كارثية؟

الصدمة: “يا أبو عمر، مش شايف اشي!”

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

بكل حماس، عرضت التطبيق على والدي، “الحج”، وقلت له: “شوف يابا، شو رأيك بهالشغل المرتب؟”. نظر والدي إلى شاشة الهاتف، قربها من عينيه ثم أبعدها، وقطّب حاجبيه وقال جملته التي كانت كالصاعقة: “والله يا ابني الشغل حلو، بس مش شايف اشي! الكلام صغير واللون فايع، عيوني وجعوني وأنا بحاول أقرأ”.

في تلك اللحظة، شعرت بالإحراج والفشل. كل تعبي و”فني” ذهب هباءً منثورًا لأن المستخدم الأول، والدي، لم يستطع حتى استخدام التطبيق. كانت ألواني الزاهية التي أحبها عائقًا، بل فخًا وقعت فيه. هذه التجربة كانت أقسى وأهم درس تعلمته: التصميم ليس لك، بل للمستخدم. ومن هنا بدأت رحلتي مع عالم “إمكانية الوصول” (Accessibility) وأول وأهم أعمدته: تباين الألوان.

ما هو “تباين الألوان” (Color Contrast) وليش هو مهم هالقد؟

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

مش بس لكبار السن وضعاف البصر

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

• استخدام الهاتف تحت أشعة الشمس: هل جربت قراءة نص رمادي فاتح على خلفية بيضاء وأنت في الشارع ظهرًا؟ شبه مستحيل.
• الشاشات ذات الجودة المنخفضة: لا يمتلك كل المستخدمين شاشات Retina فائقة الدقة. بعض الشاشات القديمة أو الرخيصة تعرض الألوان بشكل باهت، مما يقلل التباين.
• الإرهاق البصري: حتى لو كان بصرك 6/6، القراءة الطويلة لنص ذي تباين منخفض تسبب إجهادًا للعين وصداعًا.
• الأشخاص المصابون بعمى الألوان: بعض أنواع عمى الألوان تجعل من الصعب التمييز بين درجات معينة، والتباين العالي يساعدهم على تمييز الأشكال والنصوص.

باختصار، التصميم المتاح للجميع (Accessible Design) هو تصميم أفضل للجميع.

المعيار الذهبي: إرشادات الوصول إلى محتوى الويب (WCAG)

حتى لا يبقى الموضوع “وجهة نظر” أو “ذوق شخصي”، قامت رابطة الشبكة العالمية (W3C) بوضع معايير واضحة وقابلة للقياس اسمها “إرشادات الوصول إلى محتوى الويب” أو WCAG. هذه الإرشادات هي المرجع الأساسي عالميًا لتصميم وبناء منتجات رقمية متاحة للجميع.

فك شيفرة AA و AAA

فيما يخص تباين الألوان، تحدد WCAG مستويين من التوافق، ويتم قياسهما بنسبة رياضية (مثل 4.5:1):

• المستوى (AA): هذا هو المستوى المقبول والهدف الأدنى لمعظم المواقع والتطبيقات.
  • للنص العادي: يجب أن تكون نسبة التباين 4.5:1 على الأقل.
  • للنص الكبير: (18pt أو 14pt غامق) النسبة المقبولة هي 3:1 على الأقل.
• المستوى (AAA): هذا هو المستوى المحسّن والأعلى، وهو مثالي للتطبيقات التي تستهدف جمهورًا يعاني من ضعف البصر أو الجهات الحكومية التي تسعى لأعلى درجات الشمولية.
  • للنص العادي: يجب أن تكون نسبة التباين 7:1 على الأقل.
  • للنص الكبير: النسبة المطلوبة هي 4.5:1 على الأقل.

كيف نحسب النسبة؟ (ما توجع راسك، الأدوات بتساعد)

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

صندوق العدة: أدواتي المفضلة لفحص تباين الألوان

على مر السنين، جمعتُ “صندوق عدة” صغير من الأدوات التي لا أستغني عنها في أي مشروع. إليك أهمها:

1. WebAIM Contrast Checker: الأداة الكلاسيكية والأبسط. مجرد موقع تضع فيه كود اللونين (Hex) ويعطيك النسبة والنتيجة (Pass/Fail) لمستويات AA و AAA. أحتفظ به دائمًا في المفضلة.
2. إضافات Figma/Sketch/XD: إذا كنت مصممًا، فابحث عن إضافات (Plugins) مثل “Stark” أو “Contrast”. تمكنك من فحص التباين مباشرة وأنت تعمل على التصميم، وهذا يوفر وقتًا وجهدًا هائلاً.
3. أدوات المطور في المتصفح (Browser DevTools): هذه كنزي المفضل كمبرمج. في متصفح Chrome أو Firefox، افتح أدوات المطور (Inspect)، اختر عنصرًا نصيًا، وفي نافذة الألوان (Color Picker)، ستجد غالبًا نسبة التباين معروضة مباشرة. يمكنك حتى تعديل اللون ورؤية النتيجة فورًا.
4. Coolors.co: أداة رائعة لتوليد لوحات ألوان (Color Palettes). ما يميزها هو أنها تحتوي على أدوات مدمجة لفحص التباين وإصلاحه، وتساعدك على بناء لوحة ألوان متوافقة مع معايير الوصول من البداية.

درس من الميدان: تطبيق عملي وتعديل تصميم فاشل

لنعد إلى قصة تطبيقي “الفني”. كيف كان من الممكن إصلاحه؟ لنرى مثالاً عمليًا بالكود.

التصميم الأصلي كان يحتوي على زر باللون الأخضر الفاتح جدًا، والنص بداخله باللون الأبيض.

مثال بالكود (CSS)

هذا هو الكود السيء الذي كتبته في البداية (لا تحكموا عليّ، كلنا بنتعلم!):

/* 👎 الكود السيء - نسبة التباين هنا حوالي 1.3:1 فقط! */
.bad-button {
  background-color: #A0FFC4; /* أخضر فاتح جدًا */
  color: #FFFFFF; /* أبيض */
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
}

عند فحص هذين اللونين بأي أداة، ستعطينا نتيجة “Fail” مدوية. النص يكاد يكون غير مرئي. الحل بسيط: إما أن نغمّق الخلفية، أو نغير لون النص إلى لون داكن.

هذا هو الكود بعد التعديل، مع تحقيق معيار AA:

/* 👍 الكود الجيد - نسبة التباين هنا 4.54:1 (ناجح!) */
.good-button {
  background-color: #008A38; /* أخضر داكن وواضح */
  color: #FFFFFF; /* أبيض */
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
}

لاحظوا أننا لم نتخل عن اللون الأخضر، بل اخترنا درجة أكثر عمقًا ووضوحًا تحقق التباين المطلوب. التصميم لا يزال جميلاً، ولكنه الآن قابل للاستخدام من قبل الجميع.

نصائح أبو عمر الذهبية لتصميم مريح للعين

من خلال التجربة والخطأ، تعلمت بعض المبادئ التي أطبقها دائمًا:

• ابدأ بالأسود والأبيض: قبل أن تختار أي لون، صمم واجهتك باللونين الأبيض والأسود والدرجات الرمادية. هذا يجبرك على التركيز على التخطيط، والمسافات، وحجم الخطوط، والتسلسل الهرمي للمعلومات. بعد أن يصبح التصميم قويًا وهو رمادي، يمكنك إضافة الألوان بثقة.
• لا تعتمد على اللون وحده: لا تستخدم اللون فقط لإيصال معلومة مهمة. مثلاً، في حقول الإدخال، لا تكتفِ بتغيير لون الإطار إلى الأحمر عند وجود خطأ، بل أضف أيقونة تحذير ونصًا يوضح المشكلة. هذا يساعد المصابين بعمى الألوان ومن لا يميزون هذه الفروقات.
• اختبر في ظروف حقيقية: لا تكتفِ بالاختبار على شاشتك الفاخرة في مكتبك المظلم. امسك هاتفك واخرج إلى الشارع في وضح النهار. هل ما زلت تستطيع قراءة النصوص واستخدام تطبيقك بسهولة؟
• لا تنسَ الحالات التفاعلية (States): تأكد من أن حالة الـ `hover` (عند مرور الفأرة) والـ `focus` (عند التنقل بالكيبورد) للأزرار والروابط تحافظ أيضًا على تباين جيد. حالة الـ `focus` مهمة جدًا للمستخدمين الذين يعتمدون على لوحة المفاتيح للتنقل.

الخلاصة: من ألواني لعيون الناس 😉

رحلتي من مبرمج يهتم بـ “جمال” الكود والألوان إلى مطور يضع “الإنسان” أولاً كانت طويلة ومليئة بالدروس. درس تباين الألوان كان الأهم، لأنه علمني أن المنتج الرقمي الناجح ليس الأجمل بالضرورة، بل هو الأكثر فائدة وسهولة في الاستخدام لأوسع شريحة ممكنة من الناس.

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

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