يقوم فاحص التباين بحساب نسبة تباين الألوان وفقاً لمعايير WCAG 2.1 بين لونين وتصنيفهما بناءً على عتبات AA/AAA لكل من النصوص العادية والكبيرة. تعرض المعاينة المباشرة النص باللونين المختارين، ويوفر زر 'التقاط خلفية الصفحة' عينة من الصفحة الحالية.
أصبح الوصول الميسر (Accessibility) مطلباً متزايداً - حيث يعد الامتثال لمعايير WCAG متطلباً قانونياً في العديد من المناطق، وحتى في الأماكن التي لا يكون فيها كذلك، فإن التباين الضعيف يؤدي لنفور المستخدمين. يخبرك فاحص التباين فوراً ما إذا كان أي لونين يستوفيان معايير WCAG. اختر لوناً أمامياً ولون خلفية عبر أداة اختيار الألوان أو الصق قيم hex؛ تقوم الأداة بحساب نسبة التباين باستخدام معادلة النصوع الرسمية لـ WCAG وتصنيفها وفقاً لأربع عتبات: AA للنص العادي (≥4.5:1)، AA للنص الكبير (≥3:1)، AAA للنص العادي (≥7:1)، و AAA للنص الكبير (≥4.5:1). تعرض كل عتبة شارة واضحة تشير إلى 'نجاح' أو 'فشل'. تقوم المعاينة المباشرة بعرض نصوص كبيرة وعادية بالألوان المختارة لتتمكن من رؤية التأثير البصري الفعلي. يتم تشغيل كل شيء محلياً في متصفحك دون أي عمليات رفع.
يستخدم معادلة النصوع الرسمية لـ WCAG لحساب نسبة التباين. النتيجة دقيقة وتطابق كل أدوات فحص الوصول الميسر المتوافقة.
نجاح/فشل لكل من AA عادي (≥4.5:1)، AA كبير (≥3:1)، AAA عادي (≥7:1)، AAA كبير (≥4.5:1) - يتم عرضها جميعاً كشبكة.
يعرض نصوصاً كبيرة وعادية بالألوان التي اخترتها لتتمكن من رؤية التأثير البصري جنباً إلى جنب مع النسبة الرقمية.
ضغطة واحدة لأخذ عينة من لون خلفية جسم الصفحة الحالية - مفيد لاختبار تركيبات الألوان في المواقع الحقيقية.
اكتب قيمة hex أو استخدم أداة اختيار الألوان الأصلية للمتصفح. تتم مزامنة القيم في الاتجاهين أثناء التحرير.
ضغطة واحدة لتبديل اللون الأمامي ولون الخلفية - مفيد عند فحص السمات المعكوسة أو حالات التحويم (hover).
قبل اعتماد لوحة الألوان، تحقق من كل لون نص مقابل خلفيته لضمان الامتثال لمعايير WCAG AA - لتجنب إعادة العمل لاحقاً.
استخدم 'التقاط خلفية الصفحة' في موقع حي، ثم الصق لون النص الفعلي - لاكتشاف انتهاكات الوصول الميسر في دقائق دون فتح Lighthouse.
عندما تختار علامة تجارية لوناً قد يفشل في معايير الوصول، استخدم الفاحص للعثور على أقرب بديل متوافق (درجة أغمق أو أفتح).
تأكد من أن ألوان حالات التحويم (hover) والنشاط (active) والتعطيل (disabled) لا تزال تستوفي متطلبات التباين، وليس فقط الحالة الافتراضية.
غالباً ما تفشل السمات الداكنة في التباين للنصوص الرمادية على خلفية رمادية. تحقق من أغمق درجات الرمادي مقابل أغمق خلفياتك لاكتشاف ذلك.
اضغط على أيقونة التباين في لوحة DevSuite Pro. تفتح لوحة بها حقول للون الأمامي ولون الخلفية.
استخدم أداة اختيار الألوان أو الصق قيمة hex لكل منهما. يتم تحديث المعاينة المباشرة أثناء تغيير الألوان.
الرقم الكبير (مثلاً 4.8:1) هو نسبة التباين. كلما زاد الرقم كان ذلك أفضل. 3 هو الحد الأدنى؛ و 4.5 هو المستهدف للنص العادي.
شارات النجاح/الفشل لـ AA و AAA، لأحجام النصوص العادية والكبيرة، توضح بلمحة واحدة ما إذا كان مزيج الألوان الخاص بك مؤهلاً.
في حالة الفشل، قم بتعديل الألوان. اجعل اللون الأمامي أغمق أو الخلفية أفتح (أو العكس) حتى تظهر علامة 'نجاح' للمستوى المستهدف.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 64 أداة للمطورين لمتصفحك.
