പാലറ്റ് കോൺട്രാസ്റ്റ് പരിശോധിക്കുക

നിങ്ങളുടെ ഡിസൈൻ പാലറ്റിലെ കളർ ജോഡികൾ, അവ തീമിൽ ഉപയോഗിക്കുന്നതിന് മുമ്പ്, WCAG (വെബ് കണ്ടന്റ് ആക്സെസിബിലിറ്റി ഗൈഡ്‌ലൈൻസ്) അനുസരിച്ചോ എന്ന് Validate Palette Contrast ഫീച്ചർ പരിശോധിക്കുന്നു.

Overview

ടെക്സ്റ്റ്, ബാക്ക്ഗ്രൗണ്ട് കളറുകൾ തമ്മിലുള്ള കോൺട്രാസ്റ്റ് അനുപാതം (contrast ratio) പരിശോധിച്ച്, നിങ്ങളുടെ സൈറ്റിന്റെ കളർ സ്കീം ആക്സെസിബിലിറ്റി മാനദണ്ഡങ്ങൾ പാലിക്കുന്നുണ്ടോ എന്ന് ഈ ഫീച്ചർ ഉറപ്പാക്കുന്നു. കാഴ്ച വൈകല്യമുള്ള ഉപയോക്താക്കൾക്ക് വായിക്കാൻ ബുദ്ധിമുട്ടുണ്ടാക്കുന്ന കളർ കോമ്പിനേഷനുകൾ ഒഴിവാക്കാൻ ഇത് സഹായിക്കുന്നു.

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 of color objects)
wcag_level	string	No	WCAG പാലിക്കൽ ലെവൽ: "A", "AA" (default), അല്ലെങ്കിൽ "AAA"
pairs_to_check	array	No	പരിശോധിക്കാനുള്ള പ്രത്യേക കളർ ജോഡികൾ (ഉദാഹരണത്തിന്: ["primary-text", "background-text"])

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: ഈ ഫീച്ചർ എല്ലാ കളർ കോമ്പിനേഷനുകളും പരിശോധിച്ച് താഴെ പറയുന്ന ഫലം നൽകുന്നു:

• ✅ Primary + Text: 5.2:1 അനുപാതം (WCAG AA പാലിക്കുന്നു)
• ✅ Background + Text: 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 ഘടകങ്ങൾ എന്നിവയെല്ലാം മാനദണ്ഡങ്ങൾ പാലിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക.
• ഉപയോക്തൃ മുൻഗണനകൾ പരിഗണിക്കുക — ചില ഉപയോക്താക്കൾക്ക് അധികമായ കളർ സെൻസിറ്റിവിറ്റി ഉണ്ടാകാം.
• കോൺട്രാസ്റ്റ് ചെക്കറുകൾ ഉപയോഗിക്കുക — വെരിഫിക്കേഷനായി ഈ ഫീച്ചറിനെ ബ്രൗസർ ടൂളുകളുമായി സംയോജിപ്പിക്കുക.

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 — ആക്സെസ് ചെയ്യാൻ കഴിയുന്ന കളറുകൾ ഉപയോഗിച്ച് नेവിഗേഷൻ ബിൽഡ് ചെയ്യുക