ما الذي تفعله الأداة
يخبرك فاحص تباين الألوان ما إذا كان لون النص مقروءًا فوق لون الخلفية وفق إرشادات الوصول إلى محتوى الويب (WCAG 2.x). أدخل أي لون CSS للنص والخلفية — HEX أو rgb() أو hsl() أو اسم لون أو لونًا شفافًا — وسترى نسبة التباين ونتيجة كل معيار من معايير AA وAAA ومعاينة مباشرة. إذا رسب الزوج، تقترح الأداة أقرب ألوان النص والخلفية الناجحة مع الحفاظ على درجة اللون نفسها. كل شيء يعمل داخل متصفحك.
طريقة الاستخدام
- اكتب أو اختر لون النص ولون الخلفية. زر تبديل يبادل بينهما.
- اقرأ نسبة التباين وقائمة النتائج للنص العادي والنص الكبير ومكوّنات الواجهة.
- إذا رسب أحد المستويات، انظر إلى أقرب الألوان الناجحة: يعرض كل اقتراح اللون الجديد ونسبته وزر نسخ وزر استخدام لتطبيقه.
- فعّل APCA لترى أيضًا تباين الإضاءة (Lc) من مسودة WCAG 3.
تُمزج الألوان شبه الشفافة قبل الفحص: النص فوق الخلفية، والخلفية فوق الأبيض.
مثال
#767676 on #ffffff → 4.54:1 passes AA normal text
#777777 on #ffffff → 4.47:1 fails AA normal text, passes AA large text
#000000 on #ffffff → 21:1 the maximumكيف تُحسب النسبة
تُحسب الإضاءة النسبية لكل لون من قنوات sRGB (بعد تحويلها خطيًا ووزنها بنسبة 21% للأحمر و72% للأخضر و7% للأزرق). النسبة تساوي (الأفتح + 0.05) / (الأغمق + 0.05)، وتتراوح من 1:1 للونين متطابقين إلى 21:1 للأسود على الأبيض. المهم هو الإضاءة فقط لا درجة اللون: الأحمر الصافي على الأخضر الصافي يبدو زاهيًا لكنه لا يتجاوز نحو 1.3:1.
تغيّر الاقتراحات إضاءة اللون فقط (في HSL) وتختار الاتجاه — أغمق أو أفتح — الذي يتطلب تغييرًا أقل. أحيانًا لا ينجح أي ظل: على خلفية رمادية متوسطة لا يبلغ أي لون نص نسبة 7:1.
الأسئلة الشائعة
› ما نسبة التباين التي أحتاجها؟
يتطلب المستوى AA في WCAG 2.x نسبة 4.5:1 على الأقل للنص العادي و3:1 للنص الكبير ولمكوّنات الواجهة مثل حدود الحقول والأيقونات وحلقات التركيز. ويتطلب المستوى AAA نسبة 7:1 للنص العادي و4.5:1 للنص الكبير. تشير معظم القوانين والسياسات إلى المستوى AA.
› ما الذي يُعد نصًا كبيرًا؟
النص الذي لا يقل عن 24px (18pt) بوزن عادي، أو لا يقل عن 18.66px (14pt) بخط عريض. كل ما هو أصغر يُعد نصًا عاديًا ويحتاج إلى النسبة الأعلى.
› لماذا تُعد 4.49:1 راسبة؟
عتبات WCAG دقيقة: النسبة 4.499 لا تبلغ 4.5. لذلك يقتطع هذا الفاحص النسبة المعروضة بدلًا من تقريبها للأعلى، ويقرر النجاح بناءً على القيمة الدقيقة.
› ما هو APCA؟
APCA (خوارزمية التباين الإدراكي الميسّر) هي طريقة حساب التباين المقترحة في مسودة WCAG 3. تعطي قيمة تباين إضاءة Lc تعتمد على أي اللونين هو النص، وتناسب الوضع الداكن أكثر. ليست معيارًا قانونيًا بعد، لذا تُعرض هنا كإرشاد إضافي فقط.