Contrast checker

Processed in this browser

Text limit: 2000000 characters

This tool never uploads your input.

A button ticket that says ‘fails contrast.’ We do the ratio. A passing pair can still fail on a photo background or thin type.

A pull request comment: “this label is 2.8:1.” This page recomputes the relative luminance ratio. WCAG 2.2 still talks in those numbers for 1.4.3 / 1.4.11-style checks. We are not an audit firm.

Pick a pixel from a screenshot with image color picker if the mock is flattened. Generating a new ramp is palette.

Buttons and body copy

A pale label on a pastel button is the usual fail. We compute a ratio for two flat colors. Text on a photo changes by pixel. WCAG-style 4.5:1 (normal text) and 3:1 (large/UI) are common targets; we do not issue a conformance report.

How to use it

  1. Enter foreground and background hex.
  2. Read the ratio against AA/AAA rows on the form.
  3. Re-check on the real page (images, overlays, 14px vs 24px).

Honest limits

Not a lawsuit shield. Not APCA-as-the-only-truth (different methods exist). Not a crawl of your site.

FAQ

AA vs AAA?

For many WCAG 2.x tasks, normal text AA is 4.5:1 and AAA is 7:1. Large text often uses 3:1 (AA) / 4.5:1 (AAA). We report math; we do not certify a page.

Does this read my whole stylesheet?

No. Two colors you type or pick.

What about placeholder or disabled text?

Those have their own debates. Do not hide essential text in 2.1:1 grey.

Alpha / overlay?

If the text sits on a semi-transparent chip, flatten to the real pixels first (eyedropper).

Is this uploaded?

No.

Related tools