ਪੈਲੇਟ ਕੰਟ੍ਰਾਸਟ ਵੈਲੀਡੇਟ ਕਰਨਾ

ਪੈਲੇਟ ਕੰਟ੍ਰਾਸਟ ਵੈਲੀਡੇਟ ਕਰਨਾ ਸਮਰੱਥਾ ਤੁਹਾਡੇ ਡਿਜ਼ਾਈਨ ਪੈਲੇਟ ਵਿੱਚ ਰੰਗ ਜੋੜਿਆਂ ਦੀ ਜਾਂਚ ਕਰਦੀ ਹੈ ਤਾਂ ਜੋ ਇਹ ਯਕੀਨੀ ਬਣਾਇਆ ਜਾ ਸਕੇ ਕਿ ਉਹ WCAG (Web Content Accessibility Guidelines) ਦੇ ਅਨੁਕੂਲ ਹਨ, ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਕਿ ਉਹ ਤੁਹਾਡੇ ਥੀਮ 'ਤੇ ਲਾਗੂ ਕੀਤੇ ਜਾਣ।

ਸੰਖੇਪ ਜਾਣਕਾਰੀ

ਇਹ ਸਮਰੱਥਾ ਤੁਹਾਡੀ ਸਾਈਟ ਦੇ ਰੰਗ ਸਕੀਮ ਨੂੰ ਟੈਕਸਟ ਅਤੇ ਬੈਕਗ੍ਰਾਉਂਡ ਰੰਗਾਂ ਵਿਚਕਾਰ ਕੰਟ੍ਰਾਸਟ ਰੇਸ਼ੀਓ ਦੀ ਜਾਂਚ ਕਰਕੇ ਐਕਸੀਸੀਬਿਲਟੀ ਸਟੈਂਡਰਡਜ਼ ਪੂਰਾ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੀ ਹੈ। ਇਹ ਉਹ ਰੰਗਾਂ ਦੇ ਸੁਮੇਸ਼ਣ ਨੂੰ ਰੋਕਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀ ਹੈ ਜੋ ਦਿਖਣ ਨਾਲ ਸਬੰਧਤ ਖਰਾਬੀ ਵਾਲੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਪੜ੍ਹਨਾ ਮੁਸ਼ਕਲ ਹੋ ਸਕਦੇ ਹਨ।

ਇਨਪੁਟ ਫਾਰਮੈਟ

ਇਹ ਸਮਰੱਥਾ ਇਨਪੁਟ ਵਜੋਂ ਇੱਕ ਕਲਰ ਪੈਲੇਟ ਲੈਂਦੀ ਹੈ:

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

ਪੈਰਾਮੀਟਰ (Parameters)

ਪੈਰਾਮੀਟਰ	ਟਾਈਪ	ਲੋੜੀਂਦਾ	ਵਰਣਨ
colors	array	Yes	name ਅਤੇ hex پراਪਰਟੀ ਵਾਲੇ ਕਲਰ ਆਬਜੈਕਟਾਂ ਦਾ ਐਰੇ
wcag_level	string	No	WCAG ਪਾਲਣਾ ਦਾ ਪੱਧਰ: "A", "AA" (ਡਿਫਾਲਟ), ਜਾਂ "AAA"
pairs_to_check	array	No	ਵੈਲੀਡੇਟ ਕਰਨ ਲਈ ਖਾਸ ਰੰਗ ਜੋੜੇ (ਉਦਾਹਰਨ ਲਈ, ["primary-text", "background-text"])

WCAG ਪੱਧਰ ਜੋ ਜਾਂਚੇ ਜਾਂਦੇ ਹਨ

ਇਹ ਸਮਰੱਥਾ WCAG ਸਟੈਂਡਰਡਜ਼ ਅਨੁਸਾਰ ਕੰਟ੍ਰਾਸਟ ਰੇਸ਼ੀਓ ਦੀ ਜਾਂਚ ਕਰਦੀ ਹੈ:

ਪੱਧਰ	ਨਾਰਮਲ ਟੈਕਸਟ	ਵੱਡਾ ਟੈਕਸਟ	ਘੱਟੋ ਘੱਟ ਰੇਸ਼ੀਓ
A	3:1	3:1	3:1
AA	4.5:1	3:1	4.5:1
AAA	7:1	4.5:1	7:1

• ਨਾਰਮਲ ਟੈਕਸਟ — 18pt ਤੋਂ ਛੋਟਾ ਟੈਕਸਟ (ਜਾਂ 14pt ਬੋਲਡ)
• ਵੱਡਾ ਟੈਕਸਟ — 18pt ਜਾਂ ਵੱਡਾ ਟੈਕਸਟ (ਜਾਂ 14pt ਬੋਲਡ ਜਾਂ ਵੱਡਾ)

ਆਊਟਪੁਟ ਸਕੀਮਾ

ਇਹ ਸਮਰੱਥਾ ਇੱਕ ਵਿਸਤ੍ਰਿਤ ਵੈਲੀਡੇਸ਼ਨ ਰਿਪੋਰਟ ਵਾਪਸ ਕਰਦੀ ਹੈ:

{
  "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	ਗਣਿਤ ਕੀਤਾ ਗਿਆ ਕੰਟ੍ਰਾਸਟ ਰੇਸ਼ੀਓ (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 ਨਾਲ ਅਨੁਕੂਲ

ਥੀਮ ਬਿਲਡਰ ਨਾਲ ਏਕੀਕਰਨ (Integration with Theme Builder)

ਜਦੋਂ ਤੁਸੀਂ Theme Builder ਦੇ ਡਿਜ਼ਾਈਨ-ਡਾਇਰੈਕਸ਼ਨ ਸਿਲੈਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ Validate Palette Contrast ਸਮਰੱਥਾ:

1. ਤੁਹਾਡੇ ਚੁਣੇ ਹੋਏ ਕਲਰ ਪੈਲੇਟ ਦਾ ਵਿਸ਼ਲੇਸ਼ਣ ਕਰਦੀ ਹੈ
2. ਸਾਰੇ ਟੈਕਸਟ-ਬੈਕਗ੍ਰਾਉਂਡ ਸੁਮੇਸ਼ਣਾਂ ਦੀ ਜਾਂਚ ਕਰਦੀ ਹੈ
3. ਤੁਹਾਡੇ ਚੁਣੇ ਹੋਏ WCAG ਪੱਧਰ ਦੇ ਵਿਰੁੱਧ ਵੈਲੀਡੇਟ ਕਰਦੀ ਹੈ
4. ਨਾਕਾਮ ਜੋੜਿਆਂ ਲਈ ਸਿਫ਼ਾਰਸ਼ਾਂ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ
5. ਅਣ-ਪਹੁੰਚਯੋਗ ਰੰਗ ਸਕੀਮਾਂ ਨੂੰ ਲਾਗੂ ਹੋਣ ਤੋਂ ਰੋਕਦੀ ਹੈ

ਸਭ ਤੋਂ ਵਧੀਆ ਤਰੀਕੇ (Best Practices)

• AA ਪੱਧਰ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ — WCAG AA ਜ਼ਿਆਦਾਤਰ ਵੈੱਬਸਾਈਟਾਂ ਲਈ ਸਟੈਂਡਰਡ ਹੈ
• ਲਾਗੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਟੈਸਟ ਕਰੋ — ਡਿਜ਼ਾਈਨ ਨੂੰ ਕਮਿਟ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਆਪਣੇ ਪੈਲੇਟ ਨੂੰ ਵੈਲੀਡੇਟ ਕਰੋ
• ਸਾਰੇ ਸੁਮੇਸ਼ਣਾਂ ਦੀ ਜਾਂਚ ਕਰੋ — ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਟੈਕਸਟ, ਲਿੰਕ, ਅਤੇ UI ਤੱਤ ਸਾਰੇ ਸਟੈਂਡਰਡ ਪੂਰਾ ਕਰਦੇ ਹਨ
• ਉਪਭੋਗਤਾ ਤਰਜੀਹਾਂ 'ਤੇ ਵਿਚਾਰ ਕਰੋ — ਕੁਝ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਵਾਧੂ ਰੰਗ ਸੰਵੇਦਨਸ਼ੀਲਤਾ ਹੋ ਸਕਦੀ ਹੈ
• ਕੰਟ੍ਰਾਸਟ ਚੈਕਰ ਵਰਤੋ — ਵੈਰੀਫਿਕੇਸ਼ਨ ਲਈ ਇਸ ਸਮਰੱਥਾ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਟੂਲ ਨਾਲ ਜੋੜੋ

ਨਾਕਾਮ ਜੋੜੇ ਅਤੇ ਸਿਫ਼ਾਰਸ਼ਾਂ

ਜੇ ਕੋਈ ਰੰਗ ਜੋੜਾ ਵੈਲੀਡੇਸ਼ਨ ਵਿੱਚ ਅਸਫਲ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਸਮਰੱਥਾ ਸਿਫ਼ਾਰਸ਼ਾਂ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ:

{
  "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 — ਪਹੁੰਚਯੋਗ ਰੰਗਾਂ ਨਾਲ ਨੈਵੀਗੇਸ਼ਨ ਬਣਾਓ