مدقق تباين الألوان
تحقّق من التباين بين لون النص ولون الخلفية وفقًا لمعياري WCAG 2 وAPCA. يحسب المدقق نسبة تباين WCAG 2 استنادًا إلى الإضاءة النسبية، ويعرض النجاح أو الإخفاق لمستويات AA وAAA للنص العادي والكبير وللرسومات UI، ويضيف قيمة تباين الإضاءة وفق APCA مع إرشادات حول الاستخدام المناسب لها. صُممت الأداة للمصممين والمطورين الذين ينشئون واجهات ميسّرة.
الأسئلة الشائعة
ما المقصود بمستويات WCAG؟
يشترط المستوى AA نسبة 4.5:1 للنص العادي و3:1 للنص الكبير (معيار النجاح 1.4.3)؛ ويشترط المستوى AAA نسبة 7:1 و4.5:1 (1.4.6). تحتاج مكونات واجهة المستخدم والرسومات ذات المعنى إلى نسبة 3:1 مقارنةً بالألوان المجاورة (1.4.11). يعرض المدقق النجاح أو الإخفاق لكل عتبة من هذه العتبات الخمس.
ما الذي يُعد نصًا كبيرًا؟
يعرّف WCAG النص الكبير بأنه نص بحجم 18 نقطة على الأقل بوزن عادي، أي نحو 24 بكسل CSS، أو بحجم 14 نقطة على الأقل بوزن عريض، أي نحو 18.66 بكسل CSS. وكل ما هو أصغر يُعد نصًا عاديًا ويحتاج إلى نسبة أعلى.
لماذا تفشل نسبة 4.499:1 في المستوى AA؟
حدود WCAG دقيقة، لذا فإن النسبة التي قد تُقرَّب إلى 4.5 لكنها أقل منها لا تجتاز الاختبار. يقارن المدقق النسبة قبل التقريب ويعرضها مقتطعة إلى منزلتين عشريتين، لذا لا يبدو الرقم المعروض أفضل من القيمة الفعلية.
ما هو APCA؟
خوارزمية التباين الإدراكي الميسّر هي طريقة لقياس التباين طُوّرت لمسودات WCAG 3. وتحاكي التباين الإدراكي في الإضاءة، وتعامل النص والخلفية على نحو مختلف، وتُرجع قيمة تباين الإضاءة Lc تتراوح تقريبًا من -108 إلى 106. لم تُدرج بعد في أي معيار WCAG منشور، لذا استخدم نتائج WCAG 2 للتحقق من الامتثال وAPCA كفحص إضافي.
لماذا تكون قيمة APCA سالبة أحيانًا؟
يراعي APCA قطبية التباين: فالقيم الموجبة تعني نصًا داكنًا على خلفية فاتحة، والقيم السالبة تعني نصًا فاتحًا على خلفية داكنة. وتستخدم الإرشادات القيمة المطلقة، لذا يقع كل من Lc -75 وLc 75 في المستوى نفسه.
كيف تُحدَّد مستويات إرشادات APCA؟
تتبع هذه المستويات الوضع البسيط البرونزي في APCA: يُفضَّل Lc 90 للنص الأساسي، وLc 75 هو الحد الأدنى للنص الأساسي، وLc 60 لنصوص المحتوى الأخرى، وLc 45 للعناوين والنص الكبير، وLc 30 للنص المقروء عند الحاجة مثل النصوص النائبة، وLc 15 للعناصر غير النصية. يظل حجم الخط ووزنه مهمين، لذا تعامل مع هذه المستويات كنقاط بداية لا كحكم نهائي.
أي إصدار من APCA مطبّق؟
ثوابت APCA-W3 للإصدار 0.0.98، المراجعة 4g، مع الأس 2.4 البسيط لقنوات sRGB، وحدّ الأسود الناعم، وقصّ التباين المنخفض. يعطي النص الأسود على خلفية بيضاء نحو Lc 106.0، والنص الأبيض على خلفية سوداء نحو Lc -107.9، بما يطابق التنفيذ المرجعي.
ما تنسيقات الألوان التي يمكنني إدخالها؟
أكواد hex مع أو بدون #، وأسماء الألوان CSS، وrgb()، وhsl()، وhwb()، وlab()، وlch()، وoklab()، وفضاءات oklch() مثل display-p3، وcolor() وcmyk(). تُحوَّل الألوان الواقعة خارج sRGB إلى sRGB أولًا، لأن كلتا الصيغتين محددتان لألوان شاشات sRGB.
كيف تُعالَج الألوان الشفافة؟
يُمزج لون النص شبه الشفاف مع الخلفية قبل القياس، كما يعرضه المتصفح. ويُمزج لون الخلفية شبه الشفاف أولًا مع الأبيض. وتعرض النتيجة لوني النص والخلفية المعتمين اللذين تمت مقارنتهما فعليًا.
هل يؤثر ترتيب اللونين؟
لا يؤثر في WCAG 2، لأن نسبة إضاءة اللون الأفتح إلى الأغمق واحدة في كلا الترتيبين. لكنه يؤثر في APCA، لأنه يزن النص والخلفية على نحو مختلف، لذا أدخل لون النص في الحقل الأول ولون الخلفية في الحقل الثاني.