WCAG 2.1 / 2.2 കോൺട്രാസ്റ്റ് മാനദണ്ഡങ്ങൾ മനസ്സിലാക്കുക
വെബ് ഉള്ളടക്കങ്ങൾ എല്ലാവർക്കും ഒരുപോലെ പ്രാപ്യമാക്കുന്നതിന് (Accessibility) രൂപകൽപ്പന ചെയ്തിട്ടുള്ള അന്താരാഷ്ട്ര മാർഗ്ഗനിർദ്ദേശങ്ങളാണ് വെബ് കോണ്ടന്റ് ആക്സസിബിലിറ്റി ഗൈഡ്ലൈൻസ് അഥവാ WCAG. ഇതിൽ ഏറ്റവും പ്രധാനപ്പെട്ട ഒന്നാണ് ടെക്സ്റ്റും അതിന്റെ പശ്ചാത്തലവും തമ്മിലുള്ള കോൺട്രാസ്റ്റ് അനുപാതം (Contrast Ratio). നിലവിലെ കംപ്ലയൻസ് സ്റ്റാൻഡേർഡ് ആയ 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) പോലുള്ള സാധുവായ ഒരു പശ്ചാത്തല നിറം നൽകുക.
കോൺട്രാസ്റ്റ് അനുപാതത്തിന്റെ പരിധികൾ
കോൺട്രാസ്റ്റ് അനുപാതം 1:1 മുതൽ 21:1 വരെയുള്ള പരിധിയിലാണ് കണക്കാക്കുന്നത്. ഇതിൽ 1:1 എന്നത് ഒട്ടും കോൺട്രാസ്റ്റ് ഇല്ലാത്ത അവസ്ഥയെയും (ഉദാഹരണത്തിന് വെള്ള പശ്ചാത്തലത്തിൽ വെള്ള ടെക്സ്റ്റ്), 21:1 എന്നത് ഏറ്റവും ഉയർന്ന കോൺട്രാസ്റ്റിനെയും (വെള്ള പശ്ചാത്തലത്തിൽ കറുത്ത ടെക്സ്റ്റ്) സൂചിപ്പിക്കുന്നു.
WCAG മാനദണ്ഡങ്ങൾ അനുസരിച്ച് വ്യത്യസ്ത ടെക്സ്റ്റ് വലുപ്പങ്ങൾക്കും ഘടകങ്ങൾക്കും നിശ്ചയിച്ചിട്ടുള്ള കുറഞ്ഞ കോൺട്രാസ്റ്റ് പരിധികൾ താഴെ പറയുന്നവയാണ്:
| വിഭാഗം | AA ലെവൽ പരിധി | AAA ലെവൽ പരിധി |
|---|---|---|
| സാധാരണ ടെക്സ്റ്റ് | കുറഞ്ഞത് 4.5:1 | കുറഞ്ഞത് 7:1 |
| വലിയ ടെക്സ്റ്റ് | കുറഞ്ഞത് 3:1 | കുറഞ്ഞത് 4.5:1 |
| UI & ഗ്രാഫിക്സ് | കുറഞ്ഞത് 3:1 (സിംഗിൾ ത്രെഷോൾഡ്) | ബാധകമല്ല |
ഇവിടെ വലിയ ടെക്സ്റ്റ് എന്ന് നിർവചിച്ചിരിക്കുന്നത് 18pt (ഏകദേശം 24px) അല്ലെങ്കിൽ അതിൽ കൂടുതലുള്ള വലുപ്പമുള്ള ടെക്സ്റ്റുകളെയാണ്. ടെക്സ്റ്റ് ബോൾഡ് (Bold) ആണെങ്കിൽ 14pt (ഏകദേശം 18.5px) മുതലുള്ളവ വലിയ ടെക്സ്റ്റ് ആയി കണക്കാക്കും.
ഫലങ്ങളും അന്തിമ വിധിയും വിലയിരുത്തൽ
നിങ്ങൾ നൽകുന്ന നിറങ്ങൾ വിശകലനം ചെയ്ത് ഈ ടൂൾ താഴെ പറയുന്ന ഫലങ്ങൾ തത്സമയം കാണിക്കുന്നു:
- കോൺട്രാസ്റ്റ് അനുപാതം: കണക്കാക്കിയ കൃത്യമായ അനുപാതം "X:1" എന്ന രൂപത്തിൽ കാണിക്കുന്നു.
- സാധാരണ ടെക്സ്റ്റ്: AA, AAA ലെവലുകൾക്ക് നേരെ "വിജയം" അല്ലെങ്കിൽ "പരാജയം" എന്ന് രേഖപ്പെടുത്തുന്നു.
- വലിയ ടെക്സ്റ്റ്: AA, AAA ലെവലുകൾക്ക് നേരെ "വിജയം" അല്ലെങ്കിൽ "പരാജയം" എന്ന് രേഖപ്പെടുത്തുന്നു.
- UI & ഗ്രാഫിക്സ്: ഇതിന് AA/AAA വ്യത്യാസമില്ലാതെ 3:1 എന്ന ഒരൊറ്റ പരിധി മാത്രമാണുള്ളത്. ഇതിന് നേരെ ഒരു ഫലം മാത്രമായിരിക്കും കാണിക്കുക.
ഈ പരിശോധനകളുടെ അടിസ്ഥാനത്തിൽ ടൂൾ നൽകുന്ന അന്തിമ വിധി (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 (വെള്ളയിൽ കറുപ്പ്) വരെയാണ്.
വലിയ ടെക്സ്റ്റ് ആയി കണക്കാക്കുന്നത് എന്താണ്?
18pt (ഏകദേശം 24px) മുതലുള്ള ടെക്സ്റ്റ്, അല്ലെങ്കിൽ ബോൾഡ് ആണെങ്കിൽ 14pt (ഏകദേശം 18.5px). വലിയ ടെക്സ്റ്റ് കുറഞ്ഞ കോൺട്രാസ്റ്റിലും വ്യക്തമായി വായിക്കാൻ കഴിയും, അതിനാൽ ഇത് സാധാരണ ടെക്സ്റ്റിന്റെ കർശനമായ പരിധികൾക്ക് പകരം AA-ൽ 3:1 ലും AAA-ൽ 4.5:1 ലും പാസാകുന്നു.
എനിക്ക് ഏതൊക്കെ കളർ ഫോർമാറ്റുകൾ നൽകാം?
#1a1a1a പോലുള്ള ഒരു ഹെക്സ് മൂല്യമോ, rgb(26, 26, 26) പോലുള്ള ഒരു rgb() മൂല്യമോ, അല്ലെങ്കിൽ ഒരു hsl() മൂല്യമോ ടൈപ്പ് ചെയ്യുക — അല്ലെങ്കിൽ ഒരു നിറം തിരഞ്ഞെടുക്കാൻ ഏതെങ്കിലും സ്വാച്ചിൽ ക്ലിക്ക് ചെയ്യുക. ടെക്സ്റ്റ്, പശ്ചാത്തല നിറങ്ങൾ പരസ്പരം മാറ്റാൻ സ്വാപ്പ് ബട്ടൺ ഉപയോഗിക്കുക.
ഇത് WCAG 2 ആണോ അതോ പുതിയ APCA രീതിയാണോ?
ഇത് WCAG 2.1 / 2.2 ഫോർമുലയാണ് ഉപയോഗിക്കുന്നത്, ഇന്ന് ആക്സസിബിലിറ്റി നിയമങ്ങളും ഓഡിറ്റുകളും റഫറൻസ് ചെയ്യുന്നത് ഇതാണ്. WCAG 3-നായി ഇപ്പോഴും തയ്യാറാക്കിക്കൊണ്ടിരിക്കുന്ന പുതിയതും കൂടുതൽ പെർസെപ്ച്വൽ ആയതുമായ രീതിയാണ് APCA — ഇത് പ്രതീക്ഷ നൽകുന്നതാണെങ്കിലും ഇതുവരെ ഒരു കംപ്ലയൻസ് സ്റ്റാൻഡേർഡ് ആയിട്ടില്ല, അതിനാൽ ഇവിടെയുള്ള പാസ് ഫലങ്ങൾ അത് ഉപയോഗിക്കുന്നില്ല.