فاحص تباين الألوان
أدخل لون النص ولون الخلفية لتحصل على نسبة التباين محسوبة بمعادلة WCAG 2 نفسها، مع نتيجة النجاح أو الفشل لكل مستوى، وعيّنة حيّة بالعربية والإنجليزية. فهو فاحص تباين (Contrast Checker) يساعدك على اختيار ألوان نص مقروءة لكل الزوار، ومنهم ضعاف البصر.
جارٍ تحميل الأداة…
المعالجة والخصوصية: تُحسب النتيجة داخل متصفحك ولا تُرسل بياناتك إلى أي خادم.
شاهد طريقة الاستخدام
خطوات الاستخدام
- أدخل لون النص
- أدخل لون الخلفية
- النتيجة: نجاح أو فشل وفق WCAG
طريقة الاستخدام
- اكتب لون النص بصيغة HEX مثل #0F6B5F أو بصيغة rgb(15, 107, 95)، أو اختره من منتقي الألوان.
- اكتب لون الخلفية بالطريقة نفسها. يبقى الحقل النصي ومنتقي الألوان متطابقين دائمًا.
- اقرأ نسبة التباين ونتيجة كل معيار: AA وAAA للنص العادي والكبير، وعناصر الواجهة غير النصية.
- انظر إلى العيّنة الحيّة لترى النص فعليًا بالحجم العادي والكبير.
- إن فشل اللون فاختر النسبة المستهدفة لتحصل على أقرب لون أغمق أو أفتح يحققها.
مثال
النص #0F6B5F على خلفية #FFFFFF يعطي نسبة 6.39:1: ينجح في AA للنص العادي (المطلوب 4.5:1) وفي AAA للنص الكبير، ويفشل في AAA للنص العادي لأن المطلوب 7:1.
الرمادي #767676 على الأبيض يعطي 4.54:1 وينجح في AA، أما #777777 فيعطي 4.48:1 ويفشل، مع أن الفرق بينهما درجة واحدة.
الحدود والملاحظات
- تحسب الأداة نسبة تباين WCAG 2 فقط (المعايير 1.4.3 و1.4.6 و1.4.11 في WCAG 2.2). لا تحسب APCA، وهي طريقة مختلفة غير معتمدة في WCAG 2.
- تقارن لونين مصمتين فقط. لا تفحص النص فوق الصور أو التدرجات اللونية أو الفيديو، فالتباين هناك يتغير من نقطة إلى أخرى.
- إذا كان لون النص شبه شفاف (HEX من 8 خانات أو rgba) يُدمج أولًا فوق الخلفية ثم يُحسب التباين للّون الناتج. أما الخلفية شبه الشفافة فمرفوضة، لأن النتيجة تتوقف على ما يقع خلفها.
- يُحدَّد النجاح والفشل بالنسبة الدقيقة غير المقرّبة. تُعرض النسبة بمنزلتين عشريتين، ولا تُقرَّب أبدًا إلى حدّ لم تبلغه: القيمة 4.499 تظهر 4.49 وتفشل في 4.5:1.
- الاقتراحات تمزج لون النص تدريجيًا بالأسود أو الأبيض حتى يتحقق الهدف، فهي أقرب لون على هذا المسار وليست الخيار الوحيد الممكن.
- النسبة لا تقيس كل ما يؤثر في القراءة، مثل سُمك الخط ونوعه وحجمه الفعلي وإضاءة الشاشة.
أسئلة شائعة عن هذه الأداة
ما المقصود بالنص الكبير في WCAG؟
نص بحجم 18 نقطة (24 بكسل) على الأقل، أو 14 نقطة (نحو 18.66 بكسل) على الأقل إذا كان عريضًا (Bold). يكفي النص الكبير تباين 3:1 في AA و4.5:1 في AAA.
لماذا تستخدم الأداة العتبة 0.04045 بينما كُتب في WCAG 2.0 الرقم 0.03928؟
القيمة 0.04045 هي العتبة المصحَّحة في معيار sRGB، أما 0.03928 فهي القيمة التي طُبعت في نص WCAG 2.0. لا يوجد لون من 8 بت تقع قناته بين القيمتين (10/255 = 0.0392 و11/255 = 0.0431)، لذلك تتطابق النتيجة في الحالتين لكل ألوان HEX.
ما معنى فحص «عناصر الواجهة والرسوم»؟
هو المعيار 1.4.11 (التباين لغير النص) المضاف في WCAG 2.1: حدود حقول الإدخال والأزرار والأيقونات وأجزاء الرسوم اللازمة للفهم تحتاج إلى تباين 3:1 على الأقل مع الألوان المجاورة.
كيف أحسب نسبة التباين بين لونين؟
أدخل اللونين فتحسب الأداة النسبة مباشرة بمعادلة WCAG 2، وهي (L1 + 0.05) / (L2 + 0.05) حيث L1 النصوع النسبي للّون الأفتح وL2 للّون الأغمق. وتتراوح النتيجة بين 1:1 للونين متطابقين و21:1 للأسود على الأبيض. فالأبيض على #0F6B5F مثلًا يعطي 6.39:1.
ما نسبة التباين المطلوبة لنجاح AA وAAA؟
يتطلب مستوى AA نسبة 4.5:1 على الأقل للنص العادي و3:1 للنص الكبير، ويتطلب AAA نسبة 7:1 للنص العادي و4.5:1 للنص الكبير، وتحتاج عناصر الواجهة والرسوم إلى 3:1. فالرمادي #767676 على الأبيض ينجح في AA للنص العادي بنسبة 4.54:1، لكنه يفشل في AAA.