كيفية فحص تباين الألوان لإمكانية الوصول
حوالي 1 من 12 رجلًا و1 من 200 امرأة يعانون من شكل من أشكال خلل رؤية الألوان. الملايين الآخرون لديهم رؤية منخفضة، أو رؤية تتقدّم في العمر، أو يطّلعون على شاشاتهم في ضوء الشمس الساطع. إذا لم يكن لنصك تباين كافٍ مع خلفيته، فلا يمكن لهؤلاء الأشخاص قراءته.
تباين اللون ليس «إضافة» — إنه متطلّب أساسي لإمكانية الوصول.
ما تتطلّبه WCAG
تحدّد إرشادات إمكانية الوصول إلى محتوى الويب (WCAG) الحد الأدنى لنسب التباين بين النص والخلفية:
| المستوى | النص العادي | النص الكبير | العناصر غير النصية |
|---|---|---|---|
| AA (الحد الأدنى) | 4.5 : 1 | 3 : 1 | 3 : 1 |
| AAA (المعزَّز) | 7 : 1 | 4.5 : 1 | — |
«النص الكبير» يعني 18 بكسل بخط عريض أو 24 بكسل عاديًا فما فوق.
تتراوح نسبة التباين من 1 : 1 (لا تباين — أبيض على أبيض) إلى 21 : 1 (أقصى تباين — أسود على أبيض).
كيفية فحص التباين
- حدّد ألوانك — أدخل لون النص (المقدّمة) ولون الخلفية برموز HEX أو قيم RGB أو منتقيات.
- راجع النتائج — تعرض الأداة فورًا نسبة التباين وما إذا كانت تركيبتك تجتاز WCAG AA وAAA في النص العادي والكبير.
- اضبط إذا لزم الأمر — إذا فشل التباين، اجعل النص أغمق أو الخلفية أفتح (أو العكس) حتى تصل إلى المستوى المطلوب.
أخطاء التباين الشائعة
نص رمادي فاتح على أبيض — #999999 على #ffffff له نسبة 2.8 : 1 فقط. هذا يفشل في WCAG AA. قد يبدو «أنيقًا» لمصمّم برؤية مثالية، لكنه غير مقروء للكثيرين.
نص ملوّن على خلفية ملوّنة — يجتاز زر أزرق بنص أبيض غالبًا، لكن زر أخضر بنص أبيض لا يجتاز. تحقّق دائمًا — لا يمكنك الحكم على نسبة تباين بصريًا.
نص العنصر النائب — نص العنصر النائب في الحقول معروف بضعف التباين. حتى لو لم تفرضه WCAG بشكل صارم، يجب على المستخدمين قراءته أيضًا.
الوضع المظلم — يستخدم المصمّمون غالبًا رمادي متوسط على رمادي داكن لمظهر «خفي». غالبًا ما يفشل ذلك في فحوصات التباين.
نصائح
- تحقّق من كل تركيبة نص/خلفية — لا تفترض شيئًا. حتى المصمّمون ذوو الخبرة يفاجَؤون بالتركيبات التي تفشل.
- اختبر السمتَين — إذا كان لموقعك وضع فاتح ووضع مظلم، تحقّق من التباين في كليهما. لون يعمل على أبيض قد يفشل على رمادي داكن.
- استخدم ألوان علامتك التجارية بحكمة — إذا فشل أزرق علامتك التجارية كلون نص، فاستخدمه للعناصر الأكبر (الأزرار، العناوين) حيث يطبَّق عتبة «النص الكبير» (3 : 1)، واستخدم ظلًا أغمق لمحتوى النص.
- لا تعتمد فقط على اللون — بالإضافة إلى التباين الكافي، لا تنقل أبدًا معلومة بلون واحد فقط. استخدم أيقونات أو تسميات أو أنماطًا بشكل مكمّل.
الأسئلة الشائعة
ما نسبة التباين التي يجب استهدافها؟
للنص العادي، استهدف على الأقل 4.5 : 1 (WCAG AA). للنص الكبير (18 بكسل عريض أو 24 بكسل عادي)، 3 : 1 يكفي. لأعلى مستوى من إمكانية الوصول (AAA)، استهدف 7 : 1 للنص العادي.
هل يطبَّق هذا فقط على النص؟
لا. تتطلّب WCAG 2.1 أيضًا تباينًا كافيًا لمكوّنات الواجهة والكائنات الرسومية (الأيقونات وحدود الحقول ومؤشّرات التركيز). الحد الأدنى للعناصر غير النصية هو 3 : 1.
ماذا عن الوضع المظلم؟
يتطلّب الوضع المظلم نفس فحوصات التباين. النص الأبيض على خلفية داكنة يجتاز غالبًا بسهولة، لكن النص الرمادي على خلفية رمادية داكنة يفشل غالبًا. اختبر كلا الوضعَين.
هل تباين الألوان متطلَّب قانوني؟
في العديد من الولايات القضائية، نعم. تفرض ADA (الولايات المتحدة) وEN 301 549 (الاتحاد الأوروبي) وقوانين مماثلة إمكانية الوصول الرقمية. الامتثال لـ WCAG هو المعيار المعترف به للوفاء بذلك.