فاحص تباين الألوان وفق WCAG

طريقة الاستخدام

1. أدخل لون النص ولون الخلفية بصيغة HEX أو RGB أو HSL أو OKLCH أو اسم لون.
2. اقرأ نسبة التباين ونتيجة النجاح أو الإخفاق في مستويي AA وAAA.
3. تأمل العينة الحية المرسومة بالونين.
4. جرّب لون النص القريب المقترح أو غيّر أحد اللونين إن أخفق الزوج، ثم افحص من جديد.

ما الذي تفحصه وكيف تعمل

اللمعان النسبي هو L = 0.2126 R + 0.7152 G + 0.0722 B، حيث تُحوَّل كل قناة sRGB بقيمة c من 0 إلى 1 إلى قيمة خطية: c مقسومة على 12.92 إذا كانت c تساوي 0.04045 أو أقل، وإلا فـ ((c + 0.055) / 1.055) مرفوعة إلى القوة 2.4. ونسبة التباين هي (L1 + 0.05) مقسومة على (L2 + 0.05) حيث L1 لمعان اللون الأفتح. وتختبر الأداة خمسة متطلبات من WCAG 2.2: نسبة 4.5:1 للنص العادي و3:1 للنص الكبير (معيار النجاح 1.4.3، المستوى AA)، ونسبة 7:1 و4.5:1 (1.4.6، المستوى AAA)، ونسبة 3:1 لعناصر واجهة المستخدم والكائنات الرسومية (1.4.11، المستوى AA). والنص الكبير هو 18 نقطة أو 14 نقطة غامقة أو أكبر. وتنص WCAG على أن القيم المحسوبة لا تُقرَّب، فالنسبة 4.499:1 لا تحقق 4.5:1، ولا يرفع العرض نسبةً راسبة إلى حدٍّ.

حدود الأداة: لا تعرّف WCAG التباين للألوان الشفافة، لذلك يُمزج لون النص الشفاف فوق الخلفية وتُمزج الخلفية الشفافة فوق الأبيض، وهذا اصطلاح من ظاهر. وتقارن الأداة لونين مصمتين لا نصاً فوق صورة أو تدرج، ولا تطبق الاستثناءات مثل الشعارات والعناصر المعطلة. وتشير WCAG إلى أن الخطوط شديدة الرقة قد تحتاج تبايناً أعلى مما يوحي به الرقم. أما اللون القريب المقترح فمساعدة من ظاهر وليس جزءاً من WCAG.