مدقق تباين الألوان (WCAG)

تحقق مما إذا كان زوج ألوان المقدمة والخلفية يستوفي معايير إمكانية الوصول WCAG AA وAAA. أداة ضرورية لضمان قابلية قراءة المحتوى لجميع المستخدمين.

الاستوديو · محيط محايد

نسبة التباين

— : 1

AA · نص أساسي ≥ 4.5

AA · نص كبير ≥ 3.0

AAA · نص أساسي ≥ 7.0

AAA · نص كبير ≥ 4.5

إصلاح بنقرة واحدة · يحافظ على درجة اللون

لون النص

الخلفية

العينة

الميزات

عرض نسبة التباين

حالة WCAG AA/AAA

معاينة حية للنص

نص عادي ونص كبير

طريقة الاستخدام

1. حدّد لوني النص والخلفية — تتحدّث العينة وحكم WCAG فورًا.

2. بدّل العينات (نموذج طباعي / مقال / واجهة) لتقييم الزوج في استخدام واقعي؛ اضغط S لتبديل اللونين.

3. إذا فشل مستوى ما، استخدم الإصلاح بنقرة واحدة — يعدّل الإضاءة فقط ويحافظ على درجة اللون — أو انسخ تقرير WCAG.

حول هذه الأداة

النص الذي يقترب سطوعه كثيرًا من سطوع خلفيته صعب القراءة على الجميع ومستحيل على بعض الناس. تقيس إرشادات إتاحة محتوى الويب (WCAG) ذلك بنسبة تباين تتراوح بين 1:1 و21:1 استنادًا إلى الإضاءة النسبية للونين. يتطلب المستوى AA نسبة 4.5:1 على الأقل للنص العادي و3:1 للنص الكبير (24 بكسل، أو نحو 18.66 بكسل بخط عريض)، ويرفع المستوى AAA ذلك إلى 7:1 و4.5:1. يحسب هذا الفاحص النسبة مباشرة، ويعرض النجاح أو الإخفاق في العتبات الأربع، ويقدّم نموذج خط ومقالًا وواجهة حقيقية لتقييم اللونين في سياقهما. وإذا أخفق مستوى ما، يقترح أقرب لون نص ينجح عبر تغيير درجة الإضاءة فقط.

الأسئلة الشائعة

كيف تُحسب نسبة التباين؟

يُحوَّل كل لون إلى إضاءة نسبية باستخدام معادلة sRGB في WCAG 2، ثم تُحسب النسبة (L1 + 0.05) ÷ (L2 + 0.05)، حيث L1 هو اللون الأفتح. الأسود على الأبيض يعطي الحد الأقصى 21:1، واللونان المتطابقان يعطيان 1:1.

ما الذي يُعد نصًا كبيرًا؟

تعرّف WCAG النص الكبير بأنه 18 نقطة على الأقل (24 بكسل CSS) بوزن عادي، أو 14 نقطة (نحو 18.66 بكسل CSS) بخط عريض. يحتاج النص الكبير إلى 3:1 فقط للمستوى AA و4.5:1 للمستوى AAA لأن الحروف الأكبر أسهل قراءة.

هل اجتياز المستوى AA يعني أن تصميمي متاح للجميع؟

التباين متطلب واحد من متطلبات كثيرة. الخطوط الرفيعة والنص فوق الصور والأحجام الصغيرة واستخدام اللون كإشارة وحيدة قد تسبب مشكلات رغم ذلك، لذا اختبر على شاشات حقيقية وأضف فحوص إتاحة أخرى إلى فحص التباين.

كيف يعمل التصحيح المقترح؟

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

هل تنطبق قواعد التباين على الأيقونات والأزرار؟

نعم. تطلب WCAG 2.1 نسبة 3:1 على الأقل للعناصر غير النصية ذات الدلالة، مثل الأيقونات وحدود حقول الإدخال ومؤشرات التركيز. وتُستثنى الرسومات الزخرفية البحتة وعناصر التحكم المعطّلة.