في جملة واحدة
تبايُن الألوان هو مقياس رياضي للفرق في السطوع المُدرَك بين لونين، لضمان أن يكون النص مقروءًا للأشخاص على اختلاف قدراتهم البصرية.
المشكلة التي يحلها
هل سبق لك أن ضيقت عينيك وأنت تحدق في شاشة جوالك تحت الشمس، محاولًا قراءة نص ما؟ أو هل شتمت في سرك مصممًا وضع نصًا رماديًا فاتحًا على خلفية رمادية أفتح قليلًا؟ تهانينا، لقد واجهت للتو مشكلة في تباين الألوان.
لعقود طويلة، كان جعل الأشياء "تبدو رائعة" على الشاشة يأتي على حساب كونها قابلة للقراءة. مع تحول الويب إلى جزء لا غنى عنه من حياتنا —للبنوك والرعاية الصحية والتعليم والتواصل— أصبح من الواضح أن المسألة ليست مجرد ذوق، بل هي مسألة إتاحة الوصول للجميع.
وهنا يأتي دور مبادرة الوصول إلى الويب (WAI)، وهي مشروع من نفس الفريق الذي يضع معايير الويب نفسها (W3C). لقد أنشأوا إرشادات الوصول إلى محتوى الويب، أو WCAG، وهي مجموعة من المعايير التقنية لجعل الويب قابلًا للاستخدام من قبل الجميع، بغض النظر عن قدراتهم. هذا ليس مجرد "شيء لطيف"، بل هو مطلب قانوني في العديد من البلدان للمواقع العامة والتجارية.
في جوهر الأمر، المشكلة هي أن الرؤية البشرية متنوعة بشكل كبير. يعاني بعض الأشخاص من قصور في رؤية الألوان (المصطلح الشائع "عمى الألوان" غالبًا ما يكون غير دقيق)، والبعض الآخر لديهم ضعف في البصر، ورؤية الجميع تتغير مع تقدم العمر أو حتى بعد يوم طويل من التحديق في الشاشة. يوفر فحص التباين مقياسًا عالميًا وموضوعيًا. إنه ينقل الحوار من "أعتقد أن هذا قابل للقراءة" إلى "هذا مُثبت رياضيًا أنه قابل للقراءة للغالبية العظمى من المستخدمين في معظم الظروف". يتعلق الأمر بإنشاء ويب يعمل للإنسان في العالم الحقيقي، وليس فقط لمصمم لديه شاشة 4K معايرة بشكل مثالي في غرفة مظلمة.
كيف يعمل من الداخل
قد تعتقد أنه يمكنك الحكم على التباين "بالعين المجردة"، لكن أدمغتنا سهلة الخداع. تستخدم معايير WCAG صيغة دقيقة قائمة على الإدراك البشري للحصول على درجة موضوعية. دعنا نفتح غطاء المحرك ونلقي نظرة.
### من أكواد الهكس إلى الضوء
اللون على الويب، مثل #FFD700 (ذهبي) أو rgb(255, 215, 0)، هو مجرد مجموعة من التعليمات لشاشتك. يخبر البيكسلات بكمية الضوء الأحمر والأخضر والأزرق التي يجب أن تنبعث منها. الخطوة الأولى هي تحويل هذه القيم من 0-255 إلى مقياس خطي موحد.
المشكلة هي أن إدراكنا للسطوع ليس خطيًا. القفزة من قيمة بكسل 10 إلى 20 تبدو أكبر بكثير من القفزة من 240 إلى 250. لمراعاة ذلك، تقوم الصيغة أولًا بتطبيع قيم RGB إلى نطاق 0-1 ثم تعديلها لتتناسب بشكل أفضل مع الإدراك البشري. النسخة المبسطة من هذا هي C_linear = (C_sRGB / 255) ^ 2.2. هذه العملية "تلغي" تصحيح غاما (gamma correction) المدمج في معظم صيغ الصور والشاشات.
### رياضيات السطوع النسبي
بمجرد حصولنا على قيم RGB الخطية، يمكننا حساب "السطوع النسبي" (Y) للون. هذا هو سر الطبخة. إنه رقم يمثل مدى سطوع اللون للعين البشرية.
قد تعتقد أننا سنقوم فقط بحساب متوسط قيم R و G و B، لكن أعيننا لها خصوصيتها. نحن أكثر حساسية للون الأخضر بكثير من الأزرق. تعكس الصيغة هذه الحقيقة الفسيولوجية:
Y = (0.2126 * R_linear) + (0.7152 * G_linear) + (0.0722 * B_linear)
لاحظ المعاملات: يحصل الأخضر على الوزن الأكبر (0.7152)، بينما يحصل الأزرق على القليل جدًا (0.0722). هذا بمثابة "API لعينيك"، حيث يترجم إشارة رقمية إلى قيمة تقارب الاستجابة البيولوجية البشرية.
### صيغة نسبة التباين
الآن الجزء السهل. بمجرد حصولك على السطوع النسبي للونين — لنسمي اللون الأفتح Y1 واللون الأغمق Y2 — فإن صيغة نسبة التباين بسيطة ومباشرة:
Contrast Ratio = (Y1 + 0.05) / (Y2 + 0.05)
الثابت الصغير + 0.05 هو تعديل ذكي. يمنع أخطاء القسمة على صفر إذا كنت تقارن باللون الأسود الخالص (الذي سطوعه 0) ويساعد في مراعاة التعقيدات في عرض الألوان. والنتيجة هي رقم يتراوح من 1:1 (أبيض على أبيض) إلى 21:1 (أسود على أبيض).
### ما هما AA و AAA؟
النسبة هي مجرد رقم. تعطينا إرشادات WCAG عتبات لما يعتبر مقبولًا من ناحية إمكانية الوصول. هذه العتبات مقسمة إلى مستويين رئيسيين من "الامتثال".
| المستوى | النص العادي (حوالي 16px) | النص الكبير (>24px أو 18.5px عريض) | الوصف |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | المعيار المعتمد في الصناعة. جيد لمعظم المحتوى. |
| AAA | 7:1 | 4.5:1 | "المعيار الذهبي". لأقصى درجات الوضوح، غالبًا ما يستخدم في سياقات متخصصة. |
الأمر الحاسم هو أن "النص الكبير" يحصل على عتبة أقل لأن حجمه الكبير يجعله أسهل في القراءة. وهذه القواعد لا تنطبق على النصوص الزخرفية البحتة أو الشعارات، حيث لا تكون القراءة هي الوظيفة الأساسية.
قصص من الواقع
### كابوس يوم الإطلاق للشركة الناشئة الأنيقة
أنفقت شركة SaaS ناشئة ثروة على علامتها التجارية. كان موقعها تحفة فنية بسيطة: خلفيات بيضاء باهتة، نصوص رمادية داكنة، وروابط بلون أزرق باهت عصري. أحبوا التصميم. أحبه المستثمرون. لكن في يوم الإطلاق، لم يحبه مستخدمو تويتر. انهالت التعليقات: "لا أجد صفحة الأسعار"، "هل زر التسجيل معطل؟"، "لا أستطيع قراءة قائمة الميزات حرفيًا". التصميم الذي بدا رائعًا في Figma، كان كارثة من حيث قابلية الاستخدام في العالم الحقيقي. أخيرًا، قام مطور بإدخال الألوان في أداة فحص التباين ورأى نسبًا مثل 2.2:1 و 1.8:1 في جميع أنحاء الموقع. قضوا ليلة الإطلاق في تعديل ملفات CSS بنصوص أغمق وأزرق أكثر جرأة.
الدرس المستفاد: التصميم "الأنيق" الذي يمنع المستخدمين من إعطائك أموالهم هو ببساطة تصميم سيء. اختبر دائمًا ألوان علامتك التجارية الأساسية من أجل إمكانية الوصول قبل الإطلاق.
### قضية زر الدفع الخفي
كان أحد مواقع التجارة الإلكترونية في حيرة. أظهرت التحليلات أن الكثير من المستخدمين يضيفون منتجات إلى سلة التسوق على الجوال لكنهم يتخلون عن الشراء في شاشة الدفع النهائية. أجروا اختبارات A/B على كل شيء: نص الزر ("تأكيد الشراء" مقابل "اشترِ الآن")، وموضعه، والنصوص المحيطة به. لم ينجح شيء. أخيرًا، اقترح متدرب صيفي فحص تباين الألوان. كان الزر بلون أخضر نعناعي جميل مع نص أبيض. نسبة التباين؟ 1.9:1، وهي نسبة بائسة. على شاشة هاتف ساطعة في الهواء الطلق، كان النص غير مرئي وظيفيًا. غيروا لون النص إلى كحلي داكن، مما رفع النسبة إلى 6.5:1. قفزت التحويلات على تلك الصفحة بشكل ملحوظ في غضون أسبوع.
الدرس المستفاد: يجب أن تكون أهم دعواتك لاتخاذ إجراء (calls-to-action) مضمونة تمامًا. افترض أنها ستُعرض على شاشة هاتف ملطخة بالبصمات تحت أشعة الشمس المباشرة، وصمم وفقًا لهذا الواقع.
### مشروع الإصلاح غير المخطط له
أطلقت جامعة كبيرة بوابة طلابية جديدة تمامًا. بعد ستة أشهر، تلقى القسم القانوني بالجامعة شكوى رسمية من مجموعة حقوق ذوي الإعاقة، مستشهدة بعدم الامتثال لقوانين إمكانية الوصول. كانت نقطة الخلاف الرئيسية هي نظام ألوان البوابة. استخدمت جداول البيانات التي تعرض جداول الفصول الدراسية والدرجات ظلالًا متناوبة من الأزرق الفاتح والأبيض للصفوف، مع نص أسود عادي. لم يجتز لون الخلفية الأزرق مع النص الأسود معيار التباين AA، مما جعل من الصعب على الطلاب ذوي الرؤية المحدودة تحليل المعلومات الكثيفة. اضطرت الجامعة إلى تحويل الموارد من الميزات الجديدة إلى مشروع "إصلاح إمكانية الوصول" المكلف والعاجل.
الدرس المستفاد: إمكانية الوصول ليست مجرد فكرة جيدة؛ بل هي القانون في كثير من الأحيان. الفحوصات الاستباقية أرخص بكثير وأقل إرهاقًا من الإصلاحات القانونية والتقنية التفاعلية.
أخطاء وشراك شائعة
- استخدام أداة القطارة (eyedropper) على لقطة شاشة. هذه وصفة لعدم الدقة. يمكن أن يكون لقطات الشاشة ملفات تعريف ألوان مختلفة، وقد تلتقط القطارة بكسلًا منعم الحواف (anti-aliased) بين النص والخلفية. استخدم دائمًا قيم الهكس (hex) أو RGB الدقيقة من ملف CSS الخاص بك.
- نسيان الحالات التفاعلية. قد يكون لون الرابط الافتراضي لديك جيدًا، ولكن ماذا عن حالة
:hoverأو:focusأو:visited؟ إطار التركيز (focus outline) ذو التباين المنخفض يمثل مشكلة كبيرة لمستخدمي لوحة المفاتيح، مما يجعل من المستحيل رؤية مكانهم على الصفحة. - تجاهل النص على الصور. وضع النص مباشرة على صورة خلفية هو "الزعيم الأخير" في عالم تباين الألوان. قد يوفر جزء من الصورة تباينًا كافيًا، لكن جزءًا آخر قد لا يفعل ذلك. الحل المعتاد هو إضافة طبقة شبه شفافة (تسمى "scrim") فوق الصورة أو ظل نصي صلب لضمان أن يكون للنص خلفية متسقة يمكن فحصها.
- التعامل مع النسبة كاختبار نجاح/رسوب ثنائي. مجرد أن تركيبة الألوان تجتاز الاختبار بنسبة 4.51:1 لا يعني أنها الخيار الأفضل. الخطوط الرفيعة جدًا، على سبيل المثال، يمكن أن تكون صعبة القراءة حتى مع درجة ناجحة. استخدم معيار WCAG كخط أساس، وليس كبديل للمنطق السليم.
- التفكير بـ "هذا ليس من اختصاصي". المصممون يختارون الألوان، والمطورون ينفذونها، وفريق ضمان الجودة يختبرها. كل فرد في فريق المنتج يشارك في مسؤولية إمكانية الوصول. المطور الذي يكتشف لونًا منخفض التباين في نموذج تصميم ويبلغ عنه قبل كتابة الكود هو بطل.
لماذا يجب أن يكون هذا على رادارك
هذه ليست أداة غامضة تستخدمها مرة في السنة. يجب أن تفكر في تباين الألوان باستمرار:
- أثناء تسليم التصميم: عندما تحصل على تصميم واجهة مستخدم جديد، قم بفحص سريع للألوان في 30 ثانية.
- عند كتابة CSS: في كل مرة تكتب فيها
colorوbackground-color، فإنك تتخذ قرارًا بشأن إمكانية الوصول. - في مكتبات المكونات (component libraries): قم ببناء تركيبات ألوان يمكن الوصول إليها في مكوناتك الأساسية مثل
ButtonوTagوInputحتى يحصل كل مطور يستخدمها على إمكانية الوصول مجانًا. - أثناء مراجعات الكود (code reviews): يمكن أتمتة اكتشاف مشكلات التباين. إنه فحص بسيط وعالي التأثير يمكنك إضافته إلى عملية فريقك.
في النهاية، يعد فحص التباين أحد أسرع وأسهل الطرق لإحداث تأثير إيجابي هائل على قابلية استخدام منتجك لعدد كبير من الأش