CobaltCapture

Color contrast checker

Pick a foreground and a background color. See the contrast ratio and whether it clears WCAG AA and AAA.

Embed this tool on your site

The quick brown fox jumps over the lazy dog.

The quick brown fox.

Contrast ratio
–
Normal text AA
–
Normal text AAA
–
Large text AA
–
Large text AAA
–
UI components
–

What the WCAG thresholds mean

  • AA, normal text: contrast ratio ≥ 4.5
  • AA, large text (≥ 18pt, or ≥ 14pt bold): ≥ 3
  • AAA, normal text: ≥ 7
  • AAA, large text: ≥ 4.5
  • UI components and graphical objects (WCAG 2.1 1.4.11): ≥ 3

AA is the standard most teams target. AAA is the bar for content where accessibility is the explicit point: government, education, healthcare, anything subject to ADA or equivalent compliance.

Common places contrast breaks

Placeholder text, muted UI labels, secondary buttons, dark-mode variants of light-mode designs that did not get re-tested, and brand colors used on a light or dark variant that was not in the original palette. A pass at the swatch level still needs to be verified in context, against actual rendered text on actual rendered backgrounds. See accessibility review.

Doing a full accessibility pass?

Cobalt Capture is the cleanest way to capture accessibility findings across viewports and themes: screenshots, source URLs, dictated notes, all in one document the dev or AI agent can act on. Free.

Start capturing