العربية
افحص تباين WCAG وصحّح المجموعات الفاشلة بنقرة واحدة.
آخر تحديث
عنوان كبير — 24px غامق
نص أساسي. الثعلب البنّي السريع يقفز فوق الكلب الكسول. اقرأ فقرة أو فقرتين وتحقّق من أن التباين يبقى مريحاً في الجلسات الطويلة.
تعليق صغير — 12px عادي. لا تحمي WCAG في هذا الحجم سوى 14pt فأكبر، فالنص الصغير يستلزم أصرم تباين.
*فاحص التباين* هو ما يستعمله المصمّمون والمطوّرون قبل إطلاق أي شاشة. يحسب **نسبة التباين** بين لونين — نصّك والخلفية خلفه — باستخدام صيغة إرشادات إمكانية الوصول إلى محتوى الويب (WCAG). كلما زادت النسبة كان النص أسهل للقراءة.
تحدّد WCAG ثلاث عتبات. **3:1** هي الحد الأدنى للعناوين الكبيرة (24px+ عادي أو 18.66px+ غامق) ولحدود العناصر التفاعلية الظاهرة مثل الأزرار والحقول والأيقونات. **4.5:1** هي الحد الأدنى لمستوى AA للنص الأساسي، وهو الهدف الذي تستهدفه أغلب الفرق. **7:1** هي AAA، أعلى تقييم، يدعم القراء ذوي ضعف البصر بقوة.
التباين **ليس** مرادفاً لمدى نصاعة اللونين. لونان مفعمان للهوية البصرية قد يبقيان صعبَي القراءة إذا كانت *الإضاءة النسبية* متقاربة. تطبّق هذه الأداة صيغة WCAG على كل قناة وتُبلغ بالنسبة الدقيقة وتقيّم كل سياق، فلا تضطر إلى التخمين.
اكتب أو ألصق قيمة HEX، أو استخدم منتقي الألوان. اللون الأمامي هو نصّك أو أيقونتك، أما الخلفية فهي ما خلفه.
الرقم الكبير على اليسار هو نسبة WCAG. أي قيمة أقل من 3:1 خطرة لأي واجهة. أقل من 4.5:1 تعني فشل النص الأساسي.
ثلاثة صفوف تُظهر النجاح/الفشل للنص العادي (4.5/7) والكبير (3/4.5) وعناصر الواجهة (3:1). استهدف العلامة الخضراء في كل صف يستخدمه تصميمك فعلياً.
إذا فشل AA، تحرّك الأداة إضاءة اللون الأمامي مع الحفاظ على اللون نفسه حتى ينجح الزوج. اضغط مرة أخرى للوصول إلى AAA.
بعد نجاح اللونين في السياقات المطلوبة، انسخ مقطع CSS (color: و background:) وألصقه في ورقة الأنماط أو في ملف الـ design tokens.
قارن ما تنسّقه بالمستوى الذي تحتاجه. المصدر: WCAG 2.2 Understanding 1.4.3 و 1.4.11.
| الهدف | الحد الأدنى AA | الحد الأدنى AAA | ملاحظات |
|---|---|---|---|
| النص الأساسي (< 18pt عادي) | 4.5 : 1 | 7 : 1 | القاعدة الافتراضية للفقرات والتسميات والتوضيحات |
| النص الكبير (≥ 18pt عادي أو ≥ 14pt غامق) | 3 : 1 | 4.5 : 1 | العناوين والنص البطل والاقتباسات الكبيرة |
| عناصر الواجهة والأشكال الرسومية | 3 : 1 | — | حدود الأزرار والحقول والأيقونات وحلقات التركيز |
| الشعار أو الزخرفة الصرفة | مستثنى | مستثنى | الشعارات والنص العَرَضي مستثناة — لكن قابلية الاستخدام تبقى مهمة |
| الحالة المعطّلة | مستثنى | مستثنى | العناصر غير النشطة مستثناة، لكن لا تستخدم ذلك ذريعةً لإصدار افتراضات ضعيفة |
color: #1f2937; /* slate-800 */background: #f9fafb; /* slate-50 *//* Contrast ratio ≈ 14.6:1 */كلاسيكي: slate داكن على شبه أبيض. يجتاز AAA للنص الأساسي (≥ 7:1) بمسافة آمنة. ينبغي أن تستهدف معظم واجهات المنتج هذه المنطقة افتراضياً.
color: #3b82f6; /* blue-500 */background: #ffffff;/* Contrast ratio ≈ 4.0:1 */الأزرق المفعَم على أبيض يهبط عادةً قرب 4:1 — مقروء للعناوين الكبيرة (يجتاز 3:1 AA Large) لكنه يفشل سقف 4.5:1 للنص الأساسي. استخدمه للأزرار وعبارات الحث 18px وأكبر، لا للفقرات.
color: #facc15; /* amber-400 */background: #ffffff;/* Contrast ratio ≈ 1.6:1 */الأصفر الفاقع على أبيض هو الفخ الشهير: ألوان عالية الصخب لكن إضاءتها متقاربة. احفظ هذا الزوج للخلفيات الداكنة (#facc15 على #1f2937 ≈ 12:1).
