ما هو تباين الألوان؟

ما هو تباين الألوان؟

يعبر عن الفرق بنسبة تتراوح من 1:1 (بلا تباين على الإطلاق) إلى 21:1 (أسود خالص على أبيض خالص). والنسبة الأعلى تعني أن التمييز بين اللونين أسهل، في حين تعني النسبة الأدنى أنهما يبدآن في الاندماج، خصوصا لدى من لديهم حدة إبصار منخفضة.

أين ينطبق التباين

لا يقتصر التباين على نص المتن. فهو يشمل أيضا الأيقونات وحدود حقول النماذج والأزرار وأي عنصر آخر يحتاج إلى أن يبرز عما خلفه.

كيف تقاس نسبة التباين

لا تقدر النسبة بالعين. بل تحسب من الإضاءة النسبية لكل لون، وهي قيمة تستند إلى مكوناته من RGB. وتقارب هذه القيمة مدى سطوع اللون كما تراه العين البشرية. ثم تدخل قيمتا الإضاءة في معادلة قياسية، وتكون النتيجة نسبة التباين.

التحقق منه عمليا

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

متطلبات تباين الألوان بموجب WCAG

WCAG sets specific, testable thresholds. It doesn't just say "make text readable."

متطلبات المستوى AA

بموجب WCAG 2.1 المستوى AA، يحتاج النص العادي إلى نسبة لا تقل عن 4.5:1. أما النص الكبير، أي 18pt عاديا أو 14pt عريضا فما فوق، فيحتاج إلى 3:1 فقط. فالأحرف الأكبر تبقى مقروءة عند تباين أقل، ولهذا ينخفض الحد المطلوب.

تباين العناصر غير النصية

تغطي قاعدة منفصلة العناصر غير النصية. فمكونات الواجهة كحدود الأزرار وأطر حقول النماذج تحتاج إلى 3:1. وكذلك العناصر الرسومية التي تحمل معنى، مثل الأيقونات.

المستوى AAA والاستثناءات

يرفع المستوى AAA السقف أكثر: 7:1 للنص العادي و4.5:1 للنص الكبير. ومعظم المعايير القانونية ومعايير المشتريات تحيل إلى AA لا إلى AAA. والعناصر الزخرفية والشعارات معفاة عموما، لأنها لا تحتاج إلى نقل معلومات بذاتها.

لماذا يهم تباين الألوان في إمكانية الوصول

التباين غير الكافي لا يبدو باهتا فحسب، بل يجعل النص غير مقروء فعلا لدى شريحة معتبرة من الزوار.

عوائق متصلة بالبصر

يقلل ضعف البصر وبعض أشكال عمى الألوان قدرة الشخص على التمييز بين درجات متقاربة بفروق دقيقة. والنص الذي يبدو جيدا لمن لديه بصر اعتيادي قد يكون غير مرئي عمليا لمن ليس كذلك.

عوائق ظرفية

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

لماذا تلتقط عمليات التدقيق هذا أولا

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

تباين الألوان في التصميم مقابل التطوير

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

ما يملكه التصميم

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

ما يملكه التطوير

التطوير هو من يحدد ما إذا كان ذلك الاختيار يصمد عند الاحتكاك بواجهة حقيقية. فالزر الذي يحقق 4.5:1 في حالته الافتراضية قد يهبط دون الحد في حالة التمرير فوقه أو التعطيل أو التركيز، إذا لم تفحص تلك الحالات على حدة. ورمز لوني يجتاز الفحص فوق خلفية صلبة قد يخفق فوق صورة أو تدرج لوني.

لماذا يجب فحصه مرتين

اجتياز أداة الفحص داخل ملف التصميم لا يعني أن العمل قد انتهى. فالتباين يجب التحقق منه مجددا بعد بناء الواجهة فعليا، عبر حالاتها التفاعلية، لا في النموذج الثابت وحده.

كيف تفحص تباين الألوان

الفحوص اليدوية

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

الفحوص الآلية

يمكن لأدوات الفحص الآلي لإمكانية الوصول أن تتحقق من التباين على نطاق واسع عبر موقع إلكتروني بأكمله.

أين تقصر الأتمتة

لا تلتقط أدوات الفحص إلا ما يمكن كشفه برمجيا. فالنص المدمج داخل صورة، والنص فوق صورة أو فيديو في الخلفية، والمحتوى الموجود في مكونات غير قياسية، كلها قد تفلت من الفحص وتحتاج إلى تحقق يدوي بدلا منه.

ولهذا السبب يؤكد التباين عادة مرتين: مرة آليا عبر الموقع بأكمله، ومرة يدويا على حفنة المكونات، كالبانرات الرئيسية والأدوات المخصصة وكل ما له خلفية غير صلبة، حيث تكون الأتمتة أقل موثوقية.