MiniDev UI

WCAG color contrast checker

Check text and background contrast against WCAG 2.2 AA and AAA for normal text, large text and UI parts. Get the closest passing color in one click. Free.

Preview

The quick brown fox

Body text at 15px. If this is hard to read, most people on a phone in sunlight will not read it at all.

Small print at 12px, where low contrast hurts most.

Outlined button

Contrast ratio

4.83:1

  • Normal text (AA, 4.5:1)Pass
  • Normal text (AAA, 7:1)Fail
  • Large text (24px, or 18.66px bold) (AA, 3:1)Pass
  • Large text (AAA, 4.5:1)Pass
  • UI components and graphics (AA, 3:1)Pass

How to use it

  1. 1Enter a text color and a background in any format.
  2. 2Read the ratio and the pass or fail for each WCAG level.
  3. 3If it fails, click the suggested color to adopt the nearest passing shade.

The WCAG thresholds

  • 4.5:1 for normal text (AA).
  • 3:1 for large text, meaning 24px regular or 18.66px bold, and for UI components and graphical objects such as input borders and icons (AA).
  • 7:1 for normal text and 4.5:1 for large text at AAA.

Contrast is computed from relative luminance, so it depends only on the two colors, not on font rendering. Treat the numbers as a floor: thin weights and small sizes need more than the minimum to be comfortable.

How the fix works

When a pair fails, the tool keeps your hue and chroma and moves lightness in OKLCH, darker on light backgrounds and lighter on dark ones, until the pair reaches 4.5:1. Because OKLCH is perceptual, the suggestion still looks like your color, just firmer.

MiniDev UI's text tokens are tuned for this: fg-muted clears 7:1 and fg-subtle clears 4.5:1 on the page background in light and dark. See WCAG contrast.

Frequently asked questions

What contrast ratio do I need?

At least 4.5:1 for body text and 3:1 for large text and interface parts to meet WCAG 2.2 AA, which most accessibility laws reference.

Does contrast apply to placeholder text?

Yes. Placeholder text is text, so it needs 4.5:1. Many default placeholder grays fail.

What about APCA?

APCA is a newer contrast model proposed for future WCAG versions. WCAG 2.2 ratios remain the legal and practical baseline today.