Gezidao

Contrast Checker

Check text/background color contrast against WCAG AA and AAA.

Aa 示例
— Contrast ratio

Report an issue

Advertisement

AHow to use

  1. 01 Pick the text color and the background color.
  2. 02 See the contrast ratio and the AA/AAA pass or fail badges.
  3. 03 Adjust colors until the accessibility bar turns green.

QFAQ

What contrast ratio do I need? ＋

WCAG 2.1 requires at least 4.5:1 for normal text and 3:1 for large text at level AA; level AAA raises those to 7:1 and 4.5:1.

Why does accessibility contrast matter? ＋

About 8% of men have some form of color vision deficiency, and low-contrast text is hard for everyone in sunlight. Good contrast is the cheapest accessibility win.

→Related tools

→ Color Converter Convert colors between HEX, RGB and HSL with a shade palette. → Gradient Generator Design CSS linear gradients visually and copy the code. → Age Calculator Calculate an exact age in years, months and days — plus the next birthday. → Base64 Encoder & Decoder Encode or decode Base64 text, with full UTF-8 support.