محول مجاني

تباين الألوان مدقق (WCAG)

تحقق من نسبة التباين بين لونين للامتثال لمعايير إمكانية الوصول WCAG AA وAAA. مجاني وفوري ويعمل بالكامل في المتصفح.

نص نموذجي — الحجم العادي

نص صغير نموذجي — 14px

نسبة التباين:21.00:1
WCAG AAالنص العاديناجح
WCAG AAالنص الكبيرناجح
WCAG AAAالنص العاديناجح
WCAG AAAالنص الكبيرناجح

حول هذه الأداة

تحقق من نسب تباين الألوان بين النص الأمامي وألوان الخلفية وفقًا لإرشادات إمكانية الوصول WCAG 2.1. أدخل الألوان كرموز سداسية أو قيم RGB أو قيم HSL وشاهد على الفور نسبة التباين إلى جانب نتائج النجاح/الفشل للتوافق مع WCAG AA وAAA بأحجام النص العادية والكبيرة.

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

  1. أدخل أو اختر لون المقدمة (النص) باستخدام منتقي الألوان أو الإدخال السداسي.
  2. أدخل أو اختر لون الخلفية الخاص بك.
  3. شاهد نسبة التباين ونتائج النجاح/الفشل WCAG 2.1 AA/AAA على الفور.
  4. اضبط الألوان حتى تصل إلى مستوى التوافق المطلوب.

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

ما هي نسبة التباين المطلوبة للامتثال لـ WCAG؟
يتطلب WCAG AA نسبة 4.5:1 للنص العادي و3:1 للنص الكبير (18pt+ أو 14pt+ غامق). يتطلب WCAG AAA نسبة 7:1 للنص العادي و4.5:1 للنص الكبير. أقصى نسبة ممكنة هي 21:1 (أسود على أبيض).
لماذا يهم تباين الألوان؟
ويضمن التباين الكافي إمكانية قراءة النص للمستخدمين الذين يعانون من ضعف الرؤية أو عمى الألوان أو أولئك الذين يشاهدون الشاشات في ضوء الشمس الساطع. وهو أيضًا مطلب قانوني بموجب لوائح ADA والاتحاد الأوروبي المتعلقة بإمكانية الوصول للعديد من مواقع الويب.
ما الذي يعتبر "نصًا كبيرًا" في WCAG؟
يتم تعريف النص الكبير بأنه 18 نقطة (24 بكسل) وما فوق للوزن العادي، أو 14 نقطة (18.66 بكسل) وما فوق للنص الغامق. يحتوي النص الكبير على متطلبات تباين أقل لأنه أسهل في القراءة بطبيعته.
هل تتحقق هذه الأداة من تباين العناصر غير النصية؟
يتطلب WCAG 2.1 نسبة تباين 3:1 لمكونات واجهة المستخدم والكائنات الرسومية (الأزرار والأيقونات وحقول النموذج). يمكنك استخدام هذه الأداة للتحقق منها أيضًا — ما عليك سوى إدخال ألوان المكونات والخلفية.