مدقق تباين WCAG
تحقق من نسبة التباين بين لون النص والخلفية وفق معياري WCAG AA وAAA — مع معاينة حية بحجمي النص العادي والكبير.
797 مشاهدة
نص حكيم له سر قاطع وذو شأن عظيم مكتوب على ثوب أخضر ومغلف بجلد أزرق
مثال نص كبير 24px
ماذا تعني النسبة؟
نسبة التباين تقارن السطوع النسبي للونين، من 1:1 (متطابقان) إلى 21:1 (أسود على أبيض). يشترط WCAG 4.5:1 للنص العادي (AA) و3:1 للنص الكبير (24px فأكثر، أو 18.7px عريض فأكثر)؛ أما مستوى AAA الأكثر صرامة فيطلب 7:1 و4.5:1. مكوّنات الواجهة والرسومات تحتاج 3:1 مقارنة بالألوان المجاورة.
تُحسَب النسبة بتحويل كل قناة sRGB إلى قيمة خطية ثم ترجيحها (L = 0.2126R + 0.7152G + 0.0722B)، واحتساب (L₁+0.05)/(L₂+0.05). الحدس كثيرًا ما يخطئ هنا — الرمادي المتوسط #777 على الأبيض يبدو مقروءًا لكثير من العيون، لكنه يسجّل 4.48:1 فقط، أي أقل بقليل من AA. هذا الهامش موجود من أجل ضعاف البصر وضوء الشمس والشاشات الرخيصة.
الأسئلة الشائعة
هل تبديل النص والخلفية يغيّر النسبة؟
لا — الصيغة تضع دائمًا اللون الأفتح في البسط، لذا النسبة متماثلة. قد تختلف وضوحية القراءة بشكل ذاتي (وهج النص الفاتح على خلفية داكنة)، لكن نتيجة WCAG تبقى نفسها.
ما الذي يُعدّ نصًا كبيرًا؟
24px (18pt) عادي أو نحو 18.7px (14pt) عريض فأكثر. النص الكبير يحتاج 3:1 فقط في مستوى AA لأن الحروف الأكبر تبقى مقروءة عند تباين أقل.
لون علامتي التجارية لا يجتاز الاختبار — ماذا أفعل؟
أبقِه للزخرفة، واجعل استخدامه في النص أغمق أو أفتح حتى يجتاز الاختبار؛ يساعد في ذلك تدرّج من الظلال والألوان الفاتحة. نص العنصر النائب والحالات المعطَّلة معفاة من الاشتراط، لكن يُستحسن إبقاؤها ضمن حدود معقولة.
أدوات مشابهة
الإبلاغ عن مشكلة
مدقق تباين WCAG