FREE WCAG COLOR CONTRAST CHECKER

Free WCAG Color Contrast Checker

See instantly whether your text and background colors are readable under WCAG 2.2.

Your colors and results are never sent to or stored on a server.

  1. 1Enter colors
  2. 2Check contrast
  3. 3Copy result

1 · Enter colors

Choose the colors to compare

Calculated on your device

Use a color picker or enter a 3- or 6-digit HEX value.

Example pairs

2 · Check contrast

WCAG 2.2 contrast result

Contrast ratio—
  • AA normal text4.5:1 or higher—
  • AA large text3:1 or higher—
  • AAA normal text7:1 or higher—
  • AAA large text4.5:1 or higher—
  • UI components3:1 or higher—

3 · Copy result

Live color preview

Normal text preview — check whether body copy stays easy to read.

Large text previewButton example

Checks opaque solid sRGB colors only. It does not test transparency, gradients, images, or full-page conformance.

Free color accessibility guide

Check a readable pair with two colors

Calculate WCAG 2.2 contrast for free, with no account or installation.
1

Enter two colors

Add the foreground and the solid background directly behind it.

2

Review thresholds

Read separate AA and AAA results for normal text, large text, and UI.

3

Preview real use

Check text and component examples at practical sizes.

Understanding WCAG contrast

One ratio, different thresholds by use

Required contrast changes with text size and conformance level.

Normal text 4.5:1

WCAG AA requires at least 4.5:1 for normal text.

Large text 3:1

Large text passes AA from a 3:1 contrast ratio.

UI needs 3:1

Required controls and graphics need 3:1 against adjacent colors.

FREE WCAG COLOR CONTRAST CHECKER FAQ

Color contrast checker FAQ

Learn about free use, WCAG thresholds, and the limits of this check.
1Is the color contrast checker free?

Yes. It is free with no account and no usage-count limit.

2What is the difference between AA and AAA?

AAA requires stronger contrast. Normal text needs 4.5:1 for AA and 7:1 for AAA.

3What counts as large text?

WCAG large text is about 24px at regular weight or about 18.66px when bold.

4Does this result prove my whole site conforms to WCAG?

No. This tool checks one pair of opaque solid colors. You must also review actual adjacent colors, every state, images, and other accessibility requirements.