اعتبارسنجی کنتراست پالت

قابلیت اعتبارسنجی کنتراست پالت، جفت‌های رنگی موجود در پالت طراحی شما را برای مطابقت با دستورالعمل‌های دسترسی محتوای وب (WCAG) بررسی می‌کند، پیش از اینکه آن‌ها را به تم (Theme) خود اعمال کنید.

نمای کلی

این قابلیت با اعتبارسنجی نسبت کنتراست بین رنگ‌های متن و پس‌زمینه، اطمینان می‌دهد که طرح رنگ سایت شما با استانداردهای دسترسی مطابقت دارد. این کار از ترکیب رنگ‌هایی که ممکن است برای کاربران دارای اختلالات بینایی خواندنشان دشوار باشد، جلوگیری می‌کند.

فرمت ورودی

این قابلیت یک پالت رنگ را به عنوان ورودی می‌پذیرد:

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

پارامترها

پارامتر	نوع	الزامی	توضیحات
colors	array	بله	آرایه‌ای از آبجکت‌های رنگ شامل ویژگی‌های name و hex
wcag_level	string	خیر	سطح مطابقت WCAG: "A"، "AA" (پیش‌فرض)، یا "AAA"
pairs_to_check	array	خیر	جفت‌های رنگی خاص برای اعتبارسنجی (مثلاً: ["primary-text", "background-text"])

سطوح بررسی شده WCAG

این قابلیت نسبت‌های کنتراست را بر اساس استانداردهای WCAG اعتبارسنجی می‌کند:

سطح	متن عادی	متن بزرگ	حداقل نسبت
A	۳:۱	۳:۱	۳:۱
AA	۴.۵:۱	۳:۱	۴.۵:۱
AAA	۷:۱	۴.۵:۱	۷:۱

• متن عادی — متنی با اندازه کمتر از ۱۸pt (یا ۱۴pt بولد)
• متن بزرگ — متنی با اندازه ۱۸pt یا بزرگتر (یا ۱۴pt بولد یا بزرگتر)

شمای خروجی

این قابلیت یک گزارش اعتبارسنجی مفصل برمی‌گرداند:

{
  "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": []
  }
}

فیلدهای خروجی

فیلد	نوع	توضیحات
compliant	boolean	اینکه آیا کل پالت با سطح WCAG مشخص شده مطابقت دارد یا خیر
wcag_level	string	سطح WCAG که بررسی شده است
pairs	array	نتایج مفصل برای هر جفت رنگ
contrast_ratio	number	نسبت کنتراست محاسبه شده (از ۱:۱ تا ۲۱:۱)
status	string	"pass" یا "fail" برای هر جفت
recommendations	array	پیشنهاداتی برای بهبود جفت‌های ناموفق

مثال استفاده

پرامپت:

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

نتیجه: این قابلیت تمام ترکیب‌های رنگی را اعتبارسنجی کرده و نتیجه زیر را برمی‌گرداند:

• ✅ اصلی + متن: نسبت ۵.۲:۱ (مطابقت با WCAG AA)
• ✅ پس‌زمینه + متن: نسبت ۱۲.۱:۱ (مطابقت با WCAG AAA)
• کلی: مطابقت با WCAG AA

یکپارچه‌سازی با Theme Builder

هنگام استفاده از انتخاب جهت طراحی در Theme Builder، قابلیت اعتبارسنجی کنتراست پالت:

۱. پالت رنگ انتخابی شما را تحلیل می‌کند ۲. تمام ترکیب‌های متن و پس‌زمینه را بررسی می‌کند ۳. در برابر سطح WCAG انتخابی شما اعتبارسنجی انجام می‌دهد ۴. توصیه‌هایی برای جفت‌های نامطابق ارائه می‌دهد ۵. از اعمال طرح‌های رنگی غیرقابل دسترس جلوگیری می‌کند

بهترین شیوه‌ها

• با سطح AA شروع کنید — WCAG AA استاندارد اکثر وب‌سایت‌ها است
• قبل از اعمال، تست کنید — پالت خود را قبل از نهایی کردن طراحی اعتبارسنجی کنید
• تمام ترکیب‌ها را بررسی کنید — مطمئن شوید که متن، لینک‌ها و عناصر رابط کاربری همه استانداردهای لازم را دارند
• ترجیحات کاربر را در نظر بگیرید — ممکن است برخی کاربران حساسیت رنگی بیشتری داشته باشند
• از چک‌کننده کنتراست استفاده کنید — این قابلیت را با ابزارهای مرورگر برای تأیید ترکیب کنید

جفت‌های ناموفق و توصیه‌ها

اگر یک جفت رنگ اعتبارسنجی نشود، این قابلیت توصیه‌هایی ارائه می‌دهد:

{
  "pair": "primary-text",
  "status": "fail",
  "contrast_ratio": 2.8,
  "wcag_aa": false,
  "recommendations": [
    "رنگ متن را روشن‌تر کنید تا #ffffff (نسبت ۵.۲:۱ خواهد بود)",
    "رنگ پس‌زمینه را تیره‌تر کنید تا #556b2f (نسبت ۴.۸:۱ خواهد بود)",
    "از یک رنگ اصلی متفاوت مانند #4a6b1f استفاده کنید (نسبت ۶.۱:۱ خواهد بود)"
  ]
}

قابلیت‌های مرتبط

• Generate Logo SVG — ایجاد لوگو با پالت رنگ معتبر شما
• Create Menu — ساخت ناوبری با رنگ‌های قابل دسترس