WCAG 2.1 / 2.2 மாறுபாட்டு வழிகாட்டுதல்களைப் புரிந்துகொள்ளுதல்
இணைய அணுகல்தன்மைத் தரநிலைகளில் வண்ண மாறுபாடு என்பது மிக முக்கியமான அங்கமாகும். வலைத்தளங்கள் மற்றும் டிஜிட்டல் உள்ளடக்கங்களை அனைவரும் எளிதாகப் வாசிப்பதை உறுதிசெய்ய WCAG 2.1 / 2.2 வழிகாட்டுதல்கள் குறிப்பிட்ட விதிகளை வகுத்துள்ளன. இந்த மாறுபாட்டுச் சரிபார்ப்பி கருவியானது, நீங்கள் உள்ளிடும் உரை நிறத்திற்கும் பின்னணி நிறத்திற்கும் இடையே உள்ள மாறுபாட்டு விகிதத்தைக் கணக்கிட்டு, அது தற்போதைய அணுகல்தன்மைத் தரநிலைகளின்படி தேர்ச்சி பெறுகிறதா என்பதைத் துல்லியமாகக் காட்டுகிறது.
மாறுபாட்டு விகிதம் என்பது 1:1 முதல் 21:1 வரையிலான வரம்பைக் கொண்டது. இதில் 1:1 என்பது மாறுபாடே இல்லாத நிலையைக் குறிக்கும் (உதாரணமாக, வெள்ளை பின்னணியில் வெள்ளை உரை), மற்றும் 21:1 என்பது மிக உயர்ந்த மாறுபாட்டைக் குறிக்கும் (வெள்ளை பின்னணியில் கருப்பு உரை). இந்தக் கருவி WCAG 2.1 / 2.2 சூத்திரத்தைப் பயன்படுத்தி இந்த விகிதங்களைக் கணக்கிடுகிறது.
உள்ளீட்டு வடிவங்கள் மற்றும் வண்ணக் கட்டுப்பாடு
இந்தக் கருவியைப் பயன்படுத்த, நீங்கள் சோதிக்க விரும்பும் வண்ணங்களை இரண்டு முதன்மைப் புலங்களில் உள்ளிட வேண்டும்:
- உரை நிறம்: நீங்கள் பயன்படுத்த விரும்பும் உரையின் வண்ணம்.
- பின்னணி நிறம்: உரைக்கு பின்னால் அமையும் பின்னணியின் வண்ணம்.
இவ்விரண்டு புலங்களிலும் பின்வரும் வண்ண வடிவங்களை நீங்கள் உள்ளிடலாம்:
- Hex மதிப்புகள்: எ.கா.
#1a1a1a rgb()மதிப்புகள்: எ.கா.rgb(26, 26, 26)hsl()மதிப்புகள்
கருவியின் ஆரம்ப மதிப்புகளாக உரை நிறத்திற்கு #4f46e5 மற்றும் பின்னணி நிறத்திற்கு #ffffff அமைக்கப்பட்டுள்ளன, இது 6.29 மாறுபாட்டு விகிதத்தை வழங்குகிறது. நீங்கள் உள்ளிட்ட வண்ணங்களை ஒன்றோடொன்று மாற்ற விரும்பினால், "உரை மற்றும் பின்னணி வண்ணங்களை மாற்றவும்" பொத்தானைப் பயன்படுத்தலாம்.
தவறான வண்ண மதிப்புகளை உள்ளிட்டால் பின்வரும் பிழைச் செய்திகள் காட்டப்படும்:
- உரை நிறம் தவறாக இருந்தால்: "#1a1a1a or rgb(26, 26, 26) போன்ற சரியான உரை நிறத்தை உள்ளிடவும்."
- பின்னணி நிறம் தவறாக இருந்தால்: "#ffffff அல்லது rgb(255, 255, 255) போன்ற சரியான பின்னணி நிறத்தை உள்ளிடவும்."
AA மற்றும் AAA அணுகல்தன்மை நிலைகளின் வேறுபாடுகள்
அணுகல்தன்மை இணக்கத்தில் AA மற்றும் AAA ஆகிய இரண்டு முக்கிய நிலைகள் உள்ளன. இந்த நிலைகளுக்கான தேவைகள் உரையின் அளவைப் பொறுத்து மாறுபடுகின்றன:
| உரை வகை | AA நிலைத் தேவை | AAA நிலைத் தேவை |
|---|---|---|
| சாதாரண உரை | குறைந்தபட்சம் 4.5:1 | குறைந்தபட்சம் 7:1 |
| பெரிய உரை | குறைந்தபட்சம் 3:1 | குறைந்தபட்சம் 4.5:1 |
சாதாரண உரை என்பது பொதுவாகப் பயன்படுத்தப்படும் சிறிய அளவிலான எழுத்துக்களைக் குறிக்கும். பெரிய உரை என்பது 18pt (சுமார் 24px) அல்லது அதற்கு மேற்பட்ட அளவுள்ள உரையாகும், அல்லது தடிமனாக (bold) இருக்கும்போது 14pt (சுமார் 18.5px) அல்லது அதற்கு மேற்பட்ட அளவுள்ள உரையாகும். பெரிய உரை எளிதாகப் புலப்படுவதால், அதற்கு குறைவான மாறுபாட்டு விகிதமே போதுமானது.
UI கூறுகள் மற்றும் கிராபிக்ஸ் மாறுபாடு
இணையப் பக்கங்களில் உள்ள உரைகள் மட்டுமன்றி, பிற காட்சி கூறுகளும் பயனர்களுக்குத் தெளிவாகத் தெரிய வேண்டும். இதற்காக WCAG 2.1 / 2.2 தரநிலைகளில் "UI & கிராபிக்ஸ்" என்ற பிரிவு சேர்க்கப்பட்டுள்ளது.
பயனர் இடைமுகக் கூறுகள் (பொத்தான்களின் எல்லைகள், உள்ளீட்டுப் புலங்கள்) மற்றும் வரைபடங்கள் போன்ற கிராஃபிக் கூறுகளுக்கு மாறுபாட்டு விகிதம் குறைந்தபட்சம் 3:1 இருக்க வேண்டும். இந்த "UI & கிராபிக்ஸ்" வரிசைக்கு AA அல்லது AAA என்ற தனித்தனி நிலைகள் கிடையாது; இது 3:1 என்ற ஒற்றை வரம்பை மட்டுமே அடிப்படையாகக் கொண்டு "தேர்ச்சி" அல்லது "தோல்வி" என்ற ஒரு முடிவை மட்டுமே காட்டுகிறது.
முடிவுகள் மற்றும் இறுதித் தீர்ப்பை விளக்குதல்
நீங்கள் வண்ணங்களை உள்ளிட்டதும், கருவி மாறுபாட்டு விகிதத்தைக் கணக்கிட்டு "மாறுபாட்டு விகிதம் (Contrast ratio)" என்ற பகுதியில் "X:1" என்ற வடிவத்தில் காண்பிக்கும். அத்துடன், சாதாரண உரை, பெரிய உரை மற்றும் UI கூறுகளுக்கு "தேர்ச்சி" (pass) அல்லது "தோல்வி" (fail) என்ற முடிவுகளைத் தனித்தனியாகக் காட்டும்.
இறுதியாக, ஒட்டுமொத்த வண்ணக் கலவையின் தன்மையை விளக்கும் இறுதித் தீர்ப்பு (Verdict) பின்வருமாறு காட்டப்படும்:
- சாதாரண உரைக்கான AA மற்றும் AAA தேர்ச்சி பெறுகிறது.
- சாதாரண உரைக்கான AA தேர்ச்சி பெறுகிறது.
- பெரிய உரைக்கு மட்டுமே AA தேர்ச்சி பெறுகிறது.
- AA குறைந்தபட்சத்திற்கு கீழே உள்ளது — மாறுபாட்டை அதிகரிக்கவும்.
தரவு செயலாக்கம் மற்றும் தனியுரிமை
இந்த மாறுபாட்டுச் சரிபார்ப்பி கருவியைப் பயன்படுத்தும்போது உங்கள் தரவுகளின் தனியுரிமை முழுமையாகப் பாதுகாக்கப்படுகிறது. ஒவ்வொரு சரிபார்ப்பும் உங்கள் உலாவியிலேயே இயங்குகிறது. நீங்கள் உள்ளிடும் உரை நிறம், பின்னணி நிறம் அல்லது வேறு எந்தத் தகவலும் BroBroGo-விற்கு பதிவேற்றப்படாது.
அடிக்கடி கேட்கப்படும் கேள்விகள் (FAQ)
கேள்வி: AA மற்றும் AAA முடிவுகள் என்ன குறிக்கின்றன?
பதில்: AA என்பது பெரும்பாலான தளங்கள் இலக்காகக் கொள்ளும் நிலை: இதற்கு சாதாரண உரைக்கு குறைந்தபட்சம் 4.5:1 மற்றும் பெரிய உரைக்கு 3:1 விகிதம் தேவைப்படுகிறது. AAA மிகவும் கடுமையானது — சாதாரண உரைக்கு 7:1 மற்றும் பெரிய உரைக்கு 4.5:1. இந்த விகிதம் 1:1 (மாறுபாடு இல்லை) முதல் 21:1 (வெள்ளை நிறத்தில் கருப்பு) வரை இருக்கும்.
கேள்வி: பெரிய உரை (large text) என்று எது கருதப்படுகிறது?
பதில்: 18pt (சுமார் 24px) இலிருந்து தொடங்கும் உரை, அல்லது தடிமனாக (bold) இருக்கும்போது 14pt (சுமார் 18.5px). பெரிய உரை குறைந்த மாறுபாட்டிலும் படிக்கக்கூடியதாக இருக்கும், எனவே இது கடுமையான சாதாரண உரை வரம்புகளுக்குப் பதிலாக AA-வில் 3:1 விகிதத்திலும், AAA-வில் 4.5:1 விகிதத்திலும் தேர்ச்சி பெறுகிறது.
கேள்வி: நான் எந்த வண்ண வடிவங்களை உள்ளிடலாம்?
பதில்: #1a1a1a போன்ற hex மதிப்பு, rgb(26, 26, 26) போன்ற rgb() மதிப்பு அல்லது hsl() மதிப்பை உள்ளிடவும் — அல்லது வண்ணத்தைத் தேர்ந்தெடுக்க ஏதேனும் ஒரு வண்ணக் கட்டத்தைக் கிளிக் செய்யவும். உரை மற்றும் பின்னணி வண்ணங்களை மாற்ற swap பொத்தானைப் பயன்படுத்தவும்.
கேள்வி: இது WCAG 2 அல்லது புதிய APCA முறையா?
பதில்: இது WCAG 2.1 / 2.2 சூத்திரத்தைப் பயன்படுத்துகிறது, இது இன்று அணுகல்தன்மை விதிகள் மற்றும் தணிக்கைகள் குறிப்பிடுவதாகும். APCA என்பது WCAG 3-க்காக இன்னும் வரைவு செய்யப்பபட்டு வரும் ஒரு புதிய, அதிக புலனுணர்வு சார்ந்த முறையாகும் — இது நம்பிக்கைக்குரியது, ஆனால் இன்னும் இணக்கத் தரநிலையாக மாறவில்லை, எனவே இங்குள்ள தேர்ச்சி முடிவுகள் அதைப் பயன்படுத்துவதில்லை.