§

முன்புற நிறம்

§

பின்னணி நிறம்

§

மாறுபாடு விகிதம்

:1
AA சாதாரணம் ≥ 4.5:1
AA பெரியது ≥ 3:1
AAA சாதாரணம் ≥ 7:1
AAA பெரியது ≥ 4.5:1
§

முன்னோட்டம்

The quick brown fox jumps over the lazy dog.
§

அருகிலுள்ள பாஸ் ஆகும் நிறத்தைப் பரிந்துரைக்கவும்

இந்த கருவி WCAG 2.x சார்பு ஒளிர்வு மற்றும் AA/AAA வரம்புகளுக்கு எதிராக மாறுபாட்டைச் சரிபார்க்கிறது. இது எழுத்துரு வழங்கல், ஆண்டி-அலியாசிங் அல்லது பிற காட்சி-நிலை காரணிகளைக் கணக்கிடாது.

பிரிவு 508 அல்லது WCAG 2.2-ன் படி பணிபுரியும் US வடிவமைப்பாளர்கள் ஒவ்வொரு நாளும் AA (4.5:1 சாதாரணம், 3:1 பெரியது) மற்றும் AAA (7:1 சாதாரணம், 4.5:1 பெரியது) வரம்புகளுக்கு எதிராக வண்ண இணைகளைச் சரிபார்க்கிறார்கள். சமத்துவச் சட்டம் 2010 மற்றும் பொதுத் துறை அமைப்புகள் அணுகல்திறன் விதிமுறைகள் 2018-ஐப் பின்பற்றும் UK குழுக்கள் அதே WCAG மாறுபாடு கணிதத்தைப் பயன்படுத்துகின்றன. இந்த கருவி ஸ்பெக்-இல் உள்ள துல்லியமான சார்பு ஒளிர்வு சூத்திரத்தை இயக்குகிறது — அணுகல்திறன் தணிக்கை கருவிகள் மற்றும் உலாவி டெவ்டூல்கள் ஹூட்டின் கீழ் இயக்கும் அதே கணக்கீடு. அனைத்தும் உங்கள் உலாவியில் நடக்கின்றன, எனவே உங்கள் பிராண்ட் வண்ணத்தொகுப்பு உங்கள் கணினியை விட்டு ஒருபோதும் வெளியேறாது. டிசைன் கோப்பிலிருந்து ஹெக்ஸ் குறியீடுகள், ஸ்டைல்ஷீட்டிலிருந்து rgb() மதிப்புகள் அல்லது பெயரிடப்பட்ட CSS நிறத்தை ஒட்டவும் மற்றும் நான்கு AA மற்றும் AAA நிலைகளிலும் உடனடி பாஸ்/ஃபெயில் தீர்ப்பைப் பெறவும்.

WCAG மாறுபாடு சரிபார்ப்பு சில நேரடியான படிகள் வழியாக இயங்குகிறது. எதுவும் உங்கள் உலாவியை விட்டு வெளியேறாது.

  1. நீங்கள் ஒரு முன்புற மற்றும் ஒரு பின்னணி நிறத்தை உள்ளிடுகிறீர்கள். கருவி hex, rgb(), hsl() அல்லது பெயரிடப்பட்ட CSS நிறங்களை அவற்றின் சிவப்பு, பச்சை மற்றும் நீல சேனல் மதிப்புகளாகப் பாகுபடுத்துகிறது.
  2. ஒவ்வொரு RGB சேனலும் sRGB இடமாற்ற செயல்பாட்டைப் பயன்படுத்தி நேர்கோட்டுமயமாக்கப்படுகிறது. இது காமா-குறியிடப்பட்ட காட்சி மதிப்புகளை நேர்கோட்டு ஒளி தீவிரங்களாக மாற்றுகிறது.
  3. நேர்கோட்டு மதிப்புகள் ஒவ்வொரு சேனலுக்கும் மனிதக் கண்ணின் உணர்திறனுக்கு ஏற்ப எடை போடப்படுகின்றன — சிவப்புக்கு 0.2126, பச்சைக்கு 0.7152, நீலத்திற்கு 0.0722. கூட்டுத்தொகை நிறத்தின் சார்பு ஒளிர்வு ஆகும்.
  4. மாறுபாடு விகிதம் (L1 + 0.05) ÷ (L2 + 0.05), இங்கு L1 என்பது இலகுவான நிறத்தின் ஒளிர்வு மற்றும் L2 என்பது கருமையான நிறத்தின் ஒளிர்வு. கூடுதல் 0.05 சூத்திரத்தை தூய கருப்புக்கு செல்லுபடியாகும் வகையில் வைக்கிறது.
  5. விகிதம் WCAG வரம்புகளுடன் ஒப்பிடப்படுகிறது: AA சாதாரண உரைக்கு குறைந்தது 4.5:1, AA பெரிய உரைக்கு 3:1, AAA சாதாரண உரைக்கு 7:1 மற்றும் AAA பெரிய உரைக்கு 4.5:1 தேவை. பெரிய உரை என்றால் குறைந்தது 18pt அல்லது 14pt போல்ட்.

FAQ

WCAG மாறுபாடு சரிபார்ப்பு பற்றிய பொதுவான கேள்விகள்.

AA மற்றும் AAA இடையே உள்ள வேறுபாடு என்ன?

AA என்பது பெரும்பாலான வெப் உள்ளடக்கத்திற்கான குறைந்தபட்ச இணக்க நிலை ஆகும். இதற்கு சாதாரண உரைக்கு குறைந்தது 4.5:1 மற்றும் பெரிய உரைக்கு 3:1 மாறுபாடு விகிதம் தேவை. AAA என்பது உயர் தரநிலை ஆகும், இதற்கு சாதாரண உரைக்கு 7:1 மற்றும் பெரிய உரைக்கு 4.5:1 தேவை. ஒரு செய்தி தளத்தில் உடல் நகல் போன்ற முக்கிய உள்ளடக்கத்திற்கு நீங்கள் AAA-ஐ இலக்காகக் கொள்ளலாம், அதே நேரத்தில் பரந்த வடிவமைப்பிற்கு AA-ஐப் பயன்படுத்தலாம். பிராண்ட் நிறங்களுடன் எல்லா இடங்களிலும் AAA-ஐ சந்திப்பது கடினமாக இருக்கலாம், எனவே பல குழுக்கள் எல்லா இடங்களிலும் AA-ஐ இலக்காகக் கொண்டு, முடிந்த இடங்களில் முக்கிய உரையை AAA ஆக உயர்த்துகின்றன.

WCAG-இன் கீழ் "பெரிய உரை" என்று எது கணக்கிடப்படுகிறது?

WCAG 2.x பெரிய உரையை சாதாரண எடைக்கு குறைந்தது 18 பாயிண்ட் (24px) அல்லது போல்ட் எடைக்கு 14 பாயிண்ட் (சுமார் 19px) என வரையறுக்கிறது. எழுத்துரு முகத்தின் பகுதியாக இருக்கும் சின்னங்கள் மற்றும் ஐகான்கள் அதே வரம்புகளைப் பின்பற்றுகின்றன. உங்கள் UI-க்கு எந்த வரம்பு பொருந்தும் என்பது உறுதியாக தெரியவில்லை என்றால், இரண்டையும் சரிபார்க்கவும் — AA Large-க்கு குறைந்த தடை (3:1) உள்ளது, எனவே AA Normal-இல் தோல்வியடையும் பெரும்பாலான வண்ண இணைகள் உரை போதுமான அளவு பெரியதாக இருக்கும்போது AA Large-இல் பாஸ் ஆகும்.

என் வண்ண இணை ஏன் AA Large-இல் பாஸ் ஆனால் AA Normal-இல் தோல்வியடைகிறது?

ஏனெனில் AA Large-க்கு 3:1 விகிதம் மட்டுமே தேவைப்படுகிறது, அதே நேரத்தில் AA Normal-க்கு 4.5:1 தேவைப்படுகிறது. WCAG பெரிய உரைக்கு குறைந்த வரம்பை நிர்ணயிக்கிறது, ஏனெனில் பெரிய எழுத்துக்கள் குறைந்த மாறுபாட்டுடன் கூட படிக்க எளிதானவை. ஒரு வண்ண இணை, எடுத்துக்காட்டாக, 4.0:1 மதிப்பெண் பெற்றால், அது AA Large (3:1 வரம்பு) பாஸ் ஆகும் ஆனால் AA Normal (4.5:1 வரம்பு) தோல்வியடையும். வெள்ளை பின்னணியில் இலகுவான பிராண்ட் நிறங்களுடன் இது மிகவும் பொதுவானது.

அணுகல்திறன் தணிக்கைக்காக நான் இந்த கருவியை மட்டும் நம்பலாமா?

இந்த கருவி ஒன்றை மட்டுமே சரிபார்க்கிறது — இரண்டு திட நிறங்களுக்கு இடையிலான WCAG 2.x மாறுபாடு விகிதம். உண்மையான அணுகல்திறனில் மேலும் பல அடங்கும்: ஃபோகஸ் குறிகாட்டிகள், எழுத்துரு அளவு மற்றும் எடை, தகவலைத் தெரிவிக்க ஒரே வழியாக நிறம், மற்றும் திரை வாசிப்பான்கள் மற்றும் ஜூம் கருவிகளுடன் இணக்கத்தன்மை. உங்கள் பயன்பாட்டின் அணுகல்திறனின் முழுமையான படத்திற்காக மற்ற தணிக்கை முறைகளுடன் இந்த மாறுபாடு சரிபார்ப்பையும் பயன்படுத்தவும்.

உள்ளீடு எந்த நிற வடிவங்களை ஏற்கிறது?

நீங்கள் 3, 4, 6 அல்லது 8 இலக்க ஹெக்ஸ் குறியீடுகளை (# உடன் அல்லது இல்லாமல்), மரபு கமா தொடரியல் அல்லது நவீன இடை-பிரிக்கப்பட்ட தொடரியலில் rgb() மற்றும் rgba() மதிப்புகள், எந்த நிலையான ஹ்யூ அலகுடன் (deg, rad, grad, turn) hsl() மற்றும் hsla(), hsv(), hwb() மற்றும் CSS கலர் மாட்யூல் லெவல் 4 ஸ்பெக்-இலிருந்து 150 பெயரிடப்பட்ட CSS நிறங்களை ஒட்டலாம். நிறம் உங்கள் சாதனத்தில் முழுமையாகப் பாகுபடுத்தப்படுகிறது.