فاحص تباين الألوان: التحقق من التوافق مع WCAG وAPCA

ما هو فاحص التباين اللوني؟

فاحص التباين اللوني أداة تقيس الفرق في السطوع بين لونين متجاورين — عادة لون النص ولون الخلفية — لتحديد ما إذا كان النص مقروءًا لعين الإنسان، بمن فيهم ذوو ضعف البصر وعمى الألوان. الرقم الناتج، المعروف بنسبة التباين، يتراوح من 1:1 حين يكون اللونان متطابقين تمامًا إلى 21:1 حين يكون أحدهما أبيض خالصًا والآخر أسود خالصًا — وهذا الحد الأقصى ليس تقريبًا، بل ناتج مباشر لصيغة الحساب: 1.05 مقسومة على 0.05.

هذه الأداة تحديدًا تأخذ لون النص ولون الخلفية بصيغة hex، وتحسب نسبة التباين بينهما فور الكتابة، دون رفع أي بيانات إلى خادم — كل الحساب يجري داخل متصفحك. تعرض النتيجة كمعاينة حية للنص على الخلفية بثلاثة أحجام، ثم تفصّل الحكم وفق WCAG بمستوييه AA وAAA، وكذلك APCA، وهو مقياس التباين المرشّح لمعيار WCAG 3 القادم. وحين يفشل النص في اجتياز الحد الأدنى، تقترح الأداة أقرب لون فاتح أو غامق من نفس اللون يجعله يجتاز الاختبار، بضغطة واحدة.

كيف تستخدم الأداة

1. أدخل لون النص اكتب كود اللون بصيغة hex من 3 أو 6 أو 8 خانات، بعلامة # أو بدونها، في حقل «لون النص» — أو انقر على المربع الملوّن بجواره لفتح منتقي الألوان الخاص بنظام التشغيل. إذا استخدمت الصيغة ذات 8 خانات، فالزوج الأخير يضبط درجة الشفافية.
2. أدخل لون الخلفية، أو بدّل بين اللونين كرّر الخطوة نفسها في حقل «لون الخلفية» الذي يوفّر حقل hex ومربعًا ملونًا مطابقين. إذا أردت اختبار الحالة المعكوسة — نص فاتح على خلفية داكنة بدل العكس — انقر زر «تبديل» بين الحقلين لتبادل اللونين فورًا دون إعادة كتابتهما.
3. اطّلع على النتيجة فور ظهورها لوحة المعاينة تُلوَّن بلون الخلفية وتعرض الجملة نفسها بثلاثة أحجام — نص عادي 16px، نص عريض 18.5px، ونص كبير 24px — إلى جانب صندوق بحدود يمثّل عنصر واجهة. أسفلها نسبة التباين بخط كبير، ثم خمسة صفوف نجاح أو فشل لمستويي AA وAAA ولعناصر الواجهة، ولوحة APCA بقيمة Lc والمستوى الذي تبلغه. إن فشل النص في اجتياز AA للنص العادي، تظهر رقاقتان تقترحان أقرب لون أغمق وأقرب لون أفتح يحقق 4.5:1 — انقر إحداهما لتطبيقها فورًا.

ماذا تعني هذه المستويات فعليًا؟

يضع WCAG مستويين من التوافق: AA وهو الحد المتعارف عليه عمليًا والذي تشير إليه أغلب معايير الخدمات الرقمية الحكومية في الخليج والعالم العربي عمومًا، وAAA وهو أعلى وأصرم منه ولا تُلزم به أغلب الجهات إلا في سياقات خاصة. لكل مستوى عتبتان مختلفتان بحسب حجم النص: 4.5:1 للنص العادي في AA، تنخفض إلى 3:1 فقط للنص الكبير (كلاهما ضمن معيار النجاح SC 1.4.3) — لأن الحروف الكبيرة تبقى مقروءة بتباين أقل. في AAA (SC 1.4.6) ترتفع العتبتان إلى 7:1 للنص العادي و4.5:1 للنص الكبير.

لكن «النص الكبير» له تعريف دقيق وليس انطباعًا: 18 نقطة (pt) فأكثر، أو 14 نقطة إذا كان عريضًا. ووثيقة WCAG التفسيرية تنص على أن النقطة الواحدة تعادل 1.333px، فتصبح العتبتان عمليًا نحو 24px للنص العادي و18.5px إذا كان عريضًا — وهو ما تعرضه هذه الأداة تحديدًا في المعاينة، بخلاف أغلب أدوات الفحص التي تكتفي بكلمة «كبير» دون رقم. حدود هذه العتبات دقيقة إلى درجة الخانة الواحدة في كود اللون: على خلفية بيضاء، أفتح رمادي يجتاز AA هو ‎#767676 عند 4.54:1، بينما الدرجة الأفتح منه بخطوة واحدة، ‎#777777، تفشل عند 4.47:1. وعلى خلفية سوداء، أغمق رمادي يجتاز هو ‎#757575 عند 4.55:1. والنتيجة أن رماديين اثنين فقط، ‎#757575 و‎#767676، يجتازان AA أمام الأبيض والأسود معًا.

إلى جانب النص، يضع WCAG معيار 1.4.11 (Non-text Contrast) عتبة 3:1 لعناصر الواجهة والرسوم — حدود الحقول، الأيقونات، الأزرار — وهذا ما يمثّله صندوق الحدود المنفصل في المعاينة، لأن هذا العنصر يُحكم بمعيار مختلف تمامًا عن النص المجاور له.

أين يختلف WCAG وAPCA، وما لا تخبرك به هذه الأداة

أوضح مثال على أن WCAG وAPCA يحكمان بمعايير مختلفة تمامًا هو رمادي واحد: ‎#888888. على خلفية بيضاء يعطي هذا اللون نسبة 3.54:1 فقط، فيرسب في اختبار AA للنص العادي — بينما يمنحه APCA قيمة Lc تبلغ 63.1، تتجاوز عتبة Lc 60 المخصصة للنص العام غير نص الفقرات. اعكس الخلفية إلى سوداء، ويصبح الرمادي نفسه 5.92:1، أي نجاح واضح في AA — لكن APCA هذه المرة يمنحه Lc تبلغ -38.6 فقط، وهي بالكاد تتجاوز 30، الحد الأدنى المطلق الذي يضعه APCA لأي نص على الإطلاق. لون واحد، خلفيتان، ومعياران يعكسان الحكم تمامًا في كل مرة.

هذا التناقض ليس استثناءً نادرًا: من بين 65,536 توليفة ممكنة بين رمادي ورمادي، هناك 6,407 توليفة تجتاز AA بينما تقع دون Lc 60 في APCA — أي أن WCAG 2 يجيز عمليًا آلاف التوليفات التي يعتبرها APCA غير كافية. أسوأ حالة مسجّلة هي ‎#757575 على خلفية شبه سوداء ‎#020202: نسبة 4.50:1 تمنحها نجاحًا نظيفًا في AA، بينما تسجّل Lc 29.6 فقط في APCA — أي أقل من الحد الأدنى المطلق 30 الذي يضعه APCA لأي نص كان. هذا بالضبط النمط الذي صُمم APCA لتصحيحه: تباينات قريبة من الأسود يبالغ WCAG 2 في تقدير مقروئيتها، ولهذا لا يُنصح بالاعتماد على نسبة WCAG وحدها عند تصميم الوضع الداكن. الحالة المعاكسة نادرة بالفعل: 11 زوجًا فقط من الرماديات ترسب في AA بينما تجتاز عتبة APCA لنص الفقرات Lc 75 — أقواها أبيض على ‎#777777، بنسبة 4.47:1 راسبة رغم أنها تسجّل Lc 76.6.

مع كل هذه الدقة الرقمية، يبقى القيد الأهم لهذه الأداة — ولأي حاسبة تباين أخرى — أنها لا تقيس شكل الحروف، بل لونين مسطّحين فقط. ولهذا القيد وقع خاص على النص العربي تحديدًا: حروف العربية مبنية من وصلات رفيعة، وتحمل نقاطًا وعلامات تشكيل هي بطبيعتها إشارات صغيرة لا كتلًا صلبة، وتباين يكفي لحرف لاتيني كبير الحجم قد لا يكفي لإظهار هذه التفاصيل الدقيقة بوضوح — لأن لا WCAG ولا APCA يأخذان سُمك الحرف في الحسبان أصلًا، فكلاهما يقارن لونين فقط بصرف النظر عمّا يُرسم بهما. كذلك فإن تعريف «النص الكبير» في WCAG مصمم أصلًا للحروف اللاتينية، والمعيار نفسه يقر بالمشكلة حين يضيف عبارة «أو حجم خط يعطي أثرًا مكافئًا لخطوط الصينية واليابانية والكورية» — لكنه لا يذكر أي مكافئ للعربية، فمن يطبّق هذه العتبة على نص عربي يستخدم رقمًا لم يُعاير أصلًا لحروفه. يزيد الأمر تعقيدًا أن التغليظ (bold) ليس عملية محايدة في العربية كما هو في اللاتينية: زيادة سماكة الخط تقرّب الوصلات المتقاربة أصلًا من بعضها وقد تُطمس فراغات الحروف الداخلية، فنصيحة «غلّظ الخط ليُحتسب نصًا كبيرًا» قد تضر بالمقروئية في العربية أكثر مما تنفعها في الإنجليزية. الخلاصة العملية: لا تكتفِ بالرقم، وتحقق من النص العربي الفعلي بحجمه الحقيقي على الشاشة.

قيود أخرى يستحسن معرفتها. أولًا، APCA لا يزال طريقة مرشّحة ضمن مسودة WCAG 3 التي لم تُعتمد بعد، وليس معيارًا ملزمًا في أي تشريع اليوم؛ وما تشير إليه معايير الخدمات الحكومية الرقمية في الخليج والعالم العربي عمومًا، كما في أغلب العالم، هو WCAG 2 عند المستوى AA أي 4.5:1 — فقيمة Lc في هذه الأداة معلومة إضافية مفيدة، لكن عند وجود تدقيق رسمي أو عقد يُلزم بإمكانية الوصول، فالرقم الذي يُحتسب عليه هو نسبة AA. ثانيًا، الأداة تقارن لونين مسطّحين فقط: نص فوق صورة أو تدرّج لوني أو طبقة شبه شفافة له نسبة تباين مختلفة عند كل بكسل، ولا يوجد رقم واحد يصف ذلك. ثالثًا، كلا المعيارين معرّف داخل نطاق sRGB، فلون بنطاق واسع مثل Display P3 يقع خارج ما يصفه أي منهما. رابعًا، اجتياز الاختبار ليس مرادفًا للمقروئية الفعلية: طول السطر وتباعد الأسطر وسطوع الشاشة والإضاءة المحيطة كلها عوامل حقيقية لا يقيسها أي من النموذجين. وأخيرًا، الأداة تراعي شفافية لون النص وحده: نص أسود بشفافية 60% فوق خلفية بيضاء يُركَّب فعليًا إلى ‎#666666، ونسبته 5.74:1 لا 21:1 كما لو كان أسودًا خالصًا، وهذا اللون المركَّب هو ما تُبنى عليه كل الأرقام المعروضة؛ أما إذا كانت الخلفية نفسها شبه شفافة فيجب مزجها أولًا مع ما تحتها من ألوان، لأن الأداة تفترض دائمًا خلفية صلبة.

لماذا هذه الأداة مجانية؟

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

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