فاحص التباين
اختر لون نص ولون خلفية، وشاهد نسبة تباين WCAG بالضبط، وما إذا كانت تجتاز AA أو AAA.
معاينة نص كبير (18pt فأكثر)
معاينة نص عادي، الحجم الذي يستخدمه معظم نص المحتوى.
ما تعنيه الشارات
تتطلب WCAG 2.1 نسبة 4.5:1 للنص العادي و3:1 للنص الكبير (18pt فأكثر، أو 14pt فأكثر بخط عريض) لاجتياز AA. أما AAA فأكثر صرامة: 7:1 للنص العادي، 4.5:1 للنص الكبير.
كيف تعمل
تُحسب النسبة باستخدام معادلة السطوع النسبي الفعلية من WCAG، وليست تقريبًا. تُقسَّم كل قناة على 255 ثم تُحوَّل خطيًا لإلغاء منحنى غاما في sRGB، وتُرجَّح القنوات الخطية بنسب 0.2126 للأحمر و0.7152 للأخضر و0.0722 للأزرق، انعكاسًا لمدى إسهام كل لون في السطوع المُدرَك. نسبة التباين هي (الأفتح + 0.05) / (الأغمق + 0.05)، وتتراوح بين 1:1 للألوان المتطابقة و21:1 للأسود الخالص على الأبيض الخالص.
للـ«نص كبير» تعريف دقيق نادرًا ما يُقتبس بشكل صحيح: 18pt (نحو 24px) عادي، أو 14pt (نحو 18.7px) عريض. لهذا يمكن لزوج ألوان بنسبة 3.2:1 أن يكون صالحًا تمامًا لعنوان رئيسي وفاشلًا للنص الأساسي. المعادلة متماثلة: تبديل اللون الأمامي بالخلفية لا يغيّر النسبة أبدًا، لذا فزر التبديل مخصص للمعاينة فقط. حدّ صادق واحد: النسبة تقيس فرق السطوع فقط، فقد يتجاوز الأحمر على الأخضر 4.5:1 نظريًا ويبقى صعب القراءة لمن لديه ضعف في إدراك الألوان.
يمر كلا اللونين بهاتين المعادلتين هنا في جافاسكريبت الصفحة مع كل تغيير. لا تُرسَل أي قيمة لونية إلى أي مكان، ويمكنك التحقق من ذلك في تبويب الشبكة أثناء تحريك أدوات اختيار اللون.
أسئلة شائعة
ما الفرق بين AA وAAA؟
AA هو الأساس الذي تستهدفه معظم المواقع: 4.5:1 للنص العادي، 3:1 للنص الكبير (18pt فأكثر، أو 14pt فأكثر بخط عريض). أما AAA فأكثر صرامة، ويستهدف محتوى لمستخدمين ضعاف البصر: 7:1 للنص العادي، 4.5:1 للنص الكبير.
هل تفحص هذه الأداة الصور أم الألوان الصريحة فقط؟
لونين صريحين فقط، نص مقابل خلفية. بالنسبة لنص فوق صورة أو تدرج، تحقّق من التباين مقابل أغمق وأفتح منطقة يمكن أن يقع فوقها.
هل هذه هي نفس الصيغة التي تستخدمها المتصفحات وأدوات التدقيق؟
نعم. إنها صيغة الإضاءة النسبية ونسبة التباين القياسية لـ WCAG 2.1، وهي نفسها التي يستخدمها Lighthouse وaxe.
من المدونة: فحص التباين وفق WCAG: دليل عملي