فاحص التباين – نسبة تباين الألوان وفق WCAG
أدخل لون النص ولون الخلفية لحساب نسبة التباين ومعرفة ما إذا كانت التركيبة تستوفي معايير إمكانية الوصول WCAG AA و AAA.
أدخل لونين للتحقق من التباين
يدعم صيغ HEX و RGB و HSL و OKLCH
جرّب مثالاً
فحص تباين الألوان لإمكانية الوصول
يؤثر تباين الألوان بشكل مباشر على سهولة القراءة. عندما لا يكون النص الأمامي متباينًا بما يكفي مع الخلفية، يصبح صعب القراءة — خاصةً لذوي الإعاقة البصرية أو قصور إدراك الألوان.
يحسب هذا الفاحص نسبة التباين بين أي لونين ويقيّمها وفق معايير نجاح WCAG 2.1. أدخل الألوان بصيغة HEX أو RGB أو HSL واحصل على النتائج فورًا.
فهم مستويات تباين WCAG
تحدّد إرشادات إمكانية الوصول لمحتوى الويب (WCAG) الحد الأدنى لنسب التباين لضمان سهولة قراءة النص. هناك مستويان من المطابقة:
- WCAG AA، النص العادي — يتطلب نسبة تباين 4.5:1 على الأقل
- WCAG AA، النص الكبير — يتطلب نسبة تباين 3:1 على الأقل (النص الكبير: 18pt فأكثر أو 14pt عريض فأكثر)
- WCAG AAA، النص العادي — يتطلب نسبة تباين 7:1 على الأقل
- WCAG AAA، النص الكبير — يتطلب نسبة تباين 4.5:1 على الأقل
المستوى AA هو المعيار الأساسي الذي تسعى إليه معظم المواقع والتطبيقات. المستوى AAA هو المعيار المعزّز، ويُوصى به عندما تكون أقصى سهولة قراءة أمرًا بالغ الأهمية.
كيفية استخدام فاحص التباين
- أدخل لون النص (المقدمة) — بصيغة HEX أو RGB أو HSL
- أدخل لون الخلفية بأي صيغة مدعومة
- اطّلع على نسبة التباين ومعاينة حية للنص على تلك الخلفية
- تحقّق من نتائج النجاح/الإخفاق لمستويات WCAG AA و AAA
- استخدم زر التبديل لعكس لون النص والخلفية بسرعة
متى يجب فحص تباين الألوان
- عند اختيار ألوان النص والخلفية لموقع أو تطبيق
- عند التحقق من أن نظام التصميم يفي بمتطلبات إمكانية الوصول
- عند اختبار ألوان الأزرار أو الروابط أو الأيقونات مقابل خلفياتها
- عند فحص تركيبات الألوان في الوضع الداكن
- عند الامتثال لمعايير إمكانية الوصول القانونية (ADA، EAA، Section 508)
دقيق وفوري ومجاني
يحسب هذا الفاحص نسبة التباين وفق WCAG 2.1 باستخدام معادلة السطوع النسبي المعيارية. تُجرى جميع الحسابات في متصفحك مباشرة — لا تُرسَل أي بيانات إلى أي خادم.
هل تحتاج إلى العثور على لون أو تحويله أولًا؟ استخدم منتقي الألوان لاستخراج الألوان من صورة، أو محوّل الألوان للتبديل بين HEX و RGB و HSL.
الأسئلة الشائعة
- ما نسبة التباين الجيدة للنص؟
- بالنسبة للنص بالحجم العادي، يتطلب معيار WCAG AA نسبة تباين 4.5:1 على الأقل. وبالنسبة للنص الكبير (18pt أو 14pt عريض فأكثر)، الحد الأدنى هو 3:1. لأعلى مستوى من إمكانية الوصول (WCAG AAA)، يحتاج النص العادي إلى 7:1 على الأقل.
- ما الفرق بين WCAG AA و AAA؟
- AA هو مستوى المطابقة الأساسي الذي يجب أن تستوفيه معظم المواقع والتطبيقات. AAA هو المستوى المعزّز بمتطلبات تباين أكثر صرامة، ويُوصى به للمحتوى الذي تكون فيه سهولة القراءة القصوى ضرورية، مثل المواقع الحكومية أو الصحية.
- ما تعريف النص الكبير في WCAG؟
- يُعرَّف النص الكبير بأنه بحجم 18 نقطة (24 بكسل) أو أكبر بوزن عادي، أو 14 نقطة (حوالي 18.66 بكسل) أو أكبر عندما يكون عريضًا. متطلبات التباين للنص الكبير أقل لأن حجمه يجعله أسهل في القراءة بطبيعته.
- ما صيغ الألوان التي يدعمها هذا الفاحص؟
- يمكنك إدخال الألوان بصيغة HEX (مثل #1E293B) أو RGB (مثل rgb(30, 41, 59)) أو HSL (مثل hsl(222, 33%, 17%)). تُكتشف الصيغة تلقائيًا.
- كيف تُحسَب نسبة التباين؟
- تُحسَب نسبة التباين باستخدام معادلة WCAG 2.1: (L1 + 0.05) / (L2 + 0.05)، حيث L1 هو السطوع النسبي للون الأفتح و L2 للون الأغمق. تتراوح النتيجة من 1:1 (لا تباين) إلى 21:1 (أقصى تباين، أسود على أبيض).
- هل يعمل الفاحص على الهاتف المحمول؟
- نعم. يعمل فاحص التباين على أي جهاز بمتصفح حديث — حاسوب مكتبي أو جهاز لوحي أو هاتف.
- هل هذه الأداة مجانية؟
- نعم. موقع ColourPicker.app مجاني بالكامل ولا يتطلب أي تسجيل.
- هل يمكنني فحص التباين لعناصر واجهة المستخدم وليس النص فقط؟
- يتطلب WCAG 2.1 أيضًا نسبة تباين 3:1 كحد أدنى لعناصر واجهة المستخدم ذات المعنى والكائنات الرسومية (معيار النجاح 1.4.11). يمكنك استخدام هذا الفاحص للتحقق من تلك التركيبات أيضًا — فمعادلة الحساب واحدة.