تباين الألوان الميسّر: شرح إرشادات WCAG للمصممين

تباين الألوان الميسّر: شرح إرشادات WCAG

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

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

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

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

تُحسب نسبة التباين باستخدام الإضاءة النسبية، التي تراعي كيفية إدراك العين البشرية لأطوال موجات الضوء المختلفة. الصيغة هي:

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

حيث L1 هي الإضاءة النسبية للون الأفتح و L2 هي الإضاءة النسبية للون الأغمق. العين البشرية أكثر حساسية للضوء الأخضر من الأحمر أو الأزرق، لذا فإن حساب الإضاءة يوزن القنوات بشكل مختلف.

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

متطلبات التباين في WCAG

تحدد إرشادات الوصول إلى محتوى الويب (WCAG) ثلاثة مستويات من المطابقة: A و AA و AAA. تنطبق متطلبات تباين الألوان على المستويين AA و AAA.

مستوى WCAG AA (الحد الأدنى الموصى به)

AA هو المعيار الأدنى لمعظم المواقع الإلكترونية وهو مطلوب قانونيًا في العديد من الاختصاصات القضائية (بما في ذلك قانون الوصول الأوروبي ولوائح الوصول في الولايات المتحدة وكندا وأستراليا).

| فئة النص | الحد الأدنى للنسبة | مثال للرمادي المطابق على الأبيض | |---------------|--------------|-------------------------------------| | النص العادي (أقل من 18px / 14px غامق) | 4.5:1 | #767676 على الأبيض | | النص الكبير (18px+ غامق أو 24px+ عادي) | 3:1 | #9A9A9A على الأبيض | | مكونات واجهة المستخدم (الحدود، الأيقونات، حقول النماذج) | 3:1 | حدود المكونات، مؤشرات التركيز | | الرسومات غير الزخرفية | 3:1 | المخططات، الرسوم البيانية، الأيقونات |

مستوى WCAG AAA (المُحسَّن)

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

| فئة النص | الحد الأدنى للنسبة | مثال للرمادي المطابق على الأبيض | |---------------|--------------|-------------------------------------| | النص العادي | 7:1 | #595959 على الأبيض | | النص الكبير | 4.5:1 | #777777 على الأبيض |

AAA ليس مطلوبًا للامتثال لمعظم اللوائح، ولكن يوصى به للمواقع التي تخدم كبار السن أو المستخدمين ذوي الإعاقات البصرية.

ما تغطيه هذه المتطلبات

تنطبق متطلبات التباين في WCAG على:

• النص — جميع نصوص المحتوى، والعناوين، والتسميات، والتعليقات، ونصوص الروابط
• النص في الصور — النص الذي يشكل جزءًا من صورة (باستثناء النص الزخرفي)
• مكونات واجهة المستخدم — الأزرار، حقول النماذج، المنزلقات، مفاتيح التبديل، وحدودها
• الأيقونات — الأيقونات الأساسية التي تنقل معلومات (غير الزخرفية)
• مؤشرات التركيز — يجب أن يكون لمخططات تركيز لوحة المفاتيح تباين 3:1 مقابل الخلفية المجاورة

ما لا تغطيه هذه المتطلبات

• الشعارات — النص الذي يشكل جزءًا من شعار العلامة التجارية أو اسم الشركة
• العناصر الزخرفية — الصور الزخرفية البحتة بدون غرض وظيفي
• واجهة المستخدم غير النشطة — الأزرار المعطلة أو عناصر تحكم النماذج (على الرغم من أنه يجب أن تظل قابلة للإدراك)
• النص الحسّي — النص الذي يشكل جزءًا من صورة خلفية حيث لا يكون النص أساسيًا

إخفاقات التباين الشائعة وكيفية إصلاحها

1. النص الرمادي الفاتح

النص الرمادي الفاتح على خلفيات بيضاء هو إلى حد بعيد أكثر إخفاقات التباين شيوعًا. درجة مثل #CCCCCC على الأبيض لها نسبة تباين 1.6:1 فقط — أقل بكثير من الحد الأدنى 4.5:1.

الإصلاح: قم بتغميق النص الرمادي. بالنسبة لنص المحتوى على الأبيض، استهدف على الأقل #595959 (مطابق لـ AAA). حتى #767676 (الحد الأدنى لـ AA لنص 14px) أغمق بشكل ملحوظ من معظم اختيارات الرمادي "الدقيقة".

2. ألوان العلامة التجارية المستخدمة لنص المحتوى

غالبًا ما تكون ألوان العلامة التجارية فاتحة جدًا عند تطبيقها كنص. اللون الأزرق المتوسط مثل #3366CC على الأبيض له نسبة حوالي 3.5:1 — أقل من معيار 4.5:1.

الإصلاح: احتفظ بألوان العلامة التجارية للعناوين واللمسات. استخدم الأسود القريب (#1A1A1A إلى #333333) لنص المحتوى. تحقق من أن أي نص ملون يلبي النسبة.

3. مؤشرات الروابط المعتمدة على اللون فقط

الروابط التي تختلف عن نص المحتوى باللون فقط تفشل في معيار نجاح WCAG 1.4.1 (استخدام اللون). قد لا يدرك المستخدمون المصابون بعمى الألوان الفرق.

الإصلاح: قدم دائمًا مؤشرًا غير لوني للروابط. الأساليب الشائعة:

• تسطير الروابط (الحل الأكثر قوة)
• إضافة أيقونة (سهم أو رمز رابط خارجي)
• استخدام وزن غامق للروابط المضمنة
• توفير تمييز خلفية

4. النص فوق صور الخلفية

نادرًا ما يكون للنص الموضوع على الصور أو التدرجات تباين كافٍ عبر الصورة بأكملها.

الإصلاح:

• أضف تراكبًا شبه شفاف بين الصورة والنص
• استخدم text-shadow لتأثير مخطط دقيق
• ضع النص في مربع تراكب بلون صلب
• تأكد من أن أي جزء من الصورة يمكن أن يظهر خلف النص يلبي الحد الأدنى للنسبة

5. نص العنصر النائب منخفض التباين

العناصر النائبة في النماذج مثل #BDBDBD على الأبيض (1.9:1) شائعة ولكنها تفشل في متطلبات التباين.

الإصلاح: قم بتغميق العناصر النائبة إلى #757575 على الأقل (4.6:1). والأفضل من ذلك، استخدم التسميات بدلاً من العناصر النائبة — التسميات مرئية دائمًا ولا تختفي أبدًا عندما يبدأ المستخدمون في الكتابة.

اختبار تباين الألوان

الأدوات الآلية

• أدوات مطوري المتصفح — تحتوي أدوات مطوري Chrome و Firefox على فحص تباين مدمج. افحص عنصرًا وابحث عن نسبة التباين في لوحة "Styles" أو "Accessibility".
• أدوات فحص التباين عبر الإنترنت — أدخل لونين واحصل على حالة نجاح/فشل فورية لـ AA و AAA.
• إضافات أدوات التصميم — Stark و A11y و Contrast متاحة لـ Figma و Sketch و Adobe XD. تتحقق هذه من التباين مباشرة في ملفات التصميم الخاصة بك.
• Lighthouse — تقوم أداة Lighthouse من Google تلقائيًا بالإبلاغ عن إخفاقات التباين.

الاختبار اليدوي

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

1. أوقف تشغيل الشاشة — هل يمكنك تمييز جميع عناصر الواجهة؟
2. استخدم مرشح تدرج الرمادي — هل لا تزال المعلومات تنقل بشكل صحيح بدون لون؟
3. اختبر باستخدام محاكي عمى الألوان — أدوات مثل Colorblindly (إضافة Chrome) تعرض كيف يظهر موقعك للمستخدمين الذين يعانون من أنواع مختلفة من نقص رؤية الألوان.
4. اختبر في ضوء الشمس المباشر — يقلل الضوء المحيط العالي من التباين المُدرَك.

التصميم لعمى الألوان

يعاني حوالي 1 من كل 12 رجلاً (8%) و 1 من كل 200 امرأة (0.5%) من شكل ما من نقص رؤية الألوان. الأنواع الأكثر شيوعًا هي:

• Deuteranopia (عمى الأخضر، 6% من الذكور) — صعوبة في التمييز بين الأحمر والأخضر
• Protanopia (عمى الأحمر، 2% من الذكور) — يظهر الأحمر أغمق، والخلط مع الأخضر
• Tritanopia (عمى الأزرق، نادر) — صعوبة في التمييز بين الأزرق والأصفر

استراتيجيات التصميم

1. لا تعتمد أبدًا على اللون فقط — أي معلومات يتم نقلها من خلال اللون (حالات الخطأ، مؤشرات الحالة، فئات المخططات) يجب أيضًا نقلها من خلال النص، أو الأيقونات، أو الأنماط، أو الموضع.

2. تجنب التركيبات الإشكالية — الأحمر/الأخضر، الأزرق/الأرجواني، الأخضر/البني، والأخضر/الأزرق هي الأزواج الأكثر شيوعًا في الخلط بينها.

3. استخدم الأنماط والأنسجة — في المخططات والرسوم البيانية، استخدم الخطوط المنقطة، والتعبئة المخططة، والأشكال المختلفة بالإضافة إلى اللون.

4. أضف تسميات مباشرة — في تصورات البيانات، قم بتسمية نقاط البيانات مباشرة بدلاً من الاعتماد على مفتاح مرمز بالألوان.

5. اختبر باستخدام المحاكيات — يجب اختبار كل تصميم من خلال محاكيات deuteranopia و protanopia قبل الإطلاق.

بناء نظام ألوان ميسّر

الخطوة 1: اختر ألوانًا أساسية ميسّرة

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

الخطوة 2: أنشئ مقياسًا مطابقًا

أنشئ مقياس إضاءة حيث تحافظ كل خطوة على تباين كافٍ مع الجيران الأفتح والأغمق. OKLCH مثالي لهذا لأن قناة الإضاءة فيه موحدة إدراكيًا:

--text-primary: oklch(10% 0.01 0);    /* أسود قريب، ~19:1 على الأبيض */
--text-secondary: oklch(35% 0.02 0);  /* رمادي غامق، ~9:1 على الأبيض */
--text-muted: oklch(45% 0.02 0);      /* رمادي متوسط، ~5.5:1 على الأبيض */
--text-disabled: oklch(60% 0.02 0);   /* رمادي فاتح، ~3:1 على الأبيض */

الخطوة 3: تحقق من كل تركيبة

يجب التحقق من كل زوج مقدمة-خلفية في نظام التصميم الخاص بك:

• النص الأساسي على السطح — 4.5:1 كحد أدنى (7:1 موصى به)
• النص الثانوي على السطح — 4.5:1 كحد أدنى
• النص الخافت على السطح — 3:1 كحد أدنى (فقط للنص غير الأساسي)
• العناصر التفاعلية — 3:1 كحد أدنى للحالات
• مؤشرات التركيز — 3:1 كحد أدنى

قائمة مراجعة عملية للمطورين

• [ ] جميع نصوص المحتوى تلبي أو تتجاوز نسبة تباين 4.5:1
• [ ] جميع النصوص الكبيرة تلبي أو تتجاوز نسبة تباين 3:1
• [ ] الروابط تحتوي على مؤشر غير لوني (تسطير، أيقونة، أو تغيير الوزن)
• [ ] مدخلات النماذج لها حدود أو خلفيات مرئية (ليس فقط نص عنصر نائب)
• [ ] مؤشرات التركيز لها تباين 3:1 مقابل الخلفيات المجاورة
• [ ] حالات الخطأ تجمع بين اللون والنص أو الأيقونات
• [ ] المخططات والرسوم البيانية تستخدم أنماطًا أو تسميات مباشرة بالإضافة إلى اللون
• [ ] نص العنصر النائب يلبي الحد الأدنى 4.5:1
• [ ] العناصر المعطلة قابلة للتمييز بصريًا ولكنها لا تزال قابلة للإدراك
• [ ] تم اختبار التصميم باستخدام محاكيات عمى الألوان

الخاتمة

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

استخدم محول الألوان المجاني عبر الإنترنت الخاص بنا مع فحص التباين المدمج للتحقق من تركيبات الألوان الخاصة بك مقابل معايير WCAG AA و AAA.