Skip to content

← ToolsText & CSS

Color contrast.

HEX, RGB or HSL pairs checked against WCAG 2.2 — AA/AAA badges plus the nearest passing shade.

Client-onlyWCAG 2.2
✓ AA normal✓ AA large✓ AAA normal✓ AAA large19.31:1

Preview

Agility 28px

Body copy 15px — the quick brown fox.

mono 12px · 0123456789

WCAG 2.2 · normal ≥4.5 · large (≥24px / 19px bold) ≥3.0 · AAA ≥7.0 / 4.5.

Pairings used on this sitefor reference

🔒 Privacy — runs 100% locally

No uploads · no cookies · works offline after load. View Source if you don't believe it.

How to use.

  1. Enter any HEX, rgb() or hsl() pair — picker or typed.
  2. Read the ratio plus AA/AAA badges for normal and large text.
  3. Failing? Click the suggested shade to apply the nearest pass.

Related tools.

FAQ.

Which standard?

WCAG 2.2 contrast: 4.5 normal / 3.0 large for AA, 7.0 / 4.5 for AAA. Large means ≥24px or 19px+ bold.

Does this guarantee accessibility?

No — contrast is necessary but not sufficient. Font weight, size and context matter too.