Skip to main content

Color Contrast Checker

Developer Tools

WCAG AA/AAA ratios via relative luminance

Quick Answer

Color Contrast Checker: WCAG AA/AAA ratios via relative luminance. Color Contrast Checker uses standard developer formulas to compute accurate results instantly.

Sample text 正文示例
Large heading 大字标题
Contrast ratio
7.00:1
AAA
AA 正文 4.5:1
PASS
AA 大字 3:1
PASS
AAA 正文 7:1
PASS
AAA 大字 4.5:1
PASS

Contrast position

Fail
AA large only
AA
AAA

7.00:1 — AAA

WCAG 2.1 thresholds

LevelNormal textLarge textYour result
AA≥ 4.5:1≥ 3:1PASS
AAA≥ 7:1≥ 4.5:1PASS

Large text = ≥18pt (24px) or ≥14pt (18.7px) bold. Non-text UI (focus rings, control borders) needs 3:1.

Calculation steps

  1. 1Relative luminance: fg = 0.0999, bg = 1.0000 (sRGB → linear → 0.2126R+0.7152G+0.0722B)
  2. 2Contrast = (L_lighter + 0.05) / (L_darker + 0.05) = 7.00:1
  3. 3WCAG 2.1: AA needs 4.5:1 (normal) / 3:1 (large ≥18pt or 14pt bold); AAA needs 7:1 / 4.5:1.
About 8% of men have red-green color vision deficiency — never convey meaning by color alone; pair with icons/text. Contrast requirements apply to UI component boundaries too (WCAG 1.4.11, 3:1 for focus indicators and control edges).

Was this tool helpful?

How to Use

  1. Paste or type content: drop code/text into the Color Contrast Checker or fill the parameters.
  2. Choose mode/options: switch format, rules or processing as needed.
  3. Live output: results appear instantly — nothing is submitted, data stays in your browser.
  4. One-click copy: copy the output straight into your development environment.

Key Points

  • Color Contrast Checker is a free online developer tool — open and use, no sign-up.
  • All calculations run locally in your browser; your data never leaves the device.
  • Key capability: WCAG AA/AAA ratios via relative luminance.
  • Results come with formulas and reference tables so you can verify every number.

Formula & How It Works

Color Contrast Checker formula

Color Contrast Checker uses standard developer formulas to compute accurate results instantly.

FAQ

How do I use the Color Contrast Checker?
Open the page and fill in the input fields — results update automatically. WCAG AA/AAA ratios via relative luminance.
Are the results accurate?
Yes. Standard formulas and conversion factors are used and verified.
Is it free? Do I need to sign up?
Completely free. No registration, login or download required.
Does it work on mobile?
Yes. The responsive design works on phones, tablets and desktops.
Is my data saved?
No. Everything runs locally in your browser.

Related Tools

Related Guides

Source & Updates

Based on RFC 4648, ECMA-262 and related specifications. Last updated: 2025-07

Last updated:

Formulas and content on this page are reviewed by the YiJianSuan team. For reference only — official sources prevail.

Maintained and periodically reviewed by the YiJianSuan editorial team — review process in ourEditorial Policy.

Cite this page: YiJianSuan. Color Contrast Checker[EB/OL]. https://www.yijiansuan.com/en/c/dev/contrast-check

Results provided by this tool are for reference only and do not constitute professional advice.