فحص تباين الألوان (WCAG)
نسبة التباين بين النص والخلفية، ونجاحها في AA وAAA، واقتراح للإصلاح.
عنوان كبير للتجربة
هذا نص فقرة عادي بحجم 16 بكسل. الحروف العربية بنقاطها وتشكيلها الصغير تحتاج تباينًا كافيًا لتُقرأ بسهولة: مُحَمَّد، ثَلْج، قِطّ.
نص صغير بحجم 14 بكسل للملاحظات والتواريخ.
زر تجريبينسبة التباين
4.76:1
جيد لكل النصوص
- ناجح ✓
نص عادي — AA
الحد الأدنى المطلوب لنص الفقرات · يحتاج 4.5:1
- راسب ✗
نص عادي — AAA
المستوى المعزَّز · يحتاج 7:1
- ناجح ✓
نص كبير — AA
24px فأكبر، أو 18.66px عريضًا · يحتاج 3:1
- ناجح ✓
نص كبير — AAA
المستوى المعزَّز للنص الكبير · يحتاج 4.5:1
- ناجح ✓
عناصر الواجهة
حدود الحقول والأيقونات والرسوم · يحتاج 3:1
أقرب لون للنص من الدرجة نفسها يحقق المستوى
عن الأداة
نسبة التباين تُحسب من الإضاءة النسبية للونين حسب صيغة WCAG 2: (الأفتح + 0.05) ÷ (الأغمق + 0.05)، وتتراوح بين 1:1 (لونان متطابقان) و21:1 (أسود على أبيض). المستوى AA يطلب 4.5:1 لنص الفقرات و3:1 للنص الكبير ولعناصر الواجهة كحدود الحقول والأيقونات، والمستوى AAA يطلب 7:1 و4.5:1.
للعربية سبب إضافي للحرص: النقاط والتشكيل وحروف مثل «ث» و«ش» تفاصيل صغيرة داخل الحرف، وتضيع أسرع من الحروف اللاتينية في التباين الضعيف والخطوط الرفيعة. الرمادي الفاتح على الأبيض الشائع في التصاميم الحديثة كثيرًا ما يرسب في AA.
إذا رسب اللون، تقترح الأداة أقرب لون من الدرجة نفسها يحقق المستوى، بتغيير الإضاءة فقط في فضاء OKLCH، فيبقى لون الهوية معروفًا لكنه يصير مقروءًا.
أسئلة شائعة
ما المقصود بالنص الكبير؟
حسب WCAG: 24 بكسل فأكبر، أو 18.66 بكسل (14 نقطة) بخط عريض. العناوين غالبًا نص كبير، والفقرات والأزرار الصغيرة ليست كذلك.
هل التباين مطلوب قانونًا؟
في بعض الدول نعم للمواقع الحكومية والخدمية، ومعيار WCAG 2.1 AA هو المرجع في أغلبها. وبغض النظر عن القانون، التباين الجيد يخدم كل من يقرأ في الشمس أو على شاشة رخيصة أو ضعيف النظر.
هل تكفي النسبة وحدها؟
هي الحد الأدنى. حجم الخط وسُمكه والمسافة بين الأسطر تؤثر في القراءة أيضًا، والخط الرفيع جدًا قد يصعب قراءته حتى بتباين ناجح.