مدقق تباين WCAG — AA/AAA أونلاين _

يمر فحص تباين WCAG بعدة خطوات بسيطة. لا شيء يغادر متصفحك.

1. تُدخل لوناً للمقدمة وآخر للخلفية. تحلل الأداة hex، أو rgb()، أو hsl()، أو ألوان CSS المسمّاة إلى قيم قنوات الأحمر والأخضر والأزرق.
2. تُحوَّل كل قناة RGB إلى خطية باستخدام دالة تحويل sRGB. وهذا يحوِّل قيم العرض المشفرة بغاما إلى شدة ضوء خطية.
3. تُوزَّن القيم الخطية حسب حساسية العين البشرية لكل قناة — 0.2126 للأحمر، 0.7152 للأخضر، 0.0722 للأزرق. والمجموع هو الإضاءة النسبية للون.
4. نسبة التباين هي (L1 + 0.05) ÷ (L2 + 0.05)، حيث L1 هي إضاءة اللون الأفتح وL2 هي إضاءة اللون الأغمق. تضمن الـ 0.05 الإضافية بقاء الصيغة صالحة للأسود الخالص.
5. تُقارَن النسبة بعتبات WCAG: نص AA العادي يحتاج إلى 4.5:1 على الأقل، نص AA الكبير يحتاج إلى 3:1، نص AAA العادي يحتاج إلى 7:1، ونص AAA الكبير يحتاج إلى 4.5:1. النص الكبير يعني 18 نقطة على الأقل أو 14 نقطة عريضاً.

FAQ

أسئلة شائعة حول فحص تباين WCAG.

ما الفرق بين AA وAAA؟

AA هو الحد الأدنى للتوافق لمعظم محتوى الويب. يتطلب نسبة تباين لا تقل عن 4.5:1 للنص العادي و3:1 للنص الكبير. AAA هو معيار أعلى يتطلب 7:1 للنص العادي و4.5:1 للنص الكبير. قد تستهدف AAA للمحتوى الرئيسي مثل نص المقالات في موقع إخباري، بينما تستخدم AA لباقي التصميم. قد يكون تحقيق AAA في كل مكان صعباً مع ألوان العلامة التجارية، لذا تستهدف العديد من الفرق AA في جميع أنحاء الموقع وترفع النص الرئيسي إلى AAA حيثما أمكن.

ما المقصود بـ "النص الكبير" في WCAG؟

يُعرِّف WCAG 2.x النص الكبير بأنه 18 نقطة (24px) على الأقل للخط العادي، أو 14 نقطة (حوالي 19px) للخط العريض. تتبع الرموز والأيقونات التي تشكل جزءاً من الخط نفس العتبات. إذا لم تكن متأكداً من العتبة المناسبة لواجهتك، تحقق من كليهما — AA Large له حد أدنى (3:1)، لذا فإن معظم أزواج الألوان التي تفشل في AA Normal تجتاز فعلياً AA Large عندما يكون النص كبيراً بما يكفي.

لماذا يجتاز زوج الألوان لدي AA Large لكنه يفشل في AA Normal؟

لأن AA Large يتطلب فقط نسبة 3:1 بينما AA Normal يتطلب 4.5:1. يضع WCAG عتبة أقل للنص الكبير لأن الأحرف الأكبر أسهل في القراءة حتى مع تباين أقل. زوج ألوان يسجل مثلاً 4.0:1 يجتاز AA Large (عتبة 3:1) لكنه يفشل في AA Normal (عتبة 4.5:1). هذا شائع جداً مع ألوان العلامة التجارية الفاتحة المستخدمة كمقدمة على خلفيات بيضاء.

هل يمكنني الاعتماد على هذه الأداة وحدها لتدقيق إمكانية الوصول؟

تفحص هذه الأداة شيئاً واحداً — نسبة تباين WCAG 2.x بين لونين صلبين. تشمل إمكانية الوصول الحقيقية أكثر من ذلك: مؤشرات التركيز، وحجم الخط ووزنه، واللون كطريقة وحيدة لنقل المعلومات، والتوافق مع قارئات الشاشة وأدوات التكبير. استخدم فحص التباين هذا إلى جانب طرق تدقيق أخرى للحصول على صورة كاملة عن إمكانية الوصول لتطبيقك.

ما هي صيغ الألوان التي يقبلها الإدخال؟

يمكنك لصق رموز hex ذات 3 أو 4 أو 6 أو 8 خانات (مع أو بدون #)، وقيم rgb() وrgba() بصيغة الفاصلة التقليدية أو الصيغة الحديثة المفصولة بمسافات، وhsl() وhsla() مع أي وحدة تدرج قياسية (deg، rad، grad، turn)، وhsv()، وhwb()، وأي من ألوان CSS الـ 150 المسمّاة من مواصفات CSS Color Module Level 4. يُحلَّل اللون بالكامل على جهازك.