ما هو وضع التباين العالي؟

اختبر كيف يبدو محتوى الويب الخاص بك تحت إعدادات التباين العالي المختلفة. الصق كود HTML أو لقطة شاشة لعنوان URL لمعاينة أوضاع التباين المتوافقة مع معيار WCAG، بما في ذلك التباين العالي لـ Windows والألوان المعكوسة وثيمات التباين المخصصة.

اختر من بين سمات جاهزة (تباين Windows العالي، الألوان المعكوسة، أصفر على أسود) أو حدّد لون النص والخلفية يدوياً. نسبة التباين تتحدّث لحظياً وتُخبرك بأي مستويات WCAG — AA، AAA، نص عادي، نص كبير — تجتازها التركيبة. الـ HTML المعروض يمكن تصديره ومعه الأنماط المضمَّنة.

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

1. الخطوة 1 — الصق HTML أو النص العادي في منطقة المحرر.
2. الخطوة 2 — اختر وضع التباين من الإعدادات المسبقة: التباين العالي لـ Windows (أبيض/أسود)، أو مقلوب، أو أصفر على أسود، أو ألوان مخصصة.
3. الخطوة 3 — راجع المعاينة المباشرة للتحقق من سهولة القراءة. استخدم مدقق نسبة التباين للتحقق من مطابقة إرشادات WCAG AA/AAA لعناصر النص.

متى تستخدم

• تدقيق صفحة هبوط على معيار WCAG AA قبل إطلاق حملة تسويقية.
• التأكّد من ظهور مؤشّرات التركيز والأزرار التي بدون نص في وضع تباين Windows العالي.
• اختيار لون لنص المتن يحقّق نسبة 4.5:1 مع لون خلفية الهوية.

النتيجة

يلصق مطور كود HTML لشريط التنقل ويتحول إلى وضع التباين العالي لـ Windows. يكتشف أن أزرار الأيقونات فقط تختفي على الخلفية السوداء، فيضيف تسميات نصية واضحة.

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

ما نسبة التباين المطلوبة لـ WCAG AA؟

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

لماذا تختفي أيقونات الأزرار في وضع تباين Windows العالي؟

نظام Windows يستبدل الألوان برموز النظام ويتجاهل صور الخلفية. الأيقونات المرسومة بـ background-image أو بصيغة SVG تعتمد على fill فقط تختفي. استخدم SVG داخلياً مع currentColor على الـ stroke، أو أضف نصاً مرئياً للزر.

هل الأصفر على الأسود سمة وصول حقيقية؟

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

هل اجتياز WCAG AA يعني أن الصفحة قابلة للوصول؟

التباين مجرد جزء من WCAG. تحتاج الصفحة أيضاً إلى التنقّل بلوحة المفاتيح، HTML دلالي، نصوص بديلة للصور، تسميات النماذج، مؤشّرات تركيز، واحترام تفضيل «تقليل الحركة». الأداة تختبر اللون فقط.

لماذا يفشل برتقالي علامتنا التجارية على خلفية بيضاء؟

الألوان المتوسّطة المشبَعة (البرتقالي، الأصفر، الليموني) عادةً تنزل دون 3:1 على الأبيض لأن إضاءتها مرتفعة جداً. اجعل البرتقالي أغمق لنص المتن، أو احصره في الخلفيات والعناوين الكبيرة حيث يكفي 3:1.

أدوات ذات صلة