مدقق تباين WCAG
تحقق من نسبة التباين بين لون النص والخلفية وفق معياري WCAG AA وAAA — مع معاينة حية بحجمي النص العادي والكبير.
1,131 مشاهدة
نص حكيم له سر قاطع وذو شأن عظيم مكتوب على ثوب أخضر ومغلف بجلد أزرق
مثال نص كبير 24px
كيف تُحسب النسبة؟
صيغة WCAG هي (L1 + 0.05) / (L2 + 0.05)، حيث L1 هو السطوع النسبي للون الأفتح وL2 للون الأغمق — لذا تقع النتيجة دائمًا بين 1:1 (لونان متطابقان) و21:1 (أسود خالص على أبيض خالص). السطوع النسبي ليس متوسطًا بسيطًا لقنوات RGB؛ بل هو مجموع مرجّح إدراكيًا، L = 0.2126R + 0.7152G + 0.0722B، يُطبَّق بعد أن تُحوَّل كل قناة إلى قيمة خطية بعكس منحنى غاما لـ sRGB (القيم الأقل من 0.03928 تُقسَم على 12.92، والباقي يمر عبر ((c+0.055)/1.055)^2.4). يساهم الأخضر بسطوع مُدرَك أكبر بنحو عشر مرات من الأزرق، لذا فإن تبديل قناتَي الأخضر والأزرق في لون ما يمكن أن يغيّر وزنه المرئي بشكل كبير رغم بقاء السطوع الخام كما هو.
مثال ملموس: الرمادي المتوسط الخالص #767676 على خلفية بيضاء يعطي بالضبط 4.54:1 — أعلى بقليل من عتبة WCAG AA البالغة 4.5:1 للنص العادي. أدنِه خطوة واحدة نحو الغامق ليصبح #757575 فينخفض إلى 4.48:1، فيسقط في اختبار AA. هذا هو سبب فشل كثير من تصاميم "رمادي على أبيض" بصمت في التدقيق: الفارق البصري بين الرمادي الناجح والراسب هو خطوة RGB واحدة، غير مرئية لمعظم العيون لكنها واضحة جدًا لماسح آلي أو لمستخدم ضعيف البصر في ضوء النهار الساطع.
ما يجب أن تعرفه
يضع WCAG 2.1 عتبتين لمستوى AA حسب حجم النص: 4.5:1 للنص العادي، وعتبة مخفَّفة 3:1 للنص الكبير — يُعرَّف بأنه 18pt (24px) بوزن عادي أو 14pt (18.7px) عريض فأكثر، لأن الحروف الأكبر تبقى مقروءة عند تباين أقل. يطلب مستوى AAA الأكثر صرامة 7:1 للنص العادي و4.5:1 للنص الكبير. تحمل عناصر الواجهة غير النصية مثل الأيقونات وحدود حقول الإدخال ومؤشرات التركيز اشتراطها الخاص بـ 3:1 بموجب WCAG 2.1 SC 1.4.11، يُقاس مقابل لون الخلفية المجاورة.
هذه الأرقام ليست اعتباطية — فهي مستمدة من أبحاث حول وضوح القراءة لدى مستخدمين ضعاف البصر ومصابين بعمى الألوان ومن يعانون فقدان حساسية التباين المرتبط بالعمر، وهي أيضًا مرجع قانوني في أنظمة إتاحة مثل ADA وEN 301 549، المعيار الأوروبي الذي يستند إليه قانون إتاحة الاتحاد الأوروبي. يُعد فشل التباين من أكثر المشكلات ذكرًا في عمليات تدقيق إتاحة الويب الآلية، ولهذا تضمّن كثير من أنظمة التصميم حدًا أدنى قدره 4.5:1 مباشرة في رموز الألوان بدلًا من ترك الفحص لكل مصمم على حدة.
الأسئلة الشائعة
هل تبديل النص والخلفية يغيّر النسبة؟
لا — تضع الصيغة دائمًا اللون الأفتح في الأعلى، لذا النسبة متماثلة. قد تختلف وضوحية القراءة بشكل ذاتي (وهج النص الفاتح على خلفية داكنة)، لكن نتيجة WCAG تبقى متطابقة.
ما الذي يُعدّ نصًا كبيرًا؟
24 بكسل (18pt) بوزن عادي أو نحو 18.7 بكسل (14pt) عريض فأكثر. يحتاج النص الكبير 3:1 فقط في مستوى AA لأن الحروف الأكبر تبقى مقروءة عند تباين أقل.
لون علامتي التجارية لا يجتاز الاختبار — ماذا أفعل؟
أبقِه للزخرفة وحوّل استخدامه في النص إلى أغمق أو أفتح حتى يجتاز الاختبار؛ يساعد في ذلك تدرّج من الظلال والألوان الفاتحة. نص العنصر النائب والحالات المعطَّلة معفاة من الاشتراط، لكن يُستحسن إبقاؤها ضمن حدود معقولة.
لماذا يُستخدم السطوع المصحَّح بغاما بدلًا من متوسط RGB بسيط؟
لأن السطوع المُدرَك ليس خطيًا ولا متساوي الوزن بين القنوات — لو تم حساب متوسط RGB الخام لاعتُبر الأصفر الساطع (#ffff00) والأزرق المتوسط (#0000ff) متقاربَين في السطوع، بينما يبدو الأصفر أكثر سطوعًا بكثير للعين. تصحّح خطوة فك تشفير غاما كيفية ضغط sRGB للقيم بدلًا من تخزين ضوء خطي، وتعكس أوزان 0.2126/0.7152/0.0722 حساسية العين الأكبر تجاه الأخضر، ثم الأحمر، ثم الأزرق. تخطَّ أيًا من هاتين الخطوتين وستتوقف الأرقام عن مطابقة الشكل الفعلي للتباين.
هل ضمان اجتياز النسبة يعني أن الألوان تعمل لمستخدمي عمى الألوان؟
ليس تمامًا — تقيس النسبة فرق السطوع فقط، لا فرق التدرج اللوني، لذا يمكن للونين أن يجتازا 4.5:1 ويظلا مع ذلك صعبَي التمييز لشخص مصاب بعمى الأخضر إذا كان الفارق الأساسي بينهما في التدرج اللوني لا في الإضاءة، كما هو الحال في بعض أزواج الأحمر/الأخضر عند تساوي السطوع. نسبة التباين العالية ضرورية لكنها غير كافية لإتاحة عمى الألوان؛ واقترانها بفارق في الإضاءة أو إشارة غير لونية مثل أيقونة أو خط تحتي يغطي الحالتين معًا.
أدوات مشابهة
الإبلاغ عن مشكلة
مدقق تباين WCAG
التعليقات
لا توجد تعليقات بعد — كن أول من يكتب تعليقًا!