Normalize · calculate · review

One color pair. A ratio you can reproduce.

ContrastCheck turns two opaque hex colors into relative luminance, a raw WCAG 2.x ratio and five clearly named threshold references in your browser.

Open color contrast checker

No account, upload, CSS crawler, saved palette, remote fetch or conformance claim.

Three explicit steps

Enter, calculate, verify in context

01

Enter two hex colors

Use three or six digits for one opaque foreground and background.

02

Read ratio and luminance

The current W3C sRGB transfer and luminance weights stay deterministic.

03

Match the real content context

Decide text category, states and adjacent colors outside the pair calculator.

Focused design arithmetic

Useful when a declared color pair needs a transparent check

  • Compare a text token with a known solid surface.
  • Verify a documented design-system pair at a named threshold.
  • Reproduce a contrast result from normalized hex values.
  • Explain why two nearby gray values straddle 4.5:1.

Known endpoints and boundaries

Reproduce 21:1 and a 4.5:1 boundary

Worked examples connect exact inputs to luminance, raw ratios, conservative display and named statuses.
View examples

One opaque pair · local calculation

Check the same colors in ContrastCheck

Enter the foreground and background hex values to reproduce the raw WCAG 2.x ratio, five threshold references and a fixed preview without uploading either color.

Open ContrastCheck