Stax

مدقق تباين الألوان

فحص نسب تباين الألوان WCAG AA وAAA.

Contrast Ratio
21.00:1
LevelContextRequiredResult
WCAG AANormal text (< 18px, < 14px bold)4.5:1Pass ✓
WCAG AALarge text (≥ 18px or ≥ 14px bold)3:1Pass ✓
WCAG AAANormal text7:1Pass ✓
WCAG AAALarge text4.5:1Pass ✓

The quick brown fox jumps over the lazy dog.

Normal text (18px)

The quick brown fox jumps over the lazy dog.

Large text (24px)

The quick brown fox jumps over the lazy dog.

Bold large (18.67px bold)

PRESETS

ما هو فاحص تباين الألوان؟

أداة تحسب نسبة التباين بين لونين (نص وخلفية) وتقارنها بمعايير WCAG لإمكانية الوصول. أساسية لتصميم مواقع متاحة، الالتزام بالقوانين (ADA، EN 301 549)، تحسين القراءة للجميع.

معايير WCAG

  1. AA - نص عادي: 4.5:1
  2. AA - نص كبير (18pt+): 3:1
  3. AAA - نص عادي: 7:1 (أعلى مستوى)
  4. AAA - نص كبير: 4.5:1
  5. غير نصي (UI): 3:1

تركيبات تفشل عادة

  • رمادي فاتح على أبيض
  • أصفر على أبيض
  • أزرق غامق على أسود
  • نص رمادي على خلفيات معقدة
  • نص ملون على صور

حلول لزيادة التباين

غمّق النص أو أضِئ الخلفية. أضف خلفية صلبة خلف النص على الصور. font-weight: 600+ يحسن القراءة. tools: Chrome Lighthouse، WAVE، axe DevTools للفحص الآلي. اختبر بمحاكاة عمى الألوان (Coblis، Stark).

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

ما هي نسبة التباين؟
قياس الفرق بين لونين (نص وخلفية). تتراوح 1:1 (متطابق) إلى 21:1 (أبيض على أسود). معايير WCAG: 4.5:1 للنص العادي (AA)، 7:1 للوصول الأعلى (AAA)، 3:1 للنص الكبير (18pt+). أساسي لإمكانية الوصول.
لماذا التباين مهم؟
8% من الرجال و0.5% من النساء يعانون عمى ألوان. كبار السن لديهم بصر منخفض. القراءة في الشمس صعبة على شاشات منخفضة التباين. WCAG قانون في معظم الدول للمواقع الحكومية. تباين عالٍ = قابلية وصول، احترافية، تحويلات أعلى.
كيف أصلح تباين منخفض؟
غمّق النص، أو أضِئ الخلفية. تجنب الرمادي على الأبيض الفاتح. تجنب الأصفر على الأبيض. أضف خلفية صلبة خلف النص على الصور. استخدم font-weight أكبر (bold). للمواقع، اختبر بـ Chrome DevTools Lighthouse - يعطي نتيجة الوصول.
هل التباين العالي مهم دائماً؟
نعم لكل النص الوظيفي (أزرار، تنقل، نماذج). يمكن خفضه قليلاً للنصوص الزخرفية فقط (مثل اقتباسات كبيرة بألوان فنية). لكن أي معلومة فعلية يجب أن تكون سهلة القراءة. إذا شك في تباين كافٍ، اختبر بـ WCAG checker.

أدوات ذات صلة