عن أداة فاحص تباين الألوان
تقارن أداة فحص تباين الألوان بين لون النص ولون الخلفية وتعرض نسبة التباين، مثل 4.52 : 1. ثم تعرض نتيجة النجاح أو الإخفاق لمعايير WCAG بمستويي AA وAAA للنص العادي والنص الكبير، إضافة إلى حد 3:1 لعناصر واجهة المستخدم. وتتيح المعاينة الحية رؤية قراءة الزوج اللوني فعليا. ولا يتطلب استخدامها أي تسجيل أو تثبيت. استخدمها قبل نشر التصميم.
النسب المطلوبة هي 4.5:1 للنص العادي في AA، و3:1 للنص الكبير في AA، و7:1 للنص العادي في AAA، و4.5:1 للنص الكبير في AAA. ويُقصد بالنص الكبير نحو 18 نقطة فأكثر أو 14 نقطة بالخط العريض فأكثر. يتبع الحساب معادلة اللمعان النسبي في WCAG ويتم داخل متصفحك. استخدم زر تبديل الألوان لاختبار العكس. وإذا لم يتحقق الحد المطلوب، عدّل أحد اللونين حتى تنجح الاختبارات.
كيفية استخدام فاحص تباين الألوان
- 01
اختر لون النص ولون الخلفية.
- 02
اقرأ نسبة التباين.
- 03
اطّلع على نتائج النجاح/الفشل وفق WCAG.
متى تستخدمها
- التأكد من أن نص المحتوى على خلفية الموقع مقروء لضعاف البصر.
- اختبار لوني نص الزر وخلفيته قبل تسليم التصميم للمطورين.
- التحقق من أن ألوان الهوية البصرية تحقق AA عند استخدامها للنص على خلفية بيضاء أو داكنة.
- مقارنة النسختين الفاتحة على الداكنة والداكنة على الفاتحة للزوج اللوني نفسه.
- تجهيز أرقام دقيقة لمراجعة إمكانية الوصول أو تدقيقها.
الأسئلة الشائعة
ما نسبة التباين المطلوبة لمعيار WCAG AA؟
يتطلب مستوى AA نسبة 4.5:1 على الأقل للنص العادي و3:1 للنص الكبير. تعرض الأداة النتيجتين معا، مع حد 3:1 الذي يُستخدم عادة لعناصر الواجهة كحدود الحقول والأيقونات.
ما الفرق بين AA وAAA؟
AAA هو المستوى الأشد صرامة، ويتطلب 7:1 للنص العادي و4.5:1 للنص الكبير. تستهدف مواقع كثيرة مستوى AA في الصفحة كلها وتستخدم AAA حيثما أمكن، لأن بعض لوحات الألوان لا تبلغه.
ما المقصود بالنص الكبير في WCAG؟
النص الكبير هو بحجم 18 نقطة (نحو 24 بكسل CSS) أو أكثر بالخط العادي، أو 14 نقطة (نحو 18.7 بكسل) أو أكثر بالخط العريض. وما دون ذلك نص عادي يحتاج إلى نسبة أعلى.
كيف تُحسب نسبة التباين؟
تحول الأداة كل لون إلى لمعان نسبي بمعادلة WCAG، ثم تقسم لمعان اللون الأفتح مضافا إليه 0.05 على لمعان الأغمق مضافا إليه 0.05. تتراوح النتيجة من 1:1 للون المتطابق إلى 21:1 للأسود على الأبيض.
هل أكتب كود HEX بدلا من استخدام منتقي الألوان؟
تستخدم الأداة منتقيات ألوان للنص وللخلفية. انقر المنتقي لاختيار اللون فتتحدث النتيجة فورا. واستخدم زر تبديل الألوان لعكس النص والخلفية. ويمكنك تجربة أي لونين بسهولة.
هل تُرسل بياناتي إلى أي مكان؟
لا. تُحسب النسبة داخل متصفحك ولا تُرفع الألوان التي تختارها إلى i40x. لا تستطيع الفحوص الآلية الحكم على كل شيء، فراجع أيضا الخطوط والأحجام والمحتوى الفعلي في صفحتك.