مدقّق تباين الألوان
أدخل لون النص ولون الخلفية، واحصل على نسبة التباين وفق WCAG 2.2، ونتيجة النجاح أو الرسوب لمستويي AA وAAA في النص العادي والكبير ولعناصر الواجهة والرسوم، وأقرب الألوان التي تجتاز الاختبار. استخدمه للشرائح والملصقات والأشكال وصفحات الويب. تعمل الأداة في متصفحك، ولا يُرفع أي شيء. مجاني ودون تسجيل.
نتيجة التباين
4.47:1
نسبة التباين
نص عادي — الثعلب البني السريع يقفز فوق الكلب الكسول (16 بكسل).
نص كبير، 24 بكسل (18 نقطة)
نص كبير عريض، 18.7 بكسل (14 نقطة)
زر أو أيقونة
معروضة مقرّبة إلى منزلتين عشريتين نحو الأسفل: لا تقرّب WCAG النتيجة القريبة من الحد للأعلى، فالنسبة 4.499 ترسب عند 4.5.
| المتطلب | يحتاج | النتيجة |
|---|---|---|
| نص عادي، AA (1.4.3) | 4.5:1 | رسوب |
| نص عادي، AAA (1.4.6) | 7:1 | رسوب |
| نص كبير، AA (1.4.3) | 3:1 | نجاح |
| نص كبير، AAA (1.4.6) | 4.5:1 | رسوب |
| عناصر الواجهة والرسوم، AA (1.4.11) | 3:1 | نجاح |
النص الكبير هو ما لا يقل عن 18 نقطة (24 بكسل) بوزن عادي، أو 14 نقطة (حوالي 18.7 بكسل) بالوزن العريض. في الشرائح والملصقات يكون نص الجسم عادةً كبيرًا، أما الحواشي والتعليقات فغالبًا ليست كذلك.
ألوان مقترحة تجتاز الاختبار
غيّر لون النص
غيّر الخلفية
تحتفظ كل قيمة مقترحة بالتدرج اللوني والتشبع، وتغيّر السطوع وحده، بأصغر خطوة تجتاز الاختبار.
كيفية استخدام مدقّق تباين الألوان
- 1. أدخل اللونين. اكتب كل لون بصيغة HEX (
#777777) أوrgb()أوhsl()أو باسم لون في CSS، أو استخدم منتقي الألوان. يبادل زر تبديل بينهما، وهو مفيد لفحص النص الفاتح على خلفية داكنة والعكس. - 2. اقرأ النسبة والجدول. تتراوح النسبة من 1:1 (لونان متطابقان) إلى 21:1 (الأسود على الأبيض). يقارن الجدول النسبة بكل متطلب من متطلبات WCAG، ويقول «نجاح» أو «رسوب» بالكلمات، لا بالألوان وحدها.
- 3. حدّد الحجم. للنص الكبير متطلبات أقل. تعرض المعاينة النص العادي والنص الكبير والنص العريض الكبير وزرًا محاطًا بإطار، لتحكم على حالتك.
- 4. أصلح الزوج الراسب. اختر المستوى الذي تستهدفه، واستخدم لون النص أو الخلفية المقترح. تحتفظ الأداة بالتدرج اللوني (hue) وتغيّر السطوع وحده، بأصغر خطوة تجتاز الاختبار.
ماذا تتطلب WCAG 2.2
تحدد إرشادات إمكانية الوصول لمحتوى الويب (WCAG) 2.2 الحد الأدنى لنسب التباين في ثلاثة معايير نجاح. النسبة هي (L₁ + 0.05) ÷ (L₂ + 0.05)، حيث L₁ هو السطوع النسبي للون الأفتح وL₂ للون الأغمق.
| المعيار | المستوى | النص العادي | النص الكبير |
|---|---|---|---|
| 1.4.3 التباين (الحد الأدنى) | AA | 4.5:1 | 3:1 |
| 1.4.6 التباين (المحسّن) | AAA | 7:1 | 4.5:1 |
| 1.4.11 تباين العناصر غير النصية | AA | 3:1 لعناصر الواجهة والرسوم ذات المعنى | — |
النص الكبير هو ما لا يقل عن 18 نقطة، أو 14 نقطة عريضة — أي 24 بكسل وحوالي 18.7 بكسل على شاشة بدقة 96 نقطة في البوصة. الشعارات والنصوص الزخرفية البحتة والعناصر المعطّلة معفاة من 1.4.3. أما القاعدة 3:1 في 1.4.11 فتشمل الأجزاء اللازمة لإيجاد العنصر (إطار الزر وحدود مربع الاختيار)، وحالاته مثل التركيز، والرسوم التي يحتاجها القارئ لفهم المحتوى، مثل الخطوط في المخطط.
كيف تُحسب النسبة
يُقاس كل قناة من sRGB إلى المجال 0–1 ثم تُحوَّل إلى خطية: c ÷ 12.92 إذا كانت c ≤ 0.04045، وإلا فإن ((c + 0.055) ÷ 1.055)2.4. ثم يكون السطوع النسبي 0.2126 R + 0.7152 G + 0.0722 B. ويُحتسب الأخضر بوزن أكبر لأن العين أكثر حساسية له.
الخطأ المطبعي 0.03928
تطبع WCAG 2.0 و2.1 عتبة 0.03928، وهي بقية من مسودة مبكرة لمعيار sRGB الذي يستخدم 0.04045. صحّح مسرد WCAG 2.2 القيمة إلى 0.04045 وذكر أن الفرق لا يغيّر أي نتيجة عملية. تستخدم هذه الأداة 0.04045.
زوج يرسب بفارق ضئيل
#777777 على الأبيض: 4.48:1 — يرسب في AA للنص العادي (يحتاج 4.5:1)، ويجتاز للنص الكبير.
#767676 على الأبيض: 4.54:1 — أفتح درجة رمادية تجتاز AA على الأبيض.
#0000ff على الأبيض: 8.59:1 — يجتاز AAA. #ff0000 على الأبيض: 4.0:1 — يرسب في AA للنص العادي.
لا تُقرّب WCAG: النسبة 4.4999 ترسب عند 4.5. لذلك تعرض الأداة النسبة مقرّبة إلى منزلتين عشريتين نحو الأسفل، فلا تظهر حالة الرسوب الضئيل أبدًا كنجاح.
فحص الشرائح والملصقات والأشكال
- الشرائح والملصقات ليست صفحات ويب، لكن نسب WCAG هي المقياس المعتمد لها أيضًا. نص الشريحة عادةً كبير (24 بكسل تساوي 18 نقطة)، أما التعليقات وأسطر الحواشي وتسميات المحاور فليست كذلك، لذا افحصها بوصفها نصًا عاديًا.
- استهدف أعلى من الحد الأدنى للعرض. يُضعف الإسقاط في غرفة مضاءة التباين عند الجميع. اختر AAA (7:1) للنص الذي ستعرضه في غرفة شديدة الإضاءة.
- النص فوق صورة فوتوغرافية أو تدرج لا يملك خلفية واحدة. افحص أفتح المناطق وأغمقها خلف النص، أو ضع النص على لوحة مصمتة.
- المخططات والأشكال تقع تحت 1.4.11: الخطوط والأعمدة والعلامات تحتاج 3:1 على الخلفية. ولا ينبغي أن يحمل اللون المعنى وحده — انظر محاكي عمى الألوان.
- الألوان الشفافة تُسطّح قبل القياس: توضع الخلفية فوق الأبيض، ثم يوضع النص فوق الخلفية. الصفحة التي يوجد خلفها شيء آخر تحتاج إلى إدخال اللون مباشرة.
ملاحظة عن APCA
خوارزمية التباين الإدراكي المتاح (APCA) طريقة مرشحة في المسودة العاملة لـ WCAG 3، وتأخذ في الحسبان حجم النص ووزنه وقطبيته. وهي مسودة لا متطلب، ولا يطلب أي قانون أو معيار حاليًا استخدامها. وتبقى نسب WCAG 2.x — وهي التي تحسبها هذه الأداة — أساسًا لادعاءات الامتثال.
الأسئلة الشائعة
- ما نسبة التباين الجيدة؟
- 4.5:1 أو أكثر للنص العادي يحقق WCAG AA، و7:1 يحقق AAA. النص الكبير يحتاج 3:1 لـ AA و4.5:1 لـ AAA. الأسود على الأبيض هو الحد الأقصى، أي 21:1. وأي شيء دون 3:1 يصعب قراءته على كثير من الناس، حتى مع البصر الجيد.
- ما الذي يُعدّ نصًا كبيرًا في WCAG؟
- النص الذي لا يقل عن 18 نقطة (24 بكسل) بوزن عادي، أو 14 نقطة (حوالي 18.7 بكسل) بالوزن العريض. يُقاس الحجم كما يظهر على الشاشة، لذا قد يبدو خط الشريحة صغيرًا في نسخة مطبوعة لكنه كبير عند العرض.
- هل ينطبق شرط التباين على الأيقونات وخطوط المخططات؟
- نعم، عبر معيار النجاح 1.4.11 لتباين العناصر غير النصية: يجب أن تحقق مكونات الواجهة والرسوم اللازمة لفهم المحتوى 3:1 على الأقل على الألوان المجاورة. الرسوم الزخرفية والعناصر المعطّلة معفاة.
- لماذا يظهر لوني 4.49 بينما النسبة قريبة من 4.5؟
- لأن WCAG تقارن النسبة الدقيقة ولا تمنح أي تقريب. الزوج الذي يبلغ 4.4999:1 يرسب عند متطلب 4.5:1، لذلك تعرض الأداة القيمة مقرّبة إلى منزلتين عشريتين نحو الأسفل بدلًا من 4.50.
- كيف تعمل الألوان المقترحة؟
- تحتفظ الأداة بتدرج لونك وتشبعه، وتحرك سطوعه في HSL صعودًا أو هبوطًا بخطوات صغيرة، ثم تعيد أقرب قيمة تبلغ النسبة المستهدفة بصيغة HEX ذات 8 بتات. وإذا لم يبلغ أي سطوع النسبة المطلوبة — مثل 7:1 مقابل رمادي متوسط — فستقول ذلك وتقترح تغيير اللون الآخر.
- هل APCA أفضل من نسبة WCAG؟
- يحاكي APCA الإدراك بدقة أكبر، خاصة في الوضع الداكن والنص الرفيع، لكنه جزء من مسودة (WCAG 3) لا من متطلب معتمد. والقوانين ومعايير المشتريات التي تستشهد بـ WCAG 2.x تستخدم النسبة المحسوبة هنا.