Ink·tab
←all tools

WCAG AA · AAA · UI components

Measure the ratio between two colors and see every WCAG grade at a glance.

17.06:1
contrast ratio
AA · Normal text
4.5:1
Pass
AA · Large text
3:1
Pass
AAA · Normal text
7:1
Pass
AAA · Large text
4.5:1
Pass
UI components · Graphics
3:1
Pass
Preview
Headline sample goes here
This is how body text reads at normal size. Is every word sharp and easy to track?
Everything happens in your browser. Nothing is uploaded.

When to use it

During accessibility reviews, to confirm that your text stands out clearly against the background. This tool grades the WCAG 2.1 minimums for normal text, large text, and UI components simultaneously.

How it works

Paste foreground (text) and background colors. #3a4bd0, rgb(58 75 208), and oklch(...) all work. The ratio updates as you type, and the badges below show which WCAG grades pass.

Thresholds

  • AA Normal text — 4.5:1. The baseline for body copy.
  • AA Large text — 3:1. 18pt+ or bold 14pt+.
  • AAA Normal text — 7:1. Stricter grade used in banking, health, and regulated contexts.
  • AAA Large text — 4.5:1.
  • UI components · Graphics — 3:1. Button borders, icons, and other non-text elements.

Tips

  • Treat AA Normal 4.5:1 as the baseline for body copy.
  • Hints and placeholder text that fail 3:1 disappear for users with low vision — worse than not showing them at all.
  • If you build colors in OKLCH, nudging lightness alone changes contrast dramatically.

Where do your colors go?

Color parsing and contrast math happen in your browser. Your colors are never sent or stored. Close the tab and they're gone.