প্যালেট কনট্রাস্ট ভ্যালিডেট করুন

Validate Palette Contrast ফিচারটি আপনার ডিজাইন প্যালেটের রঙ জোড়াগুলো WCAG (Web Content Accessibility Guidelines) স্ট্যান্ডার্ড মেনে চলে কিনা তা পরীক্ষা করে, এবং তারপর তা আপনার থিমে প্রয়োগ করার আগে যাচাই করে।

ওভারভিউ

এই ফিচারটি নিশ্চিত করে যে আপনার সাইটের রঙের স্কিমটি অ্যাক্সেসিবিলিটি স্ট্যান্ডার্ড পূরণ করে। এটি টেক্সট এবং ব্যাকগ্রাউন্ড রঙের মধ্যে কনট্রাস্ট রেশিও যাচাই করে। এটি এমন রঙের সংমিশ্রণ প্রতিরোধ করতে সাহায্য করে যা দৃষ্টিশক্তির সমস্যাযুক্ত ব্যবহারকারীদের জন্য পড়তে কঠিন হতে পারে।

ইনপুট ফরম্যাট

এই ফিচারটি একটি কালার প্যালেট ইনপুট হিসেবে গ্রহণ করে:

{
  "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 এর সাথে কমপ্লায়েন্ট

থিম বিল্ডারের সাথে ইন্টিগ্রেশন

যখন থিম বিল্ডারের ডিজাইন-ডিরেকশন নির্বাচন ব্যবহার করা হয়, তখন Validate Palette Contrast ফিচারটি:

১. আপনার নির্বাচিত রঙের প্যালেট বিশ্লেষণ করে ২. সমস্ত টেক্সট-ব্যাকগ্রাউন্ড সংমিশ্রণ পরীক্ষা করে ৩. আপনার নির্বাচিত WCAG লেভেলের বিপরীতে যাচাই করে ৪. অ-কমপ্লায়েন্ট জোড়াগুলোর জন্য পরামর্শ প্রদান করে ৫. অ্যাক্সেসিবল নয় এমন রঙের স্কিম প্রয়োগ করা থেকে বিরত রাখে

সেরা অভ্যাস (Best Practices)

• AA লেভেল দিয়ে শুরু করুন — বেশিরভাগ ওয়েবসাইটের জন্য WCAG AA হলো স্ট্যান্ডার্ড।
• প্রয়োগ করার আগে পরীক্ষা করুন — ডিজাইন চূড়ান্ত করার আগে আপনার প্যালেটটি যাচাই করুন।
• সমস্ত সংমিশ্রণ পরীক্ষা করুন — নিশ্চিত করুন যে টেক্সট, লিঙ্ক এবং UI উপাদানগুলো সব স্ট্যান্ডার্ড মেনে চলছে।
• ব্যবহারকারীর পছন্দ বিবেচনা করুন — কিছু ব্যবহারকারীর অতিরিক্ত রঙের সংবেদনশীলতা থাকতে পারে।
• কনট্রাস্ট চেকার ব্যবহার করুন — যাচাইকরণের জন্য এই ফিচারটিকে ব্রাউজার টুলের সাথে ব্যবহার করুন।

ব্যর্থ জোড়া এবং সুপারিশ

যদি কোনো রঙের জোড়া ভ্যালিডেশনে ব্যর্থ হয়, তবে ফিচারটি নিম্নলিখিত পরামর্শগুলো প্রদান করে:

{
  "pair": "primary-text",
  "status": "fail",
  "contrast_ratio": 2.8,
  "wcag_aa": false,
  "recommendations": [
    "টেক্সট রঙটি #ffffff এ হালকা করুন (রেশিও হবে ৫.২:১)",
    "ব্যাকগ্রাউন্ড রঙটি #556b2f এ গাঢ় করুন (রেশিও হবে ৪.৮:১)",
    "একটি ভিন্ন প্রাইমারি রঙ ব্যবহার করুন, যেমন #4a6b1f (রেশিও হবে ৬.১:১)"
  ]
}

সম্পর্কিত ফিচারসমূহ

• Generate Logo SVG — আপনার যাচাই করা রঙের প্যালেট ব্যবহার করে লোগো তৈরি করুন
• Create Menu — অ্যাক্সেসিবল রঙ দিয়ে নেভিগেশন তৈরি করুন