كيف بتنحسب نسبة التباين؟
معيار WCAG 2 (إرشادات الوصول لمحتوى الويب) بيحسب "الإضاءة النسبية" لكل لون بعد ما يحوّل قيم RGB لقيم خطية، وبعدين بيقسم: (إضاءة الأفتح + 0.05) ÷ (إضاءة الأغمق + 0.05). النتيجة بين 1:1 (نفس اللون) و21:1 (أسود على أبيض).
- AA للنص العادي: 4.5:1 عالأقل، وهو الحد المطلوب بأغلب القوانين والمواقع الحكومية.
- AA للنص الكبير: 3:1، والنص الكبير يعني 24 بكسل (18pt) أو 18.66 بكسل (14pt) بخط عريض.
- AAA: مستوى أعلى، 7:1 للنص العادي و4.5:1 للكبير.
- الأيقونات وحدود الخانات والأزرار: 3:1 مع اللي حواليها (المعيار 1.4.11).
الأداة بتعرض النسبة بخانتين عشريتين بدون تقريب لفوق، يعني 4.49 ما بتنعرض 4.5، لأنو المعيار ما بيقبل التقريب. ولما يكون لون النص شفاف، بندمجو مع الخلفية قبل الحساب.
ملاحظة عن الخط العربي
معيار WCAG ما بيفرّق بين اللغات، بس الحروف العربية فيها نقاط وتشكيل صغار، فبالخطوط الرفيعة أو الأحجام الصغيرة الأفضل تطلب تباين أعلى من الحد الأدنى. النسبة رقم مساعد مش حكم نهائي، والأحسن تجرّب التصميم على شاشات وأشخاص حقيقيين.
أسئلة شائعة
- ما هي نسبة التباين المطلوبة للنص؟
- حسب WCAG 2 مستوى AA: 4.5:1 للنص العادي و3:1 للنص الكبير (24 بكسل، أو 18.66 بكسل عريض). ومستوى AAA: 7:1 للعادي و4.5:1 للكبير.
- هل الرمادي #777777 على الأبيض مقبول؟
- لأ، نسبتو 4.47:1 تقريباً وهي أقل من 4.5. أفتح رمادي بينجح AA على الأبيض هو #767676 بنسبة 4.54:1.
- كيف بتختار الأداة اللون المقترح؟
- بتحافظ على درجة اللون وإشباعو، وبتغيّر الإضاءة بس (أفتح أو أغمق) لأقل حد بيحقق النسبة اللي اخترتها، فبيضل اللون قريب من الأصلي قدر الإمكان.
