ما هو فاحص التباين WCAG؟

فاحص تباين الألوان WCAG الذي يحسب نسبة التباين بين لوني المقدمة والخلفية ويُفيد بما إذا كانت التركيبة تستوفي معايير إمكانية الوصول WCAG 2.1 المستوى AA وAAA للنصوص العادية والكبيرة.

يحسب الفاحص نسبة السطوع النسبي وفق WCAG 2.1 بين أي لونين — يُكتبان بصيغة hex أو rgb() أو hsl() أو باسم CSS — ويصنّفها أمام مستويي AA (4.5:1 للنص العادي و3:1 للنص الكبير) وAAA (7:1 و4.5:1). كما يفحص حد 3:1 الخاص بعناصر الواجهة مثل حدود الحقول والأيقونات. عند الإخفاق تنزلق لوحة الاقتراحات نحو لون مارّ بالاختبار عبر تعتيم أو تفتيح المقدّمة، مع تقديم هدفي AA وAAA.

كيفية الاستخدام

1. أدخل أو اختر لون المقدمة (النص) ولون الخلفية — الصق صيغة hex أو rgb() أو hsl() أو اسم لون CSS، أو استخدم منتقيات الألوان.
2. اطّلع على نسبة التباين ونتائج النجاح والفشل للامتثال لمعيار WCAG AA وAAA في النصوص العادية والكبيرة ومكونات الواجهة.
3. إذا لم يجتز التباين الاختبار، استخدم تعديلات الألوان المقترحة لإيجاد أقرب مجموعة ألوان متاحة.

متى تستخدم

• تدقيق ألوان العلامة على خلفية بيضاء أو داكنة قبل نشر صفحة هبوط.
• اختيار حالات أزرار (افتراضي، تحويم، معطّل) تحقّق التباين المطلوب.
• فحص نصوص العناصر النائبة والحقول المعطّلة التي كثيراً ما تهبط دون 4.5:1.

النتيجة

مصمم واجهات يفحص الأزرق الخاص بعلامته التجارية #3B82F6 على خلفية بيضاء #FFFFFF: النسبة 4.5:1 تجتاز مستوى AA للنصوص الكبيرة لكن لا تجتاز AAA للنصوص العادية. يُغمّق اللون إلى #2563EB (5.3:1) لاجتياز المستويين.

الأسئلة الشائعة

ما النسبة اللازمة لاجتياز معيار AA في النص العادي؟

4.5:1 مقابل الخلفية. النص الكبير (من 18pt عادي أو 14pt عريض فما فوق) يكتفي بـ 3:1. مستوى AAA يرفعهما إلى 7:1 و4.5:1 على التوالي. أما عناصر الواجهة مثل حدود الحقول فيكفيها 3:1.

لماذا يفشل اللون الرمادي الداكن على الأبيض رغم وضوحه عندي؟

الانطباع الشخصي والقياس يفترقان بسرعة. نسبة 4:1 تبدو واضحة على شاشة معايرة بإضاءة جيدة، لكنها تنهار مع ضعاف البصر والوهج والشاشات القديمة. WCAG يضبط الحد على أسوأ الحالات لا أفضلها.

هل تحتاج الأيقونات وحدود النماذج نفس التباين المطلوب للنص؟

لا. أضافت WCAG 2.1 قاعدة 3:1 للعناصر غير النصية، فتشمل الحدود والأيقونات ومؤشرات التركيز وعناصر الرسوم البيانية. الرسوم الزخرفية معفاة، لكن أي عنصر يحمل معلومة عليه أن يحقّق 3:1 مع ما يجاوره.

كيف أصلح تركيبة فاشلة دون المساس بألوان العلامة؟

عندما يكون لون العلامة ثابتاً عدّل الخلفية. اجعلها أدكن أو أفتح حتى تجتاز النسبة. لوحة الاقتراحات هنا تحرّك المقدّمة بخطوات صغيرة، ويمكنك تطبيق الفكرة نفسها على الخلفية عند الحاجة.

هل تشمل WCAG قواعد لنص شفّاف أو نص فوق الصور؟

تطلب WCAG تقييم أسوأ بكسل خلف النص. النص على الصور يستوجب عادةً وضع طبقة معتمة أو لوح صلب خلفه. اختبر اللون كما يُعرض فعلاً، لا قيم الـ hex التي بدأت بها.

أدوات ذات صلة