Skip to main content

పాలెట్ కాంట్రాస్ట్ ధ్రువీకరణ

Validate Palette Contrast సామర్థ్యం (ability) మీ డిజైన్ పాలెట్‌లోని రంగు జతలను (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)

పారామీటర్రకం (Type)తప్పనిసరి (Required)వివరణ (Description)
colorsarrayYesname మరియు hex ప్రాపర్టీలతో కూడిన రంగు ఆబ్జెక్ట్‌ల శ్రేణి (Array of color objects)
wcag_levelstringNoWCAG కంప్లైయన్స్ స్థాయి: "A", "AA" (డిఫాల్ట్), లేదా "AAA"
pairs_to_checkarrayNoధ్రువీకరించవలసిన నిర్దిష్ట రంగు జతలు (ఉదాహరణకు, ["primary-text", "background-text"])

చెకింగ్ చేయబడిన WCAG స్థాయిలు (WCAG Levels Checked)

ఈ సామర్థ్యం WCAG ప్రమాణాల ప్రకారం కాంట్రాస్ట్ నిష్పత్తులను ధ్రువీకరిస్తుంది:

స్థాయి (Level)సాధారణ టెక్స్ట్ (Normal Text)పెద్ద టెక్స్ట్ (Large Text)కనీస నిష్పత్తి (Minimum Ratio)
A3:13:13:1
AA4.5:13:14.5:1
AAA7:14.5:17:1
  • సాధారణ టెక్స్ట్ — 18pt కంటే చిన్న టెక్స్ట్ (లేదా 14pt బోల్డ్)
  • పెద్ద టెక్స్ట్ — 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)
compliantbooleanమొత్తం పాలెట్ పేర్కొన్న WCAG స్థాయిని అందుకుందో లేదో
wcag_levelstringచెకింగ్ చేయబడిన WCAG స్థాయి
pairsarrayప్రతి రంగు జతకు సంబంధించిన వివరణాత్మక ఫలితాలు
contrast_rationumberలెక్కించిన కాంట్రాస్ట్ నిష్పత్తి (1:1 నుండి 21:1 వరకు)
statusstringప్రతి జతకు "pass" లేదా "fail"
recommendationsarrayవిఫలమైన జతలను మెరుగుపరచడానికి సూచనలు

వినియోగ ఉదాహరణ (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)

థీమ్ బిల్డర్ యొక్క డిజైన్-డైరెక్షన్ ఎంపికను ఉపయోగిస్తున్నప్పుడు, 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 అవుతుంది)"
]
}
  • Generate Logo SVG — మీ ధ్రువీకరించిన రంగు పాలెట్‌తో లోగోలను సృష్టించండి
  • Create Menu — యాక్సెసిబుల్ రంగులతో నావిగేషన్‌ను నిర్మించండి