الانتقال إلى المحتوى الرئيسي
FreeKitX

فاحص تباين ألوان الويب وفق معايير WCAG 2.2 - FreeKitX

احفظ الأداة في الإشارات المرجعية

احفظ هذه الصفحة في متصفحك

على الهاتف، اختر إضافة إشارة مرجعية من قائمة المشاركة أو قائمة المتصفح.

قياس نسبة التباين بين النصوص والخلفيات واقتراح ألوان بديلة متوافقة مع معايير AA و AAA.

فاحص التباين جاهز. أدخل أو حدد الألوان لتقييم التوافق.
مجاني · معالجة محلية

فاحص تباين الألوان WCAG 2.2

تحديد الألوان

نماذج ألوان متباينة شائعة
نسبة التباين المحسوبةتباين فائق (مطابق لمعيار AAA)
14.63:1

نسبة النصوع المحسوبة بالمعادلة الرسمية لـ W3C WCAG 2.2 وهي (L1 + 0.05) / (L2 + 0.05).

النصوص العادية✓ AA
النصوص الكبيرة✓ AA
العناصر الرسومية وواجهة المستخدم✓ AA

نتائج تقييم التوافق مع WCAG 2.2

النصوص العادية

١٦ بكسل / عادي

نصوص الفقرات وحقول الإدخال أقل من 18pt (24px) أو 14pt (18.66px) عريض

المستوى AA (>= 4.5:1)ناجح
المستوى AAA (>= 7.0:1)ناجح

النصوص الكبيرة

>= ٢٤ بكسل / ١٨.٦٦ بكسل عريض

العناوين والنصوص الكبيرة بمقاس 18pt (24px) أو 14pt (18.66px) عريض على الأقل

المستوى AA (>= 3.0:1)ناجح
المستوى AAA (>= 4.5:1)ناجح

العناصر الرسومية وواجهة المستخدم

SC 1.4.11

حدود الحقول والأزرار والأيقونات الأساسية (WCAG 2.2 SC 1.4.11)

المستوى AA (>= 3.0:1)ناجح
* معيار WCAG SC 1.4.11 يحدد تباين المحتوى غير النصي في المستوى AA فقط (لا يوجد معيار AAA).

معاينة مباشرة في الوقت الفعلي

نصوص الفقرات العادية (16px / 400)

يعد التباين اللوني الجيد حجر الأساس للتصميم الرقمي الشامل. فهو يضمن وضوح القراءة تحت مختلف ظروف الإضاءة وللأشخاص الذين يعانون من ضعف الرؤية أو عمى الألوان.

العناوين والخطوط الكبيرة (24px / 700)

خطوط واضحة وسهلة القراءة للجميع

عناصر واجهة المستخدم التفاعلية (WCAG SC 1.4.11)
شارة الحالة

مساعد الاقتراح والتعديل الذكي للألوان

هل تحتاج إلى ألوان مطابقة؟ قم بتثبيت الخلفية أو النص للبحث في نطاق sRGB عن أقرب لون بديل يحقق النسبة المطلوبة بأقل انحراف لوني (ΔE).

تثبيت اللون
نسبة التوافق المستهدفة

الألوان الحالية متوافقة بالفعل مع نسبة التباين المستهدفة وتتجاوزها! (14.63:1 >= 4.5:1)

أدوات ذات صلة

الإجابة المباشرة

فاحص تباين الألوان يقيس النسبة الرياضية للإضاءة النسبية بين لون النص ولون الخلفية طبقاً لمعايير إمكانية الوصول للويب WCAG 2.2، للتحقق من وضوح القراءة للجميع واقتراح تعديلات متوافقة.

كيفية استخدام هذه الأداة

1

اختر لون النص ولون الخلفية

أدخل كود اللون بصيغة HEX أو RGB أو استخدم منتقي الألوان التفاعلي.

2

استعرض نسبة التباين الفورية

شاهد نسبة التباين الرياضية المحسوبة وتقييم النجاح لمستويي AA و AAA.

3

راجع تقييم الأحجام المختلفة

تحقق من مطابقة النصوص العادية والنصوص الكبيرة ومكونات واجهة المستخدم للمعايير.

4

طبق التحسين الذكي المقترح

في حال فشل التباين، استخدم الألوان البديلة المقترحة بنقرة واحدة لتحقيق المطابقة التامة.

المعادلة الرياضية لمعيار التباين والإضاءة النسبية وفق WCAG 2.2

تحسب نسبة التباين بين الإضاءة النسبية للون الأفتح L1 واللون الأغمق L2 في الفضاء اللوني sRGB، وتتراوح النتيجة بين 1:1 (انعدام التباين) و21:1 (التباين الأقصى بين الأسود والأبيض).

Ratio = (L1 + 0.05) / (L2 + 0.05)
  • يتطلب المستوى القياسي AA نسبة لا تقل عن 4.5:1 للنصوص العادية، و3:1 للنصوص الكبيرة.
  • يتطلب المستوى الصارم AAA نسبة 7:1 للنصوص العادية لتحقيق أعلى درجات وضوح الرؤية وضعاف البصر.

أمثلة عملية

فحص نص رمادي داكن فوق خلفية بيضاء نقية

المدخل: لون النص: #1A1A1A، لون الخلفية: #FFFFFF

المخرج: نسبة التباين: 16.1:1 (اجتياز كامل لمعياري AA و AAA للنصوص العادية والكبيرة)

مستوى استثنائي ومثالي لقراءة النصوص الطويلة والمقالات دون إجهاد العين.

القيود

  • يقيس الفاحص التباين بين لونين مصمتين، ولا يأخذ في الحسبان التمويه أو الصور المعقدة تحت النصوص مباشرة.
  • اجتياز الفحص لا يغني عن مراعاة حجم الخط ونوعه وقابليته للقراءة العامة.

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

ما هو الفارق بين متطلبات المستوى AA والمستوى AAA؟

المستوى AA هو المطلب القانوني الشائع لمواقع الويب العامة والتجارية (نسبة 4.5:1)، بينما المستوى AAA يمثل المعيار الصارم (7:1) الموصى به للمواقع الحكومية والخدمية الحساسة لتمكين ضعاف البصر من القراءة بسهولة.

كيف تقترح الأداة ألواناً متوافقة تلقائياً؟

تتحرك الخوارزمية في فضاء HSL لتعديل قيمة الإضاءة للون المحدد تدريجياً حتى تصل إلى أول درجة تحقق نسبة التباين القانونية المطلوبة مع بقاء الصبغة اللونية متناسقة.

المراجع والمعايير المعتمدة