WCAG കോൺട്രാസ്റ്റ് പരിശോധകൻ — 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 നിറങ്ങൾ എന്നിവ ഒട്ടിക്കാം. നിറം നിങ്ങളുടെ ഉപകരണത്തിൽ പൂർണ്ണമായും പാഴ്സ് ചെയ്യപ്പെടുന്നു.