تباين الألوان وإمكانية الوصول: نسب WCAG وفحصها وإصلاحها

يبدو النص الرمادي الفاتح على خلفية بيضاء أنيقًا في ملف التصميم. لكن على هاتف تحت أشعة الشمس، أو لدى شخص ضعيف البصر، تصبح قراءته عناءً حقيقيًا. وهو أيضًا أكثر أخطاء إمكانية الوصول شيوعًا على الإطلاق: فقد وجد WebAIM Million 2026 (يُفتح في علامة تبويب جديدة) نصًا منخفض التباين في 83.9% من أكثر مليون صفحة رئيسية زيارةً، بمتوسط 34 حالة مستقلة في الصفحة الواحدة.

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

ما نسبة تباين الألوان؟

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

المعادلة هي (L1 + 0.05) / (L2 + 0.05)، حيث L1 هو النصوع النسبي للون الأفتح، وL2 النصوع النسبي للون الأغمق. لن تحتاج أبدًا إلى حسابها يدويًا، لكن هناك تفصيلًا مهمًا: النصوع وحده هو ما يُحتسب، لا درجة اللون (hue). ولهذا قد يبدو النص الأحمر على خلفية خضراء زاهيًا، ومع ذلك يحصل على نتيجة سيئة.

والتفصيل الآخر الذي يغفل عنه الناس هو التقريب. إذ تنص وثيقة W3C لفهم المعيار 1.4.3 (يُفتح في علامة تبويب جديدة) على أن القيم المحسوبة «ينبغي ألّا تُقرَّب (فمثلًا، 4.499:1 لا تستوفي عتبة 4.5:1)». لذلك ينجح الرمادي #767676 على الأبيض (4.54:1)، بينما يُخفق #777777 على الأبيض (4.48:1)، مع أن أحدًا لا يستطيع التمييز بينهما بالعين.

ما نسبة التباين التي يشترطها WCAG؟

في المستوى AA، وهو المستوى الذي تحيل إليه معظم القوانين والعقود، يحتاج النص العادي إلى 4.5:1 على الأقل مقابل خلفيته، والنص الكبير إلى 3:1 (معيار النجاح 1.4.3). وتحتاج مكونات الواجهة والرسومات ذات الدلالة إلى 3:1 مقابل الألوان المجاورة لها (1.4.11). أما المستوى AAA الأكثر صرامة فيطلب 7:1 للنص العادي و4.5:1 للنص الكبير (1.4.6).

لماذا 4.5:1؟ يوضح W3C أن هذه النسبة «تعوّض الانخفاض في حساسية التباين الذي يعانيه عادةً المستخدمون الذين لديهم فقدان في البصر يعادل حدة بصر 20/40 تقريبًا». بعبارة أخرى، وُضعت لمن لديهم ضعف متوسط في البصر، ومنهم كثير من العملاء الأكبر سنًا الذين لا يرون أنفسهم أبدًا من ذوي الإعاقة.

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

ما الذي يُعدّ نصًا كبيرًا؟

النص الكبير في WCAG هو ما لا يقل عن 18 نقطة، أو 14 نقطة على الأقل إذا كان بخط عريض. ويحوّل W3C هذه القيم إلى نحو 24 بكسل CSS، و18.5 بكسل للخط العريض. وكل ما هو أصغر يحتاج إلى نسبة 4.5:1 كاملة. ونص المتن والتعليقات على الصور وتسميات النماذج والأسعار وروابط التذييل لا تكاد تكون نصًا كبيرًا أبدًا، لذا تحتاج إلى النسبة الأعلى.

إليك كيف يبدو ذلك عمليًا. الرمادي #949494 على الأبيض يسجّل 3.03:1. وهذا مقبول لعنوان بحجم 28 بكسل، لكنه إخفاق لفقرة بحجم 16 بكسل باللون نفسه. وكثير من المواقع تنجح في عناوينها وتخفق في كل ما تحتها.

الخطوط الرفيعة والزخرفية تحتاج إلى عناية إضافية. يشير W3C إلى أنه بسبب تنعيم الحواف (anti-aliasing)، «قد تعرض برامج المستخدم الخطوط الرفيعة جدًا أو غير المألوفة بلون أبهت بكثير» من اللون الذي اخترته. فإذا كان خط علامتك التجارية بوزن خفيف، فاترك لنفسك هامشًا فوق 4.5:1 بدل أن تستهدف 4.51.

هل ينطبق التباين على الأزرار والأيقونات ومؤشرات التركيز والرسوم البيانية؟

نعم. فبموجب معيار النجاح 1.4.11 (المستوى AA)، كل ما يحتاج الناس إلى رؤيته للتعرف على عنصر تحكم أو حالته أو على رسم ما يجب أن يحقق 3:1 مقابل الألوان المجاورة له. ويشمل ذلك حدود حقول النماذج، والأيقونات التي لا تصاحبها تسمية نصية، وإطارات التركيز، وحالات مربعات الاختيار ومفاتيح التبديل، وخطوط الرسوم البيانية وأجزاءها. أما النص داخل الزر فما زال يحتاج إلى 4.5:1.

• حقول النماذج: حدّ رمادي فاتح #CCCCCC على الأبيض يسجّل 1.61:1. فإذا كان هذا الخط الباهت هو الشيء الوحيد الذي يبيّن مكان الكتابة، فهو إخفاق.
• الأزرار: لا يشترط WCAG حدًا مرئيًا حول كل زر. إذ تقول وثيقة W3C لفهم المعيار 1.4.11 (يُفتح في علامة تبويب جديدة) إن الحد لا يلزم إلا حين لا توجد وسيلة مرئية أخرى للتعرف على عنصر التحكم. فإذا كان الزر لا يُعرف إلا من شكله الملوّن، فيجب أن يحقق هذا الشكل 3:1 مقابل الصفحة.
• الأيقونات: عدسة البحث، أو القلب الخاص بقائمة الأمنيات، أو أيقونة سلة التسوق، إذا لم يكن بجانبها نص، تحتاج إلى 3:1.
• مؤشرات التركيز: الإطار الذي يُظهر تركيز لوحة المفاتيح يجب أن يتباين مع الخلفية المحيطة به. ويتناول دليلنا إلى WCAG 2.2 معايير التركيز الأحدث.
• الرسوم البيانية: الخطوط في الرسم البياني الخطي وشرائح الرسم البياني الدائري تحتاج إلى 3:1، ما لم تُعرض القيم نفسها نصًا أيضًا.
• عناصر التحكم المعطّلة مستثناة، وإن كان الناس يحتاجون مع ذلك إلى معرفة ما إذا كان الزر قابلًا للضغط.

الروابط داخل النص الجاري حالة خاصة. فإذا كانت لا تتميز إلا باللون، بلا خط تحتها، فإن تقنية W3C رقم G183 (يُفتح في علامة تبويب جديدة) تطلب 3:1 بين لون الرابط والنص المحيط به، مع بقاء كليهما بحاجة إلى 4.5:1 مقابل الخلفية. والعثور على ثلاثة ألوان تستوفي كل ذلك صعب. أما الخط تحت الرابط فأسهل بكثير.

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

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

• WebAIM Contrast Checker (يُفتح في علامة تبويب جديدة): أدخل رمزين سداسيين عشريين (hex) لتحصل على النسبة، مع النجاح أو الإخفاق للنص العادي والنص الكبير والعناصر الرسومية. وشريط تمرير السطوع فيه مفيد للعثور على أقرب درجة ناجحة.
• Colour Contrast Analyser (يُفتح في علامة تبويب جديدة): تطبيق مجاني لسطح المكتب من Vispero يعمل على Windows وmacOS. تلتقط قطّارة الألوان فيه أي بكسل على الشاشة، وهذا مفيد للنص فوق الصور وفي ملفات PDF والتطبيقات، ويتضمن محاكيًا لعمى الألوان.
• Chrome DevTools: افحص جزءًا من النص وافتح منتقي الألوان. يعرض قسم نسبة التباين (يُفتح في علامة تبويب جديدة) فيه خطّين للمستويين AA وAAA، ويمكنه اقتراح لون ناجح. أما لوحة CSS Overview فتسرد كل مشكلات التباين في الصفحة.
• أدوات الفحص الآلي: تنبّه إضافات المتصفح وLighthouse إلى النص منخفض التباين في الصفحة كلها، لكنها كثيرًا ما تضع على النص فوق الصور أو التدرجات علامة «يحتاج إلى مراجعة يدوية» بدل الحكم عليه بالنجاح أو الإخفاق.

حين تقصر الأدوات، خذ العينات يدويًا. ففي حالة النص على صورة رئيسية كبيرة، افحص أفتح جزء من الصورة خلف أفتح الحروف؛ إذ يدرج W3C الصور الخلفية التي لا توفر تباينًا كافيًا ضمن حالات الإخفاق المعروفة (F83). مرّر المؤشر فوق الأزرار، وانتقل إليها بمفتاح Tab، وتسبّب في ظهور خطأ في نموذج، وانتقل إلى الوضع الداكن إن كان موقعك يوفّره. فالمظهر الداكن قد يخفق هو الآخر: الرمادي #757575 على خلفية #121212 يسجّل 4.07:1. ويضع دليلنا عن كيفية اختبار إمكانية الوصول إلى موقعك التباين إلى جانب الفحوص اليدوية السريعة الأخرى.

كيف أصلح التباين المنخفض دون تغيير هويتي البصرية؟

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

1. أنشئ نسخة آمنة للنص من كل لون من ألوان علامتك التجارية، لا تقل نسبتها عن 4.5:1 مقابل خلفياتك الرئيسية، واستخدمها لنص المتن والروابط والأيقونات الصغيرة.
2. استخدم اللون الأصلي الزاهي للعناوين الكبيرة (تكفي هناك نسبة 3:1)، وللخلفيات والرسوم التوضيحية والزخارف.
3. على ألوان العلامة الفاتحة، غيّر لون نص الزر من الأبيض إلى لون داكن.
4. ضع لوحة مصمتة أو شبه شفافة خلف النص الموضوع فوق الصور.
5. افحص كل الحالات: تمرير المؤشر، والتركيز، والروابط التي سبقت زيارتها، والعنصر المحدد، والخطأ، والنص التوضيحي داخل الحقل.
6. احفظ الأزواج الناجحة رموزًا للتصميم (design tokens) أو إعدادات للقالب، كي ترثها الصفحات الجديدة بدل أن تُخترع من جديد.

التصميم لذوي عمى الألوان: لماذا لا يكفي اللون وحده

التباين واللون مشكلتان منفصلتان. فنحو رجل من كل 12 وامرأة من كل 200 لديهم قصور في رؤية الألوان، وأكثره شيوعًا الخلط بين الأحمر والأخضر، وفقًا لمنظمة Colour Blind Awareness (يُفتح في علامة تبويب جديدة). وينص معيار WCAG 1.4.1 (يُفتح في علامة تبويب جديدة) (المستوى A) على ألّا يكون اللون الوسيلة المرئية الوحيدة لنقل المعلومة، فاقرنه بنص أو أيقونات أو أنماط أو خطوط تحت الكلمات.

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

لترى المشكلة بنفسك، يمكن لأدوات المطوّرين في Chrome محاكاة أنواع القصور في الرؤية، ويتضمن Colour Contrast Analyser محاكيًا أيضًا. والتباين يساعد هنا كذلك: فالنسبة تقيس السطوع لا درجة اللون، لذا يبقى اللونان اللذان بينهما نسبة تباين عالية قابلين للتمييز حتى لو بدت درجتاهما متشابهتين. ولمعرفة المزيد عن كيفية ضبط ضعاف البصر وذوي الإعاقات الأخرى لأجهزتهم، راجع كيف يستخدم الأشخاص ذوو الإعاقة الويب.

هل تكفي أوضاع التباين العالي وأزرار تبديل التباين؟

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

يستخدم بعض الأشخاص ذوي الإعاقة سمات التباين في Windows، التي تستبدل ألوانك بألوانها الخاصة. ويستحق الأمر أن تختبر موقعك وإحداها مفعّلة: فالأيقونات المبنية من صور خلفية قد تختفي، وأنماط التركيز المرسومة بظل الصندوق (box shadow) وحده قد تتلاشى. كما يتيح لك استعلام الوسائط prefers-contrast في CSS أن تقدّم نسخة أعلى تباينًا لمن طلبها في إعدادات نظامه.

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