Go Toolstack

فاحص تباين ألوان التصميم وإتاحة الويب (WCAG)

التحقق من نسبة تباين النص مع الخلفية وفق معايير إتاحة الويب الدولية WCAG 2.1.

فاحص تباين ألوان التصميم وإتاحة الويب (WCAG)

التحقق من نسبة تباين النص مع الخلفية وفق معايير إتاحة الويب الدولية WCAG 2.1.

كيف يعمل

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

اكتشف أدوات إضافية تعمل على جانب العميل في هذه الفئة

مركز أدوات المطورين • مسارات العمل ودليل المقارنة

استكشف جميع أدوات أدوات المطورين والحدود الفنية ودليل الاختيار.

استكشاف المركز →
منسق ومدقق ملفات JSON وتجميل الأكواد

تنسيق وضغط والتحقق من صحة بيانات JSON بدقة 64 بت وقواعد مخطط JSON Schema (Draft-07 / 2020-12).
محول ومشفر ومفكك Base64 للنصوص والملفات

تشفير وفك تشفير Base64 للنصوص والبيانات الثنائية والصور بأمان تام داخل جهازك.
منسق ومجمل استعلامات SQL وضبط المحاذاة

تنسيق وضبط مسافات استعلامات SQL وتكبير الكلمات المحجوزة لمختلف قواعد البيانات.

أدلة المدونة ذات الصلة

أدلة تقنية، واستكشاف الأخطاء وإصلاحها، وأفضل الممارسات العملية

مركز المفاهيم والمعرفة

فاحص تباين ألوان التصميم وإتاحة الويب (WCAG Contrast Checker) لمستويات AA و AAA

تُعد إتاحة الويب الرقمية (Web Accessibility) واختبار وضوح النصوص مسؤولية أخلاقية ومعياراً قانونياً عالمياً لضمان تمكين جميع المستخدمين، بما فيهم ضعاف البصر والمصابون بعمى الألوان، من قراءة محتوى المواقع بسلاسة. يقوم هذا الفاحص البصري الدقيق بحساب نسبة التباين اللوني (Color Contrast Ratio) بين لون النص ولون الخلفية استناداً إلى معادلة الإضاءة النسبية (Relative Luminance) القياسية المعتمدة في إرشادات نفاذ محتوى الويب الدولية (WCAG 2.1).

يقوم المحرك باختبار التوافق الصارم مع مستويات النفاذ المعيارية: المستوى الأدنى AA (نسبة 4.5:1 للنصوص العادية و 3:1 للنصوص الكبيرة)، والمستوى المتقدم AAA (نسبة 7:1 للنصوص العادية و 4.5:1 للنصوص الكبيرة)، بالإضافة إلى فحص عناصر واجهة المستخدم والرموز الرسومية (3:1). على سبيل المثال، عند اختبار نص رمادي #737373 فوق خلفية بيضاء #FFFFFF، يحدد المحرك نسبة التباين بدقة عند 4.67:1، معلناً اجتياز النص لمعيار AA وفشله في تحقيق معيار AAA الأكثر صرامة.

تتضمن الأداة منتقي ألوان ذكي يقترح عليك أقرب درجة لونية بديلة متوافقة تلقائياً مع معايير WCAG بنقرة واحدة، مع محاكاة بصرية فورية لشكل القراءة بأحجام خطوط متعددة دون مغادرة المتصفح.

البنية الأساسية والمعادلة الرياضية

نسبة التباين = (L1 + 0.05) / (L2 + 0.05) ؛ حيث L1 تمثل الإضاءة النسبية للون الأفتح، و L2 الإضاءة النسبية للون الأغمق

تُحسب الإضاءة النسبية (L) وفق معيار sRGB بتحويل قيم RGB الخطية وتطبيق أوزان الطيف البصري الحساسة للعين: 0.2126R + 0.7152G + 0.0722B.

أفضل الممارسات والإرشادات الأساسية

  • الاستهداف الدائم لنسبة 4.5:1 كحد أدنى للنصوص الأساسية: يضمن تحقيق هذا المستوى قراءة مريحة للنصوص العادية لمعظم المستخدمين وفي مختلف ظروف الإضاءة المحيطة وشاشات الهواتف.
  • فحص تباين حالات التفاعل والتركيز (Focus States): تأكد من أن حدود الأزرار عند النقر بالماوس أو التنقل باللوحة (Tab Focus) تحقق نسبة تباين 3:1 مع الخلفية لمساعدة ذوي الإعاقة الحركية.
  • تجنب الاعتماد على اللون وحده لنقل المعلومة: لا تستخدم اللون الأحمر بمفرده للإشارة للخطأ؛ ادعمه بأيقونة تحذيرية أو نص صريح لتمكين المصابين بعمى الألوان من فهم الإشعار.
  • مراعاة انعكاس ضوء الشمس على شاشات الجوال: التباين المنخفض الذي يبدو مقبولاً في بيئة المكتب المظلمة يصبح غير مقروء تماماً تحت أشعة الشمس المباشرة؛ اختر تبايناً أقوى.

الأسئلة الشائعة والأجوبة (FAQ)

ما هو الفارق بين مستويات الامتثال لمعايير إتاحة الويب AA و AAA؟
المستوى AA هو المعيار القانوني العالمي القياسي المطلوب لمعظم المواقع (نسبة 4.5:1)، بينما المستوى AAA هو المعيار الذهبي فائق التباين (نسبة 7:1) المخصص للمواقع الحكومية والطبية.
ما الذي يعتبر 'نصاً كبيراً' (Large Text) في مواصفات WCAG الدولية؟
يُعرف النص الكبير بأنه النص ذو الحجم 18pt (نحو 24 بكسل) أو النص العريض (Bold) ذو الحجم 14pt (نحو 18.5 بكسل) فما فوق، ويتطلب نسبة تباين مخففة تبلغ 3:1 فقط.
كيف تساعدني ميزة 'اقتراح اللون البديل' في إصلاح الألوان غير المتوافقة؟
تقوم الأداة بضبط إضاءة اللون غير المتوافق تدريجياً وبأقل تغيير بصري ممكن للدرجة الأصلية حتى تصل به للحد الأدنى الدقيق المطلوب لاجتياز فحص AA أو AAA.
هل تؤثر نسبة التباين اللوني على تقييم سيو الموقع في محركات البحث؟
نعم؛ تعتمد أداة Google Lighthouse الرسمية لتقييم تجربة المستخدم على معايير WCAG للتباين، وانخفاض التباين يقلص نقاط إتاحة الموقع ويؤثر سلباً على تصنيفه.