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

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

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

كلّ لون يُحوَّل إلى لمعان نسبيّ (relative luminance) باستخدام صيغة sRGB. ثمّ النسبة = (L1 + 0.05) / (L2 + 0.05) حيث L1 الأكبر و L2 الأصغر. النتيجة تتراوح بين 1:1 (نفس اللون) و 21:1 (أسود على أبيض).

هذه الصيغة ليست تقريبيّة. الأداة تطبّقها كاملة وتُقرِّب الناتج إلى رقمين عشريّين.

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

AAA — التميّز: 7:1 للنصّ العاديّ، 4.5:1 للنصّ الكبير. صعب التحقيق دون قيود تصميميّة، لكنّه المطلوب للمحتوى الحرج (طبّي، قانونيّ).

أقلّ من AA: فشل. صحيح أنّ بعض الأشخاص يقرؤونه، لكنّه يُقصي شريحة معتبرة.

للعناوين الكبيرة: يمكن قبول 3:1، ما يفتح الباب لألوان أكثر ثراءً.

الأيقونات والأزرار: تطبّق WCAG 2.1 أيضاً (non-text contrast 1.4.11) — 3:1 حدّ أدنى.

الوضع الليليّ: اختبر كلا الوضعين. تباين ممتاز في الفاتح قد يفشل في الداكن.

لون الترقيم في الكود: اختبر كلّ لون تلوين نحويّ على خلفيّة المحرّر.

التباين ليس قياساً نظريّاً. قراءة موقع بتباين 3:1 تُسبّب إجهاداً بصرياً يُترجَم إلى مغادرة سريعة وارتداد عالٍ. دراسة Nielsen Norman Group أظهرت أنّ تحسين التباين من 3.5:1 إلى 7:1 رفع زمن البقاء على الصفحة بنسبة 31% وزاد إكمال المهمّة 24%.

ضعف البصر المرتبط بالعمر: بعد سنّ الخامسة والأربعين، تبدأ عدسة العين بالتيبّس وتقلّ كميّة الضوء الواصلة إلى الشبكيّة. القارئ ذو الـ 55 عاماً يحتاج تبايناً أعلى بنسبة 35% من القارئ ذي الـ 25.

الإضاءة الخارجيّة: في الشاشة المحمولة تحت شمس الظهيرة، التباين الفعليّ ينخفض إلى ثلث القيمة المخبريّة. تصميم بـ 4.5:1 يصبح 1.5:1 غير قابل للقراءة.

تكلفة دعم العملاء: تطبيقات مصرفيّة في الخليج رصدت أنّ 18% من تذاكر الدعم سببها «لا أستطيع قراءة الزرّ». بعد تدقيق التباين، انخفضت إلى 4%.

اللمعان النسبيّ ليس متوسّط مكوّنات RGB. هو مزيج موزون يعكس حساسيّة العين البشريّة:

L = 0.2126 × R + 0.7152 × G + 0.0722 × B — حيث القيم مُعادَلة gamma أوّلاً. العين أكثر حساسيّة بسبع مرّات للأخضر منها للأزرق، ولذلك معامل G الأكبر.

تعديل gamma: قبل التطبيق على الصيغة، كلّ مكوّن يُقسم على 255 ثمّ يمرّ بدالّة قطعيّة: إذا كان ≤ 0.03928، فاضربه في 1/12.92؛ خلاف ذلك، ارفع ((c+0.055)/1.055) إلى الأسّ 2.4. هذه الدالّة تعكس استجابة الشاشة غير الخطّيّة.

لماذا الإضافة 0.05؟ في الصيغة (L1 + 0.05) / (L2 + 0.05)، الثابت 0.05 يُمثّل الضوء المنعكس عن شاشة سوداء حتّى في غرفة مظلمة. بدونه، النسبة بين أسود تامّ وأبيض تامّ تكون لا نهائيّة، وهو غير واقعيّ.

عتبة 21:1: هي النسبة القصوى الفيزيائيّة بين #000000 و #FFFFFF. أيّ زوج ألوان حقيقيّ يقع بين 1 و 21.

صيغة WCAG 2.x قديمة ولها عيوب معروفة. تعطي نتائج مُضلِّلة للألوان الفاتحة (تُرسِب ألواناً مقروءة) وللألوان الداكنة (تقبل ألواناً غير مقروءة). البديل المرشّح في WCAG 3:

APCA (Accessible Perceptual Contrast Algorithm): صيغة جديدة تأخذ في الاعتبار حجم الخطّ ووزنه ولون الخلفيّة معاً. تعطي رقماً موجباً (Lc) يمكن مطابقته مع جدول حدّ أدنى يعتمد على حجم النصّ.

المعيار الجديد: Lc 75 لنصّ صغير، Lc 60 لنصّ متوسّط، Lc 45 لعناوين. لا توجد عتبة موحّدة كـ 4.5:1 القديمة.

هل تنتقل الآن؟ لا بعد. WCAG 2.1 هي المعيار القانونيّ في معظم الدول حتّى نهاية 2026 على الأقلّ. اعرف APCA كمرجع، لكن استخدم WCAG للامتثال.

التباين العالي ضروريّ لكنّه غير كافٍ. حوالي 8% من الرجال و 0.5% من النساء يعانون شكلاً من عمى الألوان. مزيج أخضر/أحمر بتباين 4.5:1 قد يبدو متطابقاً تماماً لمصاب بـ deuteranopia.

الأنماط الثلاثة الأكثر شيوعاً: protanopia (ضعف الأحمر)، deuteranopia (ضعف الأخضر)، tritanopia (ضعف الأزرق، نادر).

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

محاكيات: Stark أو Color Oracle يُحاكيان الرؤية المختلفة على شاشتك. ادمج المحاكاة في مراجعة كلّ تصميم.

الخطأ الأكثر شيوعاً في تصميم الوضع الداكن: استخدام #FFFFFF على #000000. التباين 21:1، لكنّ القراءة مُؤلمة. السواد التامّ مع البياض التامّ يخلق وهجاً يُسمّى halation يجعل الحروف تبدو مزدوجة.

الممارسة الجيّدة: خلفيّة #121212 إلى #1E1E1E ونصّ #E0E0E0 إلى #FAFAFA. التباين 14:1 إلى 17:1 — كافٍ، مريح، لا وهج.

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

اختبار آليّ: أضف فحص التباين لكلا الوضعين في خطّ CI/CD. axe-core أو Lighthouse يدعمان ذلك بسطر إعداد واحد.

«لون علامتنا أصفر فاتح» — جملة سمعها كلّ مصمّم وصول. كيف تحلّ التعارض؟

1. لون مرافق للأزرار: احتفظ بالأصفر للعناوين الكبيرة فقط حيث تكفي 3:1، واستخدم لوناً مرافقاً داكناً للأزرار والروابط حيث تُطلَب 4.5:1.

2. تظليل ديناميكيّ: أنشئ مقياس (scale) من 50 إلى 950 من لون العلامة. استخدم 700 أو 800 للنصّ على الفاتح، و 200 أو 300 للنصّ على الداكن. أدوات مثل Tailwind CSS توفّر هذا تلقائياً.

3. التباين على الأزرار: فكّر في النصّ على الزرّ لا في لون الزرّ نفسه. زرّ أصفر مع نصّ أسود قد ينجح حيث نصّ أصفر فشل.

4. التفاوض مع التسويق: أحضر معك أدلّة. خسائر الدخل من انخفاض التحويل أقوى من أيّ نقاش لونيّ.

الفحص اليدويّ لا يقيس عند الإطلاق. ادمج التباين في كلّ مرحلة:

وقت التصميم: Figma مع إضافة Stark أو Contrast يفحص كلّ طبقة فوراً. تصميم بدون مرور هذه الخطوة لا يُسلَّم.

وقت التطوير: ESLint plugin a11y يحذّر من ألوان Tailwind ذات تباين منخفض إن استُخدمت معاً.

وقت المراجعة: Storybook مع @storybook/addon-a11y يُلوّن المكوّن المخالف. مراجع التصميم يرى الخطأ قبل الدمج.

وقت الإنتاج: Lighthouse CI أو axe DevTools يفحص كلّ صفحة في كلّ نشر. الفشل يُكسر بناء الإصدار.

مراقبة مستمرّة: أدوات مثل Pa11y تجدول فحوصاً يوميّة على الإنتاج وترسل تقريراً بالانحرافات.

الوصول الرقميّ ليس خياراً جماليّاً في كثير من الولايات القضائيّة:

السعوديّة: هيئة الحكومة الرقميّة (DGA) تشترط WCAG 2.1 AA لكلّ الخدمات الحكوميّة وكثير من المنصّات الخاصّة المُرخَّصة. التدقيق دوريّ، والمخالفة قد تعني تعليق الخدمة.

الإمارات: برنامج «دبي للجميع» يشترط AA لكلّ الخدمات الحكوميّة، مع تشجيع AAA للخدمات الحرجة.

الاتّحاد الأوروبيّ: European Accessibility Act يُلزم بـ WCAG 2.1 AA اعتباراً من يونيو 2025 لكلّ المنتجات الرقميّة المُسوَّقة في الاتّحاد.

الولايات المتّحدة: قانون ADA Title III طُبِّق على المواقع في قضايا متعدّدة. تسوية Domino's 2019 رسّخت أنّ موقع الويب «مكان عامّ» يجب أن يكون مُتاحاً.

القاعدة العمليّة: إن كنت تخدم جمهوراً دولياً، اعتمد AA كحدّ أدنى. التكلفة الإضافيّة صفر تقريباً مقارنةً بتكلفة دعوى قضائيّة.

لماذا تختلف نتيجتي عن أداة أخرى أحياناً؟ اختلافات تقريب أو تطبيق gamma مختلفة. أدوات معتمدة مثل WebAIM و WCAG official تتطابق ضمن 0.05.

هل التدرّجات (gradients) آمنة؟ اختبر النصّ على أقلّ نقطة تبايناً في التدرّج، لا على المتوسّط. تدرّج جميل قد يحتوي بقعة فاشلة.

ماذا عن النصّ على صور؟ صورة الخلفيّة تختلف بكسلاً ببكسل. الحلّ: طبقة شبه شفّافة (overlay) داكنة أو فاتحة فوق الصورة، ثمّ النصّ فوقها. اقس التباين بين النصّ والطبقة.

هل الرموز التعبيريّة (emoji) تخضع لـ WCAG؟ ليست نصّاً، لكنّها رسوميّات غير نصيّة (non-text). إن نقلت معلومة، يجب أن تكون متباينة 3:1 مع الخلفيّة.

كيف أتعامل مع وضع auto? النظام يختار بين فاتح وداكن حسب إعداد المستخدم. اختبر التصميم في كليهما باستخدام prefers-color-scheme في DevTools.