வண்ணத் தட்டு மாறுபாட்டைச் சரிபார்த்தல்

வண்ணத் தட்டு மாறுபாட்டைச் சரிபார்த்தல் என்ற அம்சம், உங்கள் வடிவமைப்பிற்கான வண்ண ஜோடிகளை, அவற்றை உங்கள் தீம் (theme)-இல் பயன்படுத்துவதற்கு முன், WCAG (Web Content Accessibility Guidelines) இணக்கத்திற்காகச் சரிபார்க்கிறது.

கண்ணோட்டம் (Overview)

இந்த அம்சம், உரைக்கும் பின்னணி வண்ணங்களுக்கிடையேயான மாறுபாட்டு விகிதங்களை (contrast ratios) சரிபார்த்து, உங்கள் தளத்தின் வண்ணத் திட்டம் அணுகல் தரநிலைகளை (accessibility standards) பூர்த்தி செய்கிறதா என்பதை உறுதி செய்கிறது. பார்வை குறைபாடு உள்ள பயனர்களுக்குப் படிக்க கடினமான வண்ண சேர்க்கைகளைத் தவிர்க்க இது உதவுகிறது.

உள்ளீட்டு வடிவம் (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	ஆம்	`name` மற்றும் `hex` பண்புகளைக் கொண்ட வண்ணப் பொருட்களின் வரிசை (Array of color objects)
`wcag_level`	string	இல்லை	WCAG இணக்க நிலை: "A", "AA" (இயல்புநிலை), அல்லது "AAA"
`pairs_to_check`	array	இல்லை	சரிபார்க்க வேண்டிய குறிப்பிட்ட வண்ண ஜோடிகள் (உதாரணமாக, `["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

சாதாரண உரை — 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)
`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)

தீம் பில்டரின் வடிவமைப்பு திசைத் தேர்வைப் (design-direction selection) பயன்படுத்தும்போது, வண்ணத் தட்டு மாறுபாட்டைச் சரிபார்த்தல் அம்சம்:

நீங்கள் தேர்ந்தெடுத்த வண்ணத் தட்டினைப் பகுப்பாய்வு செய்கிறது
அனைத்து உரை-பின்னணி சேர்க்கைகளையும் சரிபார்க்கிறது
நீங்கள் தேர்ந்தெடுத்த WCAG நிலையின் அடிப்படையில் சரிபார்க்கிறது
இணக்கமற்ற ஜோடிகளுக்கான பரிந்துரைகளை வழங்குகிறது
அணுக முடியாத வண்ணத் திட்டங்களைப் பயன்படுத்துவதைத் தடுக்கிறது

சிறந்த நடைமுறைகள் (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 — அணுகக்கூடிய வண்ணங்களுடன் வழிசெலுத்தலை (navigation) உருவாக்கவும்

கண்ணோட்டம் (Overview)​

உள்ளீட்டு வடிவம் (Input Format)​

அளவுருக்கள் (Parameters)​

சரிபார்க்கப்படும் WCAG நிலைகள் (WCAG Levels Checked)​

வெளியீட்டு அமைப்பு (Output Schema)​

வெளியீட்டு புலங்கள் (Output Fields)​

பயன்பாட்டு உதாரணம் (Usage Example)​

தீம் பில்டருடன் ஒருங்கிணைப்பு (Integration with Theme Builder)​

சிறந்த நடைமுறைகள் (Best Practices)​

தோல்வியடைந்த ஜோடிகள் மற்றும் பரிந்துரைகள் (Failing Pairs and Recommendations)​

தொடர்புடைய அம்சங்கள் (Related Abilities)​