പ്രവർത്തനപരം

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

പരസ്യം

Preview

Normal Text (16px)

Large Text (24px)

Contrast Ratio

21.00:1

WCAG Compliance

Normal Text

AA Pass
AAA Pass

Large Text (18pt+ or 14pt+ bold)

AA Pass
AAA Pass

UI Components & Graphics

AA Pass

WCAG Standards

Normal Text

  • AA: 4.5:1 minimum
  • AAA: 7:1 minimum

Large Text

  • AA: 3:1 minimum
  • AAA: 4.5:1 minimum

UI Components

  • AA: 3:1 minimum

Common Combinations

Black on White
White on Blue
White on Dark Gray
ഞങ്ങളുടെ വർണ്ണ കോൺട്രാസ്റ്റ് ചെക്കർ ഉപയോഗിച്ച് പരിശോധിക്കുന്നതിന് നിങ്ങളുടെ വർണ്ണ കോമ്പിനേഷനുകൾ ചുവടെ നൽകുക, അവ പ്രവേശനക്ഷമത മാനദണ്ഡങ്ങൾ പാലിക്കുന്നുണ്ടോയെന്ന് തൽക്ഷണം കാണുക.
പരസ്യം

ഞങ്ങളുടെ കളർ കോൺട്രാസ്റ്റ് ചെക്കർ എങ്ങനെ പ്രവർത്തിക്കുന്നു

RGB ഹെക്സ് മൂല്യങ്ങൾ ഉപയോഗിച്ച് നിങ്ങളുടെ ഫോർഗ്രൗണ്ട്, പശ്ചാത്തല നിറങ്ങൾ നൽകുക അല്ലെങ്കിൽ കളർ പിക്കർ ഉപയോഗിച്ച് അവ നേരിട്ട് തിരഞ്ഞെടുക്കുക.

 നിങ്ങൾക്ക് കഴിയും:

  • ഫോർഗ്രൗണ്ട് നിറം എത്ര സുതാര്യമാണെന്ന് മാറ്റാൻ ആൽഫ ക്രമീകരിക്കുക.
  • നിറം ഭാരം കുറഞ്ഞതോ ഇരുണ്ടതോ ആകുന്നതിന് ലൈറ്റ്നെസ് സ്ലൈഡർ ഉപയോഗിക്കുക.

ഞങ്ങളുടെ ഉപകരണം കോൺട്രാസ്റ്റ് അനുപാതം കണക്കാക്കുകയും WCAG മാർഗ്ഗനിർദ്ദേശങ്ങൾക്കെതിരെ പരിശോധിക്കുകയും ചെയ്യുന്നു:

  • ഡബ്ല്യുസിഎജി 2.0 ലെവൽ എഎ
  • സാധാരണ ശരീര വാചകത്തിന് ചുരുങ്ങിയത് 4.5:1
  • വലിയ വാചകത്തിന് ചുരുങ്ങിയത് 3:1
  • ഡബ്ല്യുസിഎജി 2.1 (യുഐ & ഗ്രാഫിക്സ്)
  • ഐക്കണുകൾ, ബോർഡറുകൾ, മറ്റ് ഇന്റർഫേസ് ഘടകങ്ങൾ എന്നിവയ്ക്കായി ചുരുങ്ങിയത് 3: 1
  • ഡബ്ല്യുസിഎജി ലെവൽ എഎഎ
  • സാധാരണ വാചകത്തിന് ചുരുങ്ങിയത് 7:1
  • വലിയ വാചകത്തിന് ചുരുങ്ങിയത് 4.5:1

വലിയ വാചകം അർത്ഥമാക്കുന്നത്:

  • 14 pt (ഏകദേശം 18.66 px) ബോൾഡ്, അല്ലെങ്കിൽ
  • 18 pt (ഏകദേശം px) അല്ലെങ്കിൽ അതിൽ കൂടുതലോ

നിങ്ങളുടെ സ്ക്രീനിലെ എന്തിൽ നിന്നും കൃത്യമായ നിറങ്ങൾ പിടിച്ചെടുക്കാൻ കളർ പിക്കറിലെ ഐഡ്രോപ്പർ ഉപയോഗിക്കാം. യഥാർത്ഥ ഡിസൈനുകൾ, ബട്ടണുകൾ അല്ലെങ്കിൽ പശ്ചാത്തലങ്ങൾ എന്നിവ പരീക്ഷിക്കുന്നത് ഇത് എളുപ്പമാക്കുന്നു.

നിറത്തെ മാത്രം ആശ്രയിക്കുന്ന ലിങ്കുകൾക്കായി, അവ ആക്സസ്സിബിലിറ്റി മാനദണ്ഡങ്ങൾ പാലിക്കുന്നുവെന്നും എല്ലാവർക്കും വായിക്കാൻ എളുപ്പമാണെന്നും ഉറപ്പാക്കാൻ ഞങ്ങളുടെ കളർ കോൺട്രാസ്റ്റ് ചെക്കർ ഉപയോഗിക്കുക.

 
 

API ഡോക്യുമെന്റേഷൻ ഉടൻ വരുന്നു

Documentation for this tool is being prepared. Please check back later or visit our full API documentation.