ಪ್ಯಾಲೆಟ್コント್ರಾಸ್ಟ್ ಅನ್ನು ಪರಿಶೀಲಿಸುವುದು

ಪ್ಯಾಲೆಟ್コント್ರಾಸ್ಟ್ ಅನ್ನು ಪರಿಶೀಲಿಸುವುದು ಸಾಮರ್ಥ್ಯವು ನಿಮ್ಮ ವಿನ್ಯಾಸ ಪ್ಯಾಲೆಟ್‌ನಲ್ಲಿರುವ ಬಣ್ಣದ ಜೋಡಿಗಳನ್ನು (colour pairs) WCAG (ವೆಬ್ ಕಂಟೆಂಟ್ ಅಸೆಸಿಬಿಲಿಟಿ ಗೈಡ್‌ಲೈನ್‌ಗಳು) ಅನುಸರಣೆಗಾಗಿ ಪರಿಶೀಲಿಸುತ್ತದೆ, ಆನಂತರ ಅವುಗಳನ್ನು ನಿಮ್ಮ ಥೀಮ್‌ಗೆ ಅನ್ವಯಿಸುವ ಮೊದಲು.

ಅವಲೋಕನ (Overview)

ಈ ಸಾಮರ್ಥ್ಯವು ಪಠ್ಯ ಮತ್ತು ಹಿನ್ನೆಲೆ ಬಣ್ಣಗಳ ನಡುವಿನコント್ರಾಸ್ಟ್ ಅನುಪಾತಗಳನ್ನು ಪರಿಶೀಲಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಸೈಟ್‌ನ ಬಣ್ಣದ ಯೋಜನೆ (color scheme) ಪ್ರವೇಶಸಾಮರ್ಥ್ಯದ ಮಾನದಂಡಗಳನ್ನು ಪೂರೈಸುತ್ತದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ದೃಷ್ಟಿ ದೋಷವುಳ್ಳ ಬಳಕೆದಾರರಿಗೆ ಓದಲು ಕಷ್ಟವಾಗಬಹುದಾದ ಬಣ್ಣದ ಸಂಯೋಜನೆಗಳನ್ನು ಇದು ತಡೆಯಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಇನ್‌ಪುಟ್ ಫಾರ್ಮ್ಯಾಟ್ (Input Format)

ಈ ಸಾಮರ್ಥ್ಯವು ಒಂದು ಬಣ್ಣದ ಪ್ಯಾಲೆట్‌ವನ್ನು ಇನ್‌ಪುಟ್ ಆಗಿ ಸ್ವೀಕರಿಸುತ್ತದೆ:

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

ನಿಯತಾಂಕಗಳು (Parameters)

Parameter	Type	Required	Description
colors	array	Yes	name ಮತ್ತು hex ಗುಣಲಕ್ಷಣಗಳನ್ನು ಹೊಂದಿರುವ ಬಣ್ಣದ ಆಬ್ಜೆಕ್ಟ್‌ಗಳ ಅರೇ (Array)
wcag_level	string	No	WCAG ಅನುಸರಣಾ ಮಟ್ಟ: "A", "AA" (default), ಅಥವಾ "AAA"
pairs_to_check	array	No	ಪರಿಶೀಲಿಸಲು ನಿರ್ದಿಷ್ಟ ಬಣ್ಣದ ಜೋಡಿಗಳು (ಉದಾಹರಣೆಗೆ, ["primary-text", "background-text"])

ಪರಿಶೀಲಿಸಲಾದ WCAG ಮಟ್ಟಗಳು (WCAG Levels Checked)

ಈ ಸಾಮರ್ಥ್ಯವು WCAG ಮಾನದಂಡಗಳ ಪ್ರಕಾರコント್ರಾಸ್ಟ್ ಅನುಪಾತಗಳನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ:

Level	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

• Normal Text — 18pt ಗಿಂತ ಚಿಕ್ಕದಾದ ಪಠ್ಯ (ಅಥವಾ 14pt ಬೋಲ್ಡ್)
• Large Text — 18pt ಅಥವಾ ಅದಕ್ಕಿಂತ ದೊಡ್ಡದಾದ ಪಠ್ಯ (ಅಥವಾ 14pt ಬೋಲ್ಡ್ ಅಥವಾ ಅದಕ್ಕಿಂತ ದೊಡ್ಡದಾದ)

ಔಟ್‌ಪುಟ್ ಸ್ಕೀಮಾ (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	ವಿಫಲವಾದ ಜೋಡಿಗಳನ್ನು ಸುಧಾರಿಸಲು ಸಲಹೆಗಳು

ಬಳಕೆಯ ಉದಾಹರಣೆ (Usage Example)

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)

ಥೀಮ್ ಬಿಲ್ಡರ್‌ನ ವಿನ್ಯಾಸ-ದಿಕ್ಕು ಆಯ್ಕೆಯನ್ನು ಬಳಸುವಾಗ, ಪ್ಯಾಲೆಟ್コント್ರಾಸ್ಟ್ ಅನ್ನು ಪರಿಶೀಲಿಸುವ ಸಾಮರ್ಥ್ಯವು:

1. ನೀವು ಆಯ್ಕೆ ಮಾಡಿದ ಬಣ್ಣದ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ವಿಶ್ಲೇಷಿಸುತ್ತದೆ
2. ಎಲ್ಲಾ ಪಠ್ಯ-ಹಿನ್ನೆಲೆ ಸಂಯೋಜನೆಗಳನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ
3. ನಿಮ್ಮ ಆಯ್ಕೆ ಮಾಡಿದ WCAG ಮಟ್ಟದ ವಿರುದ್ಧ ಪರಿಶೀಲಿಸುತ್ತದೆ
4. ಅನುಸರಣೆಯಲ್ಲದ ಜೋಡಿಗಳಿಗೆ ಶಿಫಾರಸುಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ
5. ಪ್ರವೇಶಿಸಲಾಗದ ಬಣ್ಣದ ಯೋಜನೆಗಳನ್ನು ಅನ್ವಯಿಸುವುದನ್ನು ತಡೆಯುತ್ತದೆ

ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು (Best Practices)

• AA ಮಟ್ಟದಿಂದ ಪ್ರಾರಂಭಿಸಿ — ಹೆಚ್ಚಿನ ವೆಬ್‌ಸೈಟ್‌ಗಳಿಗೆ WCAG AA ಒಂದು ಮಾನದಂಡವಾಗಿದೆ
• ಅನ್ವಯಿಸುವ ಮೊದಲು ಪರೀಕ್ಷಿಸಿ — ವಿನ್ಯಾಸಕ್ಕೆ ಬದ್ಧರಾಗುವ ಮೊದಲು ನಿಮ್ಮ ಪ್ಯಾಲೆట్‌ವನ್ನು ಪರಿಶೀಲಿಸಿ
• ಎಲ್ಲಾ ಸಂಯೋಜನೆಗಳನ್ನು ಪರಿಶೀಲಿಸಿ — ಪಠ್ಯ, ಲಿಂಕ್‌ಗಳು ಮತ್ತು UI ಅಂಶಗಳು ಎಲ್ಲವೂ ಮಾನದಂಡಗಳನ್ನು ಪೂರೈಸುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ
• ಬಳಕೆದಾರರ ಆದ್ಯತೆಗಳನ್ನು ಪರಿಗಣಿಸಿ — ಕೆಲವು ಬಳಕೆದಾರರು ಹೆಚ್ಚುವರಿ ಬಣ್ಣದ ಸೂಕ್ಷ್ಮತೆ ಹೊಂದಿರಬಹುದು
• コント್ರಾಸ್ಟ್ ಚೆಕರ್‌ಗಳನ್ನು ಬಳಸಿ — ಪರಿಶೀಲನೆಗಾಗಿ ಈ ಸಾಮರ್ಥ್ಯವನ್ನು ಬ್ರೌಸರ್ ಟೂಲ್‌ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿ

ವಿಫಲವಾದ ಜೋಡಿಗಳು ಮತ್ತು ಶಿಫಾರಸುಗಳು (Failing Pairs and Recommendations)

ಒಂದು ಬಣ್ಣದ ಜೋಡಿ ಪರಿಶೀಲನೆಯಲ್ಲಿ ವಿಫಲವಾದರೆ, ಈ ಸಾಮರ್ಥ್ಯವು ಶಿಫಾರಸುಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ:

{
  "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 — ಪ್ರವೇಶಸಾಮರ್ಥ್ಯದ ಬಣ್ಣಗಳೊಂದಿಗೆ ನ್ಯಾವಿಗೇಷನ್ ಅನ್ನು ನಿರ್ಮಿಸಿ