مدقق التباين

اختبر ألوان المقدمة والخلفية وفق WCAG، وعاين نصا حقيقيا، وقارن خيارات Pantone أكثر قابلية للقراءة.

لون المقدمة

لون الخلفية

نسبة التباين

17.74:1
#111827 / #FFFFFF

نص عادي

WCAG AA 4.5:1
WCAG AA: ناجح
WCAG AAA: ناجح

نص كبير

WCAG AA 3:1
WCAG AA: ناجح
WCAG AAA: ناجح

مكونات UI

WCAG AA 3:1
WCAG AA: ناجح
WCAG AAA: N/A

معاينة مباشرة

نص عادي تجريبي لفحص قابلية قراءة المحتوى.

نص كبير تجريبي

اقتراحات Pantone قابلة للقراءة

زوج الألوان هذا يحقق هدف التباين المحدد بالفعل.

كيفية استخدام مدقق التباين

  1. أدخل ألوان HEX أو اختر ألوان Pantone للمقدمة والخلفية.
  2. راجع نسبة التباين ونتائج WCAG AA أو AAA للنص العادي والنص الكبير ومكونات UI.
  3. استخدم المعاينة المباشرة، أو بدّل الألوان، أو انسخ CSS، أو جرّب اقتراحات Pantone القابلة للقراءة.

استخدامات مدقق التباين

  • تحقق من أزواج ألوان الهوية قبل استخدامها في التصاميم الرقمية.
  • افحص الأزرار والنماذج والتنقل ومكونات UI الأخرى لضمان تباين مقروء.
  • قارن لوحات مستوحاة من Pantone قبل تحويل ألوان الطباعة إلى الشاشات.
  • وثق نتائج WCAG لمراجعات الإتاحة وتسليم ملفات التصميم.

مدقق تباين الألوان لعمليات WCAG و UI و Pantone

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

قراءة نتيجة تباين WCAG بشكل صحيح

تحسب الأداة النصوع النسبي لكلا اللونين وتعرض نسبة التباين المستخدمة في WCAG. يحتاج النص العادي غالبا إلى 4.5:1 لمستوى AA و 7:1 لمستوى AAA، بينما للنص الكبير ومكونات UI الأساسية حدود أقل.

ربط ألوان Pantone بالإتاحة الرقمية

تختار الفرق ألوان Pantone كثيرا للهوية والطباعة، لكن مكافئاتها على الشاشة تحتاج أيضا إلى فحص الإتاحة. ابحث باسم Pantone أو قيمة HEX، وعاين الزوج، وقارن بدائل مقروءة قبل تسليم الألوان إلى فرق التصميم أو التطوير.

سير عمل عملي للمصممين والمطورين

ابدأ بقيم HEX الدقيقة من ملف التصميم، واختبر اتجاهي المقدمة والخلفية، وانسخ CSS أو التقرير، واحتفظ بزوج الألوان الناجح مع بقية توثيق لوحة Pantone.

أسئلة شائعة حول مدقق التباين

ماذا يقيس مدقق التباين هذا؟

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

ما متطلبات التباين في WCAG AA و AAA؟

يتطلب WCAG AA نسبة 4.5:1 على الأقل للنص العادي و 3:1 للنص الكبير أو مكونات UI. ويتطلب WCAG AAA نسبة 7:1 للنص العادي و 4.5:1 للنص الكبير.

هل يمكن فحص ألوان Pantone لإتاحة الويب؟

نعم. يمكن تحويل مراجع Pantone إلى قيم ألوان للشاشة ثم فحص تباينها الرقمي. تحقق دائما من الألوان النهائية في الوسيط الذي ستظهر فيه.

تنبيه حول التباين

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

اشتري لي قهوة