WCAG வண்ண மாறுபாடு விகிதம்: அணுகலை உறுதி செய்தல்

வலை அணுகலின் ஒரு முக்கிய அம்சம் வண்ண மாறுபாடு ஆகும், இது பார்வை குறைபாடுகள் உள்ள பயனர்கள், குறைந்த பார்வை அல்லது வண்ண குருட்டுத்தன்மை உள்ளவர்கள் உட்பட, உள்ளடக்கத்தை உணர்ந்து புரிந்துகொள்ள முடியும் என்பதை உறுதி செய்கிறது. இந்த இலக்கை அடைய வண்ண மாறுபாட்டிற்கான குறிப்பிட்ட அளவுகோல்களை வலை உள்ளடக்க அணுகல் வழிகாட்டுதல்கள் (WCAG) வழங்குகிறது.

வண்ண மாறுபாடு விகிதம் என்றால் என்ன?

வண்ண மாறுபாடு விகிதம் இரண்டு வண்ணங்களுக்கு இடையிலான ஒளிர்வு (பிரகாசம்) வேறுபாட்டை அளவிடுகிறது: முன்புறம் (உரை அல்லது வரைகலை கூறுகள்) மற்றும் பின்னணி. இது ஒரு விகிதமாக வெளிப்படுத்தப்படுகிறது, பொதுவாக 1:1 (மாறுபாடு இல்லை, ஒரே நிறம்) முதல் 21:1 (அதிகபட்ச மாறுபாடு, கருப்பு மற்றும் வெள்ளை) வரை இருக்கும்.

WCAG கான்ட்ராஸ்ட் தேவைகள்

WCAG இணக்க நிலை (A, AA, AAA) மற்றும் உரையின் அளவை அடிப்படையாகக் கொண்டு வெவ்வேறு கான்ட்ராஸ்ட் தேவைகளை வரையறுக்கிறது:

1. WCAG 2.1 நிலை AA

• சாதாரண உரை (18pt அல்லது 14pt தடிமனுக்கும் குறைவாக): குறைந்தபட்சம் 4.5:1 மாறுபாடு விகிதம் தேவை.
• பெரிய உரை (18pt அல்லது 14pt தடிமனான மற்றும் பெரியது): குறைந்தபட்சம் 3:1 மாறுபாடு விகிதம் தேவை.
• வரைகலை பொருள்கள் மற்றும் பயனர் இடைமுக கூறுகள்: குறைந்தபட்சம் 3:1 மாறுபாடு விகிதம் தேவை. இதில் ஐகான்கள், படிவ புலங்கள் மற்றும் பிற காட்சி கூறுகள் அடங்கும்.

2. WCAG 2.1 நிலை AAA

• சாதாரண உரை: குறைந்தபட்சம் 7:1 மாறுபாடு விகிதம் தேவை. *பெரிய உரை: குறைந்தபட்சம் 4.5:1 மாறுபாடு விகிதம் தேவை.
• வரைகலை பொருள்கள் மற்றும் பயனர் இடைமுக கூறுகள்: குறைந்தபட்சம் 4.5:1 என்ற மாறுபட்ட விகிதம் தேவை.

குறிப்பு:

• "பெரிய உரை" என்பது 18pt அல்லது 14pt தடிமனாக அல்லது CSS பிக்சல்களில் சமமாக வரையறுக்கப்படுகிறது.
• இந்த வழிகாட்டுதல்கள் உரை மற்றும் உரையின் படங்களுக்கு பொருந்தும்.
• முற்றிலும் அலங்காரமான தற்செயலான உரை அல்லது உரையின் படங்கள் விலக்கு அளிக்கப்படுகின்றன.
• லோகோக்கள் விலக்கு அளிக்கப்படுகின்றன.

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

மாறுபாடு விகிதம் வண்ணங்களின் ஒப்பீட்டு ஒளிர்வைப் பயன்படுத்தி கணக்கிடப்படுகிறது. சூத்திரம்:

(L1 + 0.05) / (L2 + 0.05)

எங்கே:

• L1 என்பது இலகுவான நிறத்தின் ஒப்பீட்டு ஒளிர்வு.
• L2 என்பது அடர் நிறத்தின் ஒப்பீட்டு ஒளிர்வு.

ஒப்பீட்டு ஒளிர்வு என்பது 0 மற்றும் 1 க்கு இடையிலான மதிப்பாகும், இங்கு 0 கருப்பு மற்றும் 1 வெள்ளை. இது RGB வண்ண மதிப்புகளை உள்ளடக்கிய ஒரு சிக்கலான சூத்திரத்தைப் பயன்படுத்தி கணக்கிடப்படுகிறது.

அதிர்ஷ்டவசமாக, நீங்கள் இதை கைமுறையாகக் கணக்கிட வேண்டியதில்லை. பல கருவிகள் உங்களுக்காக இதைச் செய்ய முடியும்.

வண்ண மாறுபாட்டைச் சரிபார்ப்பதற்கான கருவிகள்

பல கருவிகள் வண்ண மாறுபாட்டைச் சரிபார்க்க உங்களுக்கு உதவும்:

• WebAIM மாறுபாடு சரிபார்ப்பு: ஹெக்ஸ் வண்ணக் குறியீடுகளை உள்ளிடவும் மாறுபாடு விகிதத்தைக் காணவும் உங்களை அனுமதிக்கும் ஒரு பிரபலமான ஆன்லைன் கருவி.
• அணுகக்கூடிய வண்ணங்கள்: மாறுபாடு விகித சரிபார்ப்புகளுடன் வண்ணத் தட்டு ஜெனரேட்டரை வழங்குகிறது.
• வண்ண மாறுபாட்டு பகுப்பாய்வி (CCA): விண்டோஸ் மற்றும் மேகோஸிற்கான பதிவிறக்கம் செய்யக்கூடிய கருவி.
• உலாவி டெவலப்பர் கருவிகள்: பெரும்பாலான நவீன உலாவிகள் அவற்றின் டெவலப்பர் கருவிகளில் உள்ளமைக்கப்பட்ட வண்ண மாறுபாட்டு சரிபார்ப்புகளைக் கொண்டுள்ளன.
• செருகுநிரல்கள் மற்றும் நீட்டிப்புகள்: பல உலாவி நீட்டிப்புகள் மற்றும் வடிவமைப்பு மென்பொருள் செருகுநிரல்கள் வண்ண மாறுபாட்டு சரிபார்ப்புகளை வழங்குகின்றன. குரோமில் உள்ள கலங்கரை விளக்கம் DevTools: கலங்கரை விளக்கம் வண்ண மாறுபாட்டு சரிபார்ப்புகளை உள்ளடக்கிய அணுகல் தணிக்கைகளை வழங்குகிறது.

வண்ண மாறுபாட்டிற்கான சிறந்த நடைமுறைகள்

• உயர்-மாறுபாடு வண்ண சேர்க்கைகளைத் தேர்வு செய்யவும்: WCAG வழிகாட்டுதல்களை பூர்த்தி செய்யும் அல்லது மீறும் மாறுபாடு விகிதங்களை நோக்கமாகக் கொள்ளுங்கள்.
• போதுமான உரை அளவைப் பயன்படுத்தவும்: பெரிய உரை படிக்க எளிதானது, குறிப்பாக குறைந்த பார்வை கொண்ட பயனர்களுக்கு.
• வண்ணத்தை மட்டுமே நம்புவதைத் தவிர்க்கவும்: தகவலைத் தெரிவிக்க உரை லேபிள்கள் அல்லது ஐகான்கள் போன்ற கூடுதல் காட்சி குறிப்புகளைப் பயன்படுத்தவும்.
• வெவ்வேறு வண்ண பார்வை குறைபாடுகளுடன் உங்கள் வடிவமைப்புகளைச் சோதிக்கவும்: உங்கள் உள்ளடக்கம் இன்னும் அணுகக்கூடியதாக இருப்பதை உறுதிசெய்ய வண்ண குருட்டுத்தன்மையை உருவகப்படுத்தவும்.
• உயர்-மாறுபாடு பயன்முறையை வழங்கவும்: உங்கள் வலைத்தளம் அல்லது பயன்பாட்டின் உயர்-மாறுபாடு பதிப்பிற்கு மாற பயனர்களை அனுமதிக்கவும்.
• சூழலைக் கவனியுங்கள்: சில சூழல்களுக்கு மற்றவற்றை விட அதிக மாறுபாடு விகிதங்கள் தேவைப்படலாம். எடுத்துக்காட்டாக, முக்கியமான தகவல் அல்லது ஊடாடும் கூறுகள் வலுவான மாறுபாட்டைக் கொண்டிருக்க வேண்டும்.
• உண்மையான சாதனங்களில் சோதனை: வண்ணங்கள் வெவ்வேறு திரைகளில் வித்தியாசமாகத் தோன்றும்.

எடுத்துக்காட்டு

• கருப்பு பின்னணியில் வெள்ளை உரை: 21:1 இன் மாறுபாடு விகிதம் (AAA தேவைகளைப் பூர்த்தி செய்கிறது).
• வெளிர் சாம்பல் நிற பின்னணியில் அடர் சாம்பல் நிற உரை: 4.5:1 க்குக் கீழே மாறுபாடு விகிதத்தைக் கொண்டிருக்கலாம் (சாதாரண உரைக்கான AA தேவைகளைப் பூர்த்தி செய்யாது). * வெள்ளை பின்னணியில் நீல உரை: நீல நிற நிழலைப் பொறுத்து, 4.5:1 மாறுபாடு தேவையைப் பூர்த்தி செய்யலாம் அல்லது பூர்த்தி செய்யாமல் போகலாம்.

WCAG வண்ண மாறுபாடு வழிகாட்டுதல்களைப் பின்பற்றுவதன் மூலம், பரந்த அளவிலான பயனர்களுக்கு அணுகக்கூடிய வலைத்தளங்களையும் பயன்பாடுகளையும் நீங்கள் உருவாக்கலாம், இதனால் உங்கள் உள்ளடக்கத்தை அனைவரும் உணர்ந்து புரிந்துகொள்ள முடியும் என்பதை உறுதிசெய்யலாம்.