فاحص تباين الألوان
قِس نسبة تباين WCAG لأي زوج من لون النص والخلفية، وجِد درجة تجتاز الفحص حين يقصر الزوج عن الحد المطلوب.
فحص تباين الألوان وفق WCAG
النص منخفض التباين من أكثر إخفاقات سهولة الوصول شيوعًا على الويب. وهو يؤثر في ضعاف البصر ومن لديهم اختلافات في رؤية الألوان، بل وفي أي شخص يقرأ على هاتفه تحت أشعة الشمس. وتحوّل إرشادات إتاحة محتوى الويب (WCAG) عبارة «مقروء بما يكفي» إلى رقم: نسبة التباين.
تفتح هذه الصفحة محوّل الألوان على تبويب «التباين».
حدود WCAG في لمحة
| ما تفحصه | AA | AAA |
|---|---|---|
| نص المحتوى والتسميات | 4.5:1 | 7:1 |
| النص الكبير (24px، أو 18.7px عريض) | 3:1 | 4.5:1 |
| الأيقونات وحدود حقول الإدخال وحلقات التركيز وعناصر الرسوم البيانية | 3:1 | — |
المستوى AA هو الذي تشير إليه معظم القوانين وقواعد المشتريات. أما AAA فأكثر صرامة ويستحق السعي إليه في نصوص القراءة الطويلة، لكنه غير متوقع لكل عنصر في الموقع.
إصلاح لون أخفق في الفحص
حين يقصر زوج الألوان عن الحد، يقترح الفاحص أقرب درجة من الصبغة نفسها تبلغ 4.5:1 مقابل خلفيتك، فيبقى لون الهوية مميزًا ويصبح النص مقروءًا. ومن الحلول المعتادة تغميق لون النص بمقدار 10 إلى 20 نقطة من الإضاءة، أو إبقاء لون الهوية للعناوين الكبيرة والأزرار مع استخدام درجة أغمق منه للنص الصغير.
أخطاء شائعة
- نص العنصر النائب الرمادي الذي يبدو أنيقًا لكنه يقع دون 4.5:1 بفارق كبير.
- نص أبيض على ألوان هوية زاهية مثل البرتقالي أو الأصفر أو الأخضر الفاتح.
- فحص السمة الفاتحة وحدها: الوضع الداكن يحتاج إلى فحص مستقل.
- النص فوق الصور: قِس التباين مقابل أفتح منطقة قد يقع عليها النص، أو أضف طبقة تعتيم خلفه.
المعادلة وراء النسبة
تُحجَّم كل قناة sRGB إلى المدى 0–1 وتُحوَّل إلى قيمة خطية، ثم تُجمع بالصيغة 0.2126 R + 0.7152 G + 0.0722 B للحصول على الإضاءة النسبية. والنسبة هي (L1 + 0.05) / (L2 + 0.05)، حيث L1 هو اللون الأفتح. ويهيمن الأخضر لأن العين أشد حساسية له، ولهذا يخفق الأصفر على الأبيض إخفاقًا ذريعًا. ولتجهيز الألوان للاختبار، حوّلها باستخدام HEX إلى RGB أو اضبط إضاءتها باستخدام HEX إلى HSL.