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.

WCAG ratios, text size, and non-text content

Contrast ratio compares relative luminance of foreground and background. WCAG defines stricter minimums for normal-sized text than for large text (roughly 18pt regular or 14pt bold and above). Use the controls here to match the typography you actually ship.

Solid fills are easy to score; gradients, images, or video behind text need a separate visual review. If you only have one color so far, start with accessible color suggest for mix-based candidates, then fine-tune with the color converter and keep brand palettes consistent across components.

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.