WCAG contrast checker

Client

Enter a text color and a surface color (HEX, rgb(), hsl(), or a CSS keyword). See the contrast ratio and whether it meets common WCAG thresholds—all in your browser.

Contrast

?
Paste CSS colors for text (foreground) and surface (background). Semi-transparent colors are composited over white for the check. Ratios follow WCAG 2.x contrast for sRGB.
Picker
Picker

Sample heading

Body text at default size should meet 4.5:1 for WCAG AA (normal) or 3:1 for large text (roughly 18px+ or 14px+ bold).

Contrast ratio

16.97 : 1

CriterionMin ratioResult
AA — normal text4.5:1Pass
AA — large text3:1Pass
AAA — normal text7:1Pass
AAA — large text4.5:1Pass

Copy summary:

Common use cases

  • Verify body copy and headings on marketing pages against brand background colors before hand-off.
  • Check placeholder or disabled-state grays so small UI text still clears WCAG AA where your product requires it.
  • Compare two candidate palettes by pasting foreground and surface pairs—faster than guessing from swatches alone.

Common mistakes to avoid

  • Ignoring “large text” thresholds

    WCAG allows slightly lower contrast for large or bold text. Use the size that matches your real typography, not an arbitrary default.

  • Testing only HEX when production uses gradients or images

    This tool evaluates solid CSS colors. Photos, noise, or gradients behind text need a separate visual review.

FAQ

Are my colors sent to Toolcore?

No. Contrast is computed in your browser from the values you enter.

What do AA and AAA mean here?

They refer to common WCAG 2.x contrast minimums for normal and large text. AAA is stricter than AA; not every design goal requires AAA for every string.

Does passing here guarantee legal compliance?

It helps catch ratio issues early. Accessibility also depends on focus states, motion, structure, and more—use this as one signal, not the whole audit.

More tools

Related utilities you can open in another tab—mostly client-side.