ImageColorPicker.com

കളർ കോൺട്രാസ്റ്റ് ചെക്കർ

പ്രവേശനക്ഷമത ഉറപ്പാക്കാൻ ഫോർഗ്രൗണ്ട്, പശ്ചാത്തല നിറങ്ങൾ തമ്മിലുള്ള കോൺട്രാസ്റ്റ് അനുപാതം പരിശോധിക്കുക.

നിങ്ങളുടെ നിറങ്ങൾ പരിശോധിക്കുക

ടെക്സ്റ്റ് വായനാക്ഷമതയ്ക്കായി WCAG പ്രവേശനക്ഷമത മാനദണ്ഡങ്ങൾ പാലിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ വർണ്ണ കോമ്പിനേഷനുകൾ പരീക്ഷിക്കുക.

13.58 ടു 1
കോൺട്രാസ്റ്റ്
AAA
വാചക ഫലം
സൂപ്പർ

താരതമ്യം ചെയ്തത്: #CDD0D6 പശ്ചാത്തലത്തിലെ #000000

വാചകം

16px, റെഗുലർ (400)

സാധാരണ വാചകമായി കണക്കാക്കുന്നു.

  • AA (WCAG 1.4.3): കുറഞ്ഞത് 4.5:1

    പാസായി

  • AAA (WCAG 1.4.6): കുറഞ്ഞത് 7:1

    പാസായി

UI ഘടകങ്ങളും ഗ്രാഫിക്സും

ഐക്കണുകൾ, ഇൻപുട്ട് ബോർഡറുകൾ, ഫോക്കസ് സൂചകങ്ങൾ, ഇന്റർഫേസ് ഉപയോഗിക്കാൻ നിങ്ങൾ കാണേണ്ട മറ്റ് ഭാഗങ്ങൾ.

  • AA (WCAG 1.4.11): കുറഞ്ഞത് 3:1

    പാസായി
13.58 ടു 1. വാചകം: AA പാസാകുന്നു, AAA പാസാകുന്നു. UI ഘടകങ്ങൾ: പാസാകുന്നു.
ഇത് എങ്ങനെ പരിശോധിക്കുന്നു
താരതമ്യം ചെയ്ത നിറങ്ങൾ (മിശ്രണത്തിന് ശേഷം)
വാചകം #000000, പശ്ചാത്തലം #CDD0D6
ആപേക്ഷിക ലൂമിനൻസ്
വാചകം 0.0000, പശ്ചാത്തലം 0.6294
ഫോർമുല
(L1 + 0.05) / (L2 + 0.05) ഇവിടെ L1 ഇളം നിറത്തിന്റെയും L2 ഇരുണ്ട നിറത്തിന്റെയും ലൂമിനൻസ് ആണ്.
കൃത്യമായ അനുപാതം
13.5891 ടു 1, 13.58 ടു 1 ആയി കാണിക്കുന്നു. കാണിക്കുന്ന മൂല്യം റൗണ്ട് ചെയ്യാതെ മുറിച്ചതാണ്, അതിനാൽ യഥാർത്ഥത്തേക്കാൾ മെച്ചമായി ഒരിക്കലും തോന്നില്ല. ആവശ്യകതയുമായി താരതമ്യം ചെയ്യുന്നത് കൃത്യമായ മൂല്യമാണ്.

വാചക വലുപ്പം: 16px, റെഗുലർ (400)

സാധാരണ വാചകമായി കണക്കാക്കുന്നു. വലിയ വാചകം എന്നാൽ കുറഞ്ഞത് 24px (18pt), അല്ലെങ്കിൽ ബോൾഡ് ആണെങ്കിൽ (കനം 700 അല്ലെങ്കിൽ കൂടുതൽ) കുറഞ്ഞത് 18.67px (14pt). വലുപ്പങ്ങൾ റൗണ്ട് ചെയ്യാതെ മുറിച്ചാണ് കാണിക്കുന്നത്.

സാധാരണ വാചകമായി കണക്കാക്കുന്നു. വലിയ വാചകം എന്നാൽ കുറഞ്ഞത് 24px (18pt), അല്ലെങ്കിൽ ബോൾഡ് ആണെങ്കിൽ (കനം 700 അല്ലെങ്കിൽ കൂടുതൽ) കുറഞ്ഞത് 18.67px (14pt). വലുപ്പങ്ങൾ റൗണ്ട് ചെയ്യാതെ മുറിച്ചാണ് കാണിക്കുന്നത്.

Aa
പ്രിവ്യൂ തലക്കെട്ട്

വേഗതയേറിയ തവിട്ടുനിറത്തിലുള്ള കുറുക്കൻ മടിയനായ നായയുടെ മുകളിലൂടെ ചാടുന്നു

ചെറിയ ടെക്സ്റ്റ് ഉദാഹരണം (12px)

വാചകം
#000000
പശ്ചാത്തലം
#cdd0d6

WCAG മാനദണ്ഡങ്ങൾ

ലെവൽ AA

സാധാരണ ടെക്സ്റ്റിന് 4.5:1 ഉം വലിയ ടെക്സ്റ്റിന് 3:1 ഉം ആണ് ഏറ്റവും കുറഞ്ഞ കോൺട്രാസ്റ്റ് അനുപാതം. മിക്ക വെബ്‌സൈറ്റുകൾക്കും ആവശ്യമാണ്.

ലെവൽ AAA

സാധാരണ വാചകത്തിന് 7:1 ഉം വലിയ വാചകത്തിന് 4.5:1 ഉം എന്ന മെച്ചപ്പെടുത്തിയ ദൃശ്യതീവ്രതാ അനുപാതം. ഒപ്റ്റിമൽ ആക്‌സസിബിലിറ്റിക്ക് ശുപാർശ ചെയ്യുന്നു.

കളർ കോൺട്രാസ്റ്റ് ചെക്കർ

ടെക്സ്റ്റിന്റെയും പശ്ചാത്തല നിറങ്ങളുടെയും കോൺട്രാസ്റ്റ് അനുപാതം കണക്കാക്കുക.

വാചകത്തിനും പശ്ചാത്തല വർണ്ണത്തിനുമായി കളർ പിക്കർ ഉപയോഗിച്ച് ഒരു നിറം തിരഞ്ഞെടുക്കുക അല്ലെങ്കിൽ RGB ഹെക്സാഡെസിമൽ ഫോർമാറ്റിൽ ഒരു നിറം നൽകുക (ഉദാ. #259 അല്ലെങ്കിൽ #2596BE). നിറം തിരഞ്ഞെടുക്കാൻ നിങ്ങൾക്ക് സ്ലൈഡർ ക്രമീകരിക്കാം. കാഴ്ചയുള്ള ഉപയോക്താക്കൾക്ക് വാചകം വായിക്കാനാകുമോ എന്ന് കണ്ടുപിടിക്കാൻ സഹായിക്കുന്നതിന് വെബ് ഉള്ളടക്ക പ്രവേശന മാർഗ്ഗനിർദ്ദേശങ്ങൾക്ക് (WCAG) ഒരു പ്രത്യേക മാർഗ്ഗനിർദ്ദേശമുണ്ട്. ഈ മാനദണ്ഡം വർണ്ണ കോമ്പിനേഷനുകളെ താരതമ്യപ്പെടുത്താവുന്ന അനുപാതങ്ങളിലേക്ക് മാപ്പ് ചെയ്യുന്നതിന് ഒരു പ്രത്യേക അൽഗോരിതം ഉപയോഗിക്കുന്നു. ഈ ഫോർമുല ഉപയോഗിച്ച്, WCAG പ്രസ്താവിക്കുന്നത് ടെക്‌സ്‌റ്റിനൊപ്പം 4.5:1 വർണ്ണ കോൺട്രാസ്റ്റ് അനുപാതവും അതിന്റെ പശ്ചാത്തലവും സാധാരണ (ബോഡി) ടെക്‌സ്‌റ്റിന് പര്യാപ്തമാണെന്നും വലിയ ടെക്‌സ്‌റ്റിന് (18+ pt റെഗുലർ, അല്ലെങ്കിൽ 14+ pt ബോൾഡ്) കുറഞ്ഞത് 3 ഉണ്ടായിരിക്കണം: 1 വർണ്ണ കോൺട്രാസ്റ്റ് അനുപാതം.

പ്രധാന സവിശേഷതകൾ

  • തത്സമയ ദൃശ്യതീവ്രതാ അനുപാത കണക്കുകൂട്ടൽ
  • WCAG AA & AAA പാലിക്കൽ പരിശോധന
  • ഫൈൻ-ട്യൂണിംഗിനുള്ള HSL സ്ലൈഡറുകൾ
  • ഒന്നിലധികം പ്രിവ്യൂ ഫോർമാറ്റുകൾ

നൂതന ഉപകരണങ്ങൾ

  • യാന്ത്രിക വർണ്ണ ക്രമീകരണം
  • വാചക, പശ്ചാത്തല സാമ്പിളുകൾ
  • വർണ്ണ നാമം കണ്ടെത്തൽ
  • ഫലങ്ങൾ എക്സ്പോർട്ട് ചെയ്യുക

പതിവ് ചോദ്യങ്ങൾ

WCAG AA അനുസരണത്തിന്, സാധാരണ ടെക്സ്റ്റിന് കുറഞ്ഞത് 4.5:1 കോൺട്രാസ്റ്റ് അനുപാതം വേണം, വലിയ ടെക്സ്റ്റിന് (18pt അല്ലെങ്കിൽ 14pt ബോൾഡ്) 3:1 മതി.

WCAG AAA ഉയർന്ന കോൺട്രാസ്റ്റ് അനുപാതങ്ങൾ ആവശ്യപ്പെടുന്നു: സാധാരണ ടെക്സ്റ്റിന് 7:1, വലിയ ടെക്സ്റ്റിന് 4.5:1. AA-യ്ക്ക് യഥാക്രമം 4.5:1, 3:1 ആണ്.

നിങ്ങളുടെ ഡിസൈൻ ലക്ഷ്യം നിലനിർത്തിക്കൊണ്ട് ടെക്സ്റ്റിന്റെയോ പശ്ചാത്തലത്തിന്റെയോ നിറം ക്രമീകരിക്കാൻ ഓട്ടോമാറ്റിക് ഫിക്സ് സവിശേഷത ഉപയോഗിക്കുക, അല്ലെങ്കിൽ AA/AAA അനുസരണത്തിനുള്ള മികച്ച മേഖലകൾ ദൃശ്യ സൂചകങ്ങളോടെ കാണിക്കുന്ന HSL സ്ലൈഡറുകൾ ഉപയോഗിച്ച് സ്വമേധയാ ക്രമീകരിക്കുക.

പച്ച മേഖലകളും AA/AAA അടയാളങ്ങളും WCAG അനുസരണത്തിനുള്ള മികച്ച പരിധികൾ കാണിക്കുന്നു. ദിശാ സൂചനകൾ (കൂടുതൽ വെളിച്ചത്തിലേക്ക്/കൂടുതൽ ഇരുണ്ടതിലേക്ക്) നിങ്ങളുടെ നിലവിലെ നിറ സംയോജനത്തിന് അനുസരിച്ച് മികച്ച കോൺട്രാസ്റ്റിലേക്ക് നയിക്കുന്നു.

അതെ, ഏത് HEX നിറ കോഡും നൽകാം അല്ലെങ്കിൽ കളർ പിക്കർ ഉപയോഗിച്ച് സ്വന്തം നിറങ്ങൾ തിരഞ്ഞെടുക്കാം. URL സ്വയമേവ അപ്ഡേറ്റാകുന്നതിനാൽ പ്രത്യേക നിറ സംയോജനങ്ങൾ പങ്കിടാം.