التحقق من تباين لوحة الألوان

تتحقق قدرة التحقق من تباين لوحة الألوان من أزواج الألوان في لوحة تصميمك للتأكد من مطابقتها لإرشادات الوصول لمحتوى الويب (WCAG) قبل تطبيقها على القالب الخاص بك.

نظرة عامة

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

صيغة الإدخال

تستقبل الوظيفة لوحة ألوان كمدخل:

{
  "colors": [
    {
      "name": "primary",
      "hex": "#678233"
    },
    {
      "name": "text",
      "hex": "#ffffff"
    },
    {
      "name": "background",
      "hex": "#f5f5f5"
    }
  ],
  "wcag_level": "AA"
}

المعلمات (Parameters)

المعلمة (Parameter)	النوع (Type)	مطلوب (Required)	الوصف (Description)
colors	array	نعم	مصفوفة من كائنات الألوان التي تحتوي على خاصيتي name و hex
wcag_level	string	لا	مستوى مطابقة WCAG: "A"، أو "AA" (افتراضي)، أو "AAA"
pairs_to_check	array	لا	أزواج ألوان محددة للتحقق منها (مثل: ["primary-text", "background-text"])

مستويات WCAG التي يتم التحقق منها

تقوم الوظيفة بالتحقق من نسب التباين وفقًا لمعايير WCAG:

المستوى	النص العادي (Normal Text)	النص الكبير (Large Text)	الحد الأدنى للنسبة (Minimum Ratio)
A	3:1	3:1	3:1
AA	4.5:1	3:1	4.5:1
AAA	7:1	4.5:1	7:1

• النص العادي — النص الأصغر من 18 نقطة (أو 14 نقطة بخط عريض)
• النص الكبير — النص بحجم 18 نقطة أو أكبر (أو 14 نقطة بخط عريض أو أكبر)

مخطط الإخراج (Output Schema)

تعيد الوظيفة تقرير تحقق مفصل:

{
  "compliant": true,
  "wcag_level": "AA",
  "pairs": [
    {
      "pair": "primary-text",
      "color1": "#678233",
      "color2": "#ffffff",
      "contrast_ratio": 5.2,
      "wcag_a": true,
      "wcag_aa": true,
      "wcag_aaa": false,
      "status": "pass"
    },
    {
      "pair": "background-text",
      "color1": "#f5f5f5",
      "color2": "#333333",
      "contrast_ratio": 12.1,
      "wcag_a": true,
      "wcag_aa": true,
      "wcag_aaa": true,
      "status": "pass"
    }
  ],
  "summary": {
    "total_pairs": 2,
    "passing": 2,
    "failing": 0,
    "recommendations": []
  }
}

حقول الإخراج (Output Fields)

الحقل (Field)	النوع (Type)	الوصف (Description)
compliant	boolean	ما إذا كانت لوحة الألوان بأكملها تفي بمستوى WCAG المحدد
wcag_level	string	مستوى WCAG الذي تم التحقق منه
pairs	array	النتائج التفصيلية لكل زوج من الألوان
contrast_ratio	number	نسبة التباين المحسوبة (من 1:1 إلى 21:1)
status	string	"pass" (ناجح) أو "fail" (فاشل) لكل زوج
recommendations	array	اقتراحات لتحسين الأزواج التي فشلت في الاختبار

مثال على الاستخدام

الموجه (Prompt):

Check if my color palette meets WCAG AA standards. I have primary color #678233, text color #ffffff, and background #f5f5f5.

النتيجة (Result): تقوم الوظيفة بالتحقق من جميع مجموعات الألوان وتعيد:

• ✅ الأساسي + النص: نسبة 5.2:1 (اجتياز WCAG AA)
• ✅ الخلفية + النص: نسبة 12.1:1 (اجتياز WCAG AAA)
• الإجمالي: متوافق مع WCAG AA

التكامل مع مُنشئ القوالب (Theme Builder)

عند استخدام اختيار اتجاه التصميم في مُنشئ القوالب، تقوم وظيفة التحقق من تباين لوحة الألوان بما يلي:

1. تحليل لوحة الألوان التي اخترتها.
2. التحقق من جميع مجموعات النص والخلفية.
3. التحقق مقابل مستوى WCAG الذي اخترته.
4. تقديم توصيات للأزواج غير المتوافقة.
5. منع تطبيق أنظمة ألوان غير متاحة.

أفضل الممارسات

• ابدأ بمستوى AA — يُعد WCAG AA هو المعيار لمعظم المواقع الإلكترونية.
• الاختبار قبل التطبيق — تحقق من لوحتك قبل الالتزام بتصميم معين.
• التحقق من جميع التوليفات — تأكد من أن النص، والروابط، وعناصر واجهة المستخدم كلها تفي بالمعايير.
• مراعاة تفضيلات المستخدم — قد يعاني بعض المستخدمين من حساسية لونية إضافية.
• استخدام مدققات التباين — اجمع هذه الوظيفة مع أدوات المتصفح للتحقق.

الأزواج الفاشلة والتوصيات

إذا فشل زوج من الألوان في التحقق، تقدم الوظيفة توصيات:

{
  "pair": "primary-text",
  "status": "fail",
  "contrast_ratio": 2.8,
  "wcag_aa": false,
  "recommendations": [
    "تفتيح لون النص إلى #ffffff (ستكون النسبة 5.2:1)",
    "تغميق لون الخلفية إلى #556b2f (ستكون النسبة 4.8:1)",
    "استخدام لون أساسي مختلف مثل #4a6b1f (ستكون النسبة 6.1:1)"
  ]
}

الوظائف ذات الصلة (Related Abilities)

• Generate Logo SVG — إنشاء شعارات بلوغتك باستخدام لوحة الألوان التي قمت بالتحقق منها.
• Create Menu — بناء التنقل بألوان يسهل الوصول إليها.