النتائج مقدَّمة لأغراض إعلامية فقط وقد تحتوي على أخطاء. يُرجى التحقق من المعلومات المهمة بشكل مستقل. استخدام هذه الأداة على مسؤوليتك الخاصة.
ماذا تفعل هذه الأداة
تقيس أداة فحص تباين الألوان مدى وضوح النص على خلفية معينة. اختر لونًا للنص ولونًا للخلفية، فتعرض لك نسبة التباين من 1:1 (لونان متطابقان) حتى 21:1 (أسود على أبيض)، مع معاينة مباشرة، وما إذا كان الزوج يجتاز عتبات WCAG الأربع: AA وAAA للنص العادي وللنص الكبير.
تستخدم النسبة معادلة الإضاءة النسبية (relative luminance) في WCAG 2: تُحوَّل كل قناة لونية إلى قيمة خطية، ثم تُوزن (للأخضر الوزن الأكبر وللأزرق الأصغر)، ثم تُقسم إضاءة اللون الأفتح على إضاءة الأغمق بعد إضافة 0.05 إلى كليهما. يتطلب مستوى AA نسبة 4.5:1 للنص العادي و3:1 للنص الكبير (24px على الأقل، أو 18.66px بخط عريض). ويرفع مستوى AAA هاتين النسبتين إلى 7:1 و4.5:1. وتجري العملية الحسابية في متصفحك.
متى تستخدمها
- اختيار لون العلامة التجارية للأزرار والتأكد من أن التسميات البيضاء عليها تبقى مقروءة.
- إصلاح تدقيق إمكانية وصول فاشل من Lighthouse أو axe يبلّغ عن نص منخفض التباين.
- اختيار درجة رمادية للنص الثانوي تكون فاتحة بما يكفي لتبدو ثانوية، لكنها تجتاز مستوى AA.
- تصميم سمة داكنة (dark theme)، حيث تفشل ألوان التمييز متوسطة الدرجة غالبًا على الخلفيات الداكنة.
مثال عملي
#ffffff على #3b82f6
3.68:1 - AA large only
#767676 على #ffffff
4.54:1 - AA normal and large, fails AAA normal
#1e293b على #ffffff
14.63:1 - passes all four
أسئلة حول هذه الأداة
لماذا يفشل النص الأبيض على زر أزرق ساطع؟
الألوان المشبعة متوسطة الدرجة لها إضاءة مرتفعة نسبيًا، لذا غالبًا ما تقع نسبة النص الأبيض عليها بين 3:1 و4.5:1. وهذا يكفي للتسميات الكبيرة والعريضة، لكنه لا يكفي لنص المحتوى. اجعل الخلفية أغمق بدرجة أو درجتين حتى تصل النسبة إلى 4.5:1.
ما المستوى الذي ينبغي أن أستهدفه: AA أم AAA؟
مستوى AA هو الذي تشير إليه معظم قوانين وسياسات إمكانية الوصول، لذا اعتبره الحد الأدنى. أما AAA فهدف أكثر صرامة يستحق السعي إليه في النصوص الطويلة المخصصة للقراءة، لكنه ليس مطلوبًا لكل عنصر.
هل ينطبق التباين على الأيقونات والحدود أيضًا؟
تطلب WCAG 2.1 نسبة 3:1 على الأقل للرسومات ذات الدلالة ومكونات الواجهة، مثل حدود حقول الإدخال وحلقات التركيز (focus rings) والأيقونات التي تحمل معلومات. واستخدم نتيجة AA للنص الكبير دليلًا لهذه العناصر.
هل يمكنني فحص لون مكتوب بصيغة RGB أو HSL؟
تعمل أدوات اختيار الألوان بقيم hex. حوّل الصيغ الأخرى أولًا باستخدام مجموعة أدوات محوّل الألوان من HEX إلى RGB أو أداة تحويل الألوان، ثم الصق رمز hex.
هل هذه الأداة مجانية؟
نعم، إنها مجانية. دون تسجيل أو بريد إلكتروني. تظهر النتيجة في هذه الصفحة.
كيف أحصل على النتيجة؟
استخدم الأداة في هذه الصفحة. تظهر النتيجة هنا دون الحاجة إلى إرسالها بالبريد الإلكتروني.