الأدوات · الألوان · فاحص تباين الألوان
فاحص تباين الألوان
تحقّق مما إذا كان لونان يستوفيان متطلبات التباين في معيار WCAG للنصوص وواجهة المستخدم.
أضف ملفًا وشغّل الأداة.
ملفك جاهز.
جرّب ملفًا آخر، أو أعد المحاولة.
الإعدادات
اضبط الإعدادات أدناه. تتحدّث النتيجة أثناء العمل.
تعمل الأداة بالكامل داخل متصفحك. لا يُرفع أي ملف.
تعمل الأداة بالكامل داخل متصفحك. لا يُرفع أي شيء إلى أي خادم، ولا يغادر جهازك.
كيف تعمل
اختر أو أدخل لون النص ولون الخلفية.
اقرأ نسبة التباين وتحقّق مما إذا كانت تجتاز مستويي AA وAAA.
عدّل أي لون منهما حتى يجتاز المستوى الذي تحتاجه.
أسئلة شائعة
4.5:1 للنص العادي، و3:1 للنص الكبير (18 نقطة، أو 14 نقطة عريضة) ولعناصر الواجهة والرسومات ذات الدلالة.
7:1 للنص العادي و4.5:1 للنص الكبير - مستوى أكثر صرامة، غير مطلوب لمعظم المواقع لكنه يستحق الوصول إليه حيثما كان ذلك سهلًا.
18 نقطة (24 بكسل) عادي، أو 14 نقطة (19 بكسل) عريض، وفق تعريف WCAG نفسه.
نعم، تُفحص أيضًا نسبة 3:1 لعناصر الواجهة (مثل حدود الأزرار وحقول النماذج) والرسومات ذات الدلالة، وفق قاعدة التباين غير النصي في WCAG 2.1.
لا. تُحسب النسبة بالكامل داخل متصفحك.
أدلة
نظرة أقرب على مشكلات محددة تحلّها هذه الأداة.
Why 'It Looks Fine to Me' Isn't Good Enough for Text Color
Contrast is a measurable ratio, not a matter of taste - and a designer judging a color pair on their own calibrated screen is testing one combination out of many their visitors actually have.
اقرأ الدليلHow to Check Your Text Passes WCAG Contrast (AA and AAA)
Pick a text color and a background color and four pass/fail badges update immediately - no button to press. Here is what each one means and how to read them.
اقرأ الدليلDark Mode Text Contrast: Why Light Gray Often Fails WCAG
Softening white text toward gray feels right on a dark background, and it is exactly where contrast ratios erode fastest. Here is where the real numbers land.
اقرأ الدليل
التعليقات