مرونة الألوان للمرتبطين بالتطوير الضوء، محاكاة الإعاقات، وتصحيح المشكلات

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

ما ينص إليه معيار ويب لقابلية التفاعل (WCAG)

مبادئ ويب لقابلية التفاعل (WCAG) تحدد النسب القصوى للضوء بين النص والخلفية. تبدأ هذه النسب من 1:1 (ألوان متطابقة، غير مرئية) إلى 21:1 (أسود على أبيض، أقصى حد).

يحدد معيار WCAG 2.1 مستوىين من الامتثال:

مستوى ويب	نسبة التباين	حجم النص	مثال
AA	4.5:1	نص عادي (< 18pt / < 14pt بخط مُضاعف)	أغلب النص المُستخدم
AA	3:1	نص كبير (≥ 18pt / ≥ 14pt بخط مُضاعف)	العناوين
AAA	7:1	نص عادي	أعلى قابلية للقراءة
AAA	4.5:1	نص كبير	العناوين (أوسع قواعد)
أي	3:1	أجزاء واجهة المستخدم والرسومات	الرموز، حدود النماذج

مستوى AA هو المعيار القانوني في معظم الدول. مستوى AAA مُناسب للنصوص المهمة مثل النص الأساسي، لكنه نادرًا ما يُطلب على مستوى كامل لموقع معين.

كيف تُحسب نسبة الضوء

تُستخدم الصيغة التي تأخذ منحنى الإضاءة لكل لون:

Contrast ratio = (L1 + 0.05) / (L2 + 0.05)

حيث L1 هي إضاءة اللون الأخف و L2 هي إضاءة اللون الأظلم. الإضاءة نفسها تأتي من تطبيق تدقيق خطي لكل قناة RGB وتقديرها (أحمر: 0.2126، أخضر: 0.7152، أزرق: 0.0722) - لأن عيون الإنسان أكثر حساسية للأخضر.

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

ما يخبرك به هذا التمثيل في الممارسة: لون متوسط من الأزرق #767676 على أبيض #ffffff يصل إلى 4.5:1 تقريبًا - وهو الحد الأدنى للنسبة AA. إذا أضفت إضاءة، فستفشل. وإذا جعلت الألوان أعمق، فستزيد من الحد الأدنى.

الإعاقات المرتبطة بالرؤية: أكثر من ما تعتقد

يُقدر أن 8% من الرجال و0.5% من النساء يعانون من اضطرابات في رؤية الألوان. أنواعها الرئيسية:

• الإعاقات الديوتروبيا — تقليل الحساسية للأخضر. الشكل الأكثر شيوعًا (~5% من الرجال). يصبح من الصعب التمييز بين الأحمر والأزرق؛ قد يظهر كأحمر أو أصفر.
• الإعاقات بروتانوبيا — تقليل الحساسية للأحمر (~1% من الرجال). تبدو الأحمر داكنة ومتقنة؛ يصبح التمييز بين الأحمر والأزرق مشابهًا للإعاقات الديوتروبيا، لكن الأحمر يفقد بريقه.
• الإعاقات تريتانوبيا — تقليل الحساسية للأزرق (رائعة، ~0.003%). يصبح التمييز بين الأزرق والأصفر محدودًا؛ يظهر الأزرق أخضرًا، والأصفر أزرقًا.

هذه ليست حالات نادرة. إذا كان منتجك يمتلك 10,000 مستخدم شهريًا، فبمعدل إحصائي 400 إلى 500 منهم يعانون من اضطرابات في رؤية الألوان.

لماذا لا يكفي استخدام اللون وحده (معيار WCAG 1.4.1)

معيار نجاح WCAG 1.4.1 - "استخدام اللون" - يقول إن اللون لا يمكن أن يكون وسيلة لنقل المعلومات، أو لتحديد إجراء، أو لتمييز عنصر بصر. بدلاً من كتابة منطق القسمة بنفسك، استخدم الفشل الشهير: نموذج يُستخدم لوضع علامة على الحقول غير الصالحة باللون الأحمر. يرى شخص يعاني من بروتانوبيا هذه الحقول كأحمر داكن - مثل الحقول الصالحة في الظلام. لا يوجد مؤشر آخر.

الحل ليس إزالة اللون - بل إضافة إشارة ثانية. رمز، تغيير حدود، تسمية، رسالة خطأ مدمجة. يصبح اللون دعمة، وليس وسيلة للإبلاغ.

كيف تصل إلى حل حقيقي لمشكلة التباين

الاستجابة الأولى هي تغيير اللون - تغيير اللون الأزرق إلى لون أزرق مختلف. هذا لا يساعد عادة.

تغيير اللون لا يؤثر كثيرًا على نسبة التباين. ما يُؤثر هو مستوى الإضاءة. في نظام HSL، يتحكم القيمة L بمستوى الإضاءة. لحل مشكلة التباين:

أضف إضاءة للون الأمامي (زيادة الفرق في L مقارنة بالخلفية) - أو خفف الإضاءة للخلفية

1. احتفظ بدرجة اللون ودرجة التباين - فقط تغيّر مستوى الإضاءة
2. أعد التحقق من النسبة
3. أحد الأسباب الشائعة: اختيار ألوان العلامة التجارية من حيث الجمالية وليس القابلية للقراءة. لون العلامة التجارية المميز (النيلي) على أبيض يعطي 2.4:1 - يفشل في مستوى AA. اجعله أعمق إلى

وستصل إلى 4.7:1 - يمر. نفس عائلة اللون، تغيير بسيط في هوية العلامة التجارية. #00b4a2 بالنسبة للنصوص المُستخدمة كمُستعمرات - غالبًا ما تُصمم بـ #007a6e أو مماثلة - تصبح المشكلة أسوأ. الأزرق على الأبيض عادة 2.5 إلى 3:1. ارفع إلى

أدنى حد، أو اعيد التفكير في استخدام النص كمُلخص رئيسي (وهو ما ينصح به معيار WCAG أيضًا). color: #999 عملية اختبار #767676 تتضمن عملية وضوحية للوصول إلى التصميم طبقًا لثلاثة طبقات:

1. التحقق التلقائي (سريع، لكن غير مكتمل)

أداة التحقق وبرامج CI تكتشف الفشل الواضح.

axe-core
مُدمج مع Jest، Playwright، وCypress. Lighthouse (مدمج في Chrome DevTools) يعطي تقييمًا سريعًا للوصول إلى التصميم. تُستخدم هذه الأدوات للكشف عن فشل التباين، نقص النص، وسوء استخدام ARIA - لكنها تقيّم فقط ما هو مرئي في DOM عند اختبار الوقت. 2. التمثيل (سريع، يكشف عن مشاكل التصميم الحقيقية) أعد تجربة كيف تبدو واجهة المستخدم تحت ظروف رؤية مختلفة قبل الإطلاق. يسمح لك alt مُحاكاة الإعاقات البصرية

بتحميل صورة ورؤية كيف تبدو من خلال دوتروبيا، بروتانوبيا، تريتانوبيا، وغيرها. يحتوي Chrome DevTools أيضًا على محاكاة الإعاقات البصرية تحت إعدادات الرسوم.
يُظهر التمثيل مشاكل لا تكتشفها الأدوات التلقائية: لوحة تحكم حيث يصبح مخطط "الخطأ" غير مميز عن مخطط "النجاح" لأن كلاهما يظهر بلون بني تحت دوتروبيا. قد تمر نسبة كل مخطط بمستوى AA - لكنهما لا يُميّزان بصرًا لمستخدم يعاني من إعاقات بصرية. 3. اختبار المستخدم الحقيقي (بطيء، موثوق) لا يمكن استبدال ملاحظات الناس الذين يعانون من إعاقات بصرية. اجعل الوصول إلى التصميم جزءًا من بحثك حول المستخدمين. تقدم منظمات مثل Paciello Group خدمات اختبار؛ كما يمكن التسجيل من خلال مجتمعات مخصصة للإعاقات.

أدوات تُستخدم في العملية

— انسخ كل لون من لونك، وشاهد كل توازي بين الخلفية والنص مع حالة الامتثال أو الفشل حسب معيار WCAG
— ارفع صورة، وشاهد كيف تبدو تحت أنواع الإعاقات الرئيسية

axe DevTools

• مخطط مقارنة الألوان (مُوسع متصفح) - يمكن استخدامه على أي صفحة حية، يُظهر انتهاكات مع إشارات للعناصر
• 3. اختبار المستخدم الحقيقي (بطيء، موثوق) أداة Figma
• — "Stark" و "A11y – Color Contrast Checker" تعمل مباشرة داخل ملفات التصميم قبل البدء بالبناء أداة سطر أوامر
• — تحقق من النسبة بسهولة، مفيدة في مراقبة التحقق قبل الإرسال أو في بيئة CI تحقق من نسب التباين أثناء التصميم، وليس بعد التحقق من الجودة. 4.5:1 للنصوص الأساسية، 3:1 للنصوص الكبيرة وأجزاء واجهة المستخدم. عند إصلاح لون يفشل، اضبط مستوى الإضاءة - لا لون. اجرِ محاكاة للون الرئيسي وجميع الرسوم البيانية. ولا تستخدم اللون كوسيلة وحيدة لتحديد الحالة.
• color-contrast الوصول إلى التصميم ليس قائمة تُختبر في النهاية. ضعف التباين هو خطأ يُرسل بشكل سري، يؤثر على المستخدمين الحقيقيين، ويُمكن إصلاحه في أقل من 5 دقائق بمجرد معرفة مكان المشكلة. — تحقق من نسبة التوازن القابل للبرمجة، ويُستخدم في مراقبة التسليم أو في بيئة CI

عندما يهم الموضع الفيزيائي للمفتاح أكثر من الحرف (أمثلة: التحكم في الألعاب، أو المفاتيح المبنية على الموضع).

تحقق من نسب التباين أثناء التصميم، وليس بعد التحقق من الجودة. 4.5:1 للنص الأساسي، 3:1 للنص الكبير وعناصر واجهة المستخدم. عند تصحيح لون فاشل، اضبط الوضوح (lightness) وليس لونه (hue). اجرِ محاكاة للنظام الأساسي للون وأي تحليل بيانات. ولا تستخدم اللون كمؤشر وحيد للحالة.

الوصول إلى التصميم ليس قائمة تُجرى في النهاية. نقص التباين هو عطل يُرسل بشكل سري، يؤثر على المستخدمين الحقيقيين، وغالبًا ما يمكن تصحيحه خلال 5 دقائق فقط بمجرد معرفة مكان المشكلة.

قد يعجبك أيضاً