Color Tools
Color Palette GeneratorImage Color ExtractorColor Contrast CheckerColor Blindness SimulatorColor Shade / Tint GeneratorColor MixerView all 9

Color Contrast Checker

Check WCAG contrast for one color pair, or every combination in a full palette at once.

Runs in your browserNo sign-up required
14.05:1

The quick brown fox jumps over the lazy dog.

AA — Normal text
Pass
AA — Large text
Pass
AAA — Normal text
Pass
AAA — Large text
Pass

Check One Pair, or an Entire Palette

Checking contrast one pair at a time is fine for a single button, but a real design system has many colors that might get combined — checking each pair manually doesn't scale. This tool covers both: a single-pair mode with a live text preview, and a palette matrix mode that checks every pairwise combination in a color list at once, color-coded so failing combinations are obvious immediately.

How to Use This Tool

  1. 1Choose Single Pair or Palette MatrixOne text/background combination, or every combination across a full list of colors.
  2. 2Enter your colorsBy color picker or typed hex code.
  3. 3Read the contrast ratio and pass/fail badgesAgainst all four WCAG thresholds — AA and AAA, for normal and large text.
  4. 4For a palette, scan the full matrixEvery pair is checked at once, so you don't have to test combinations one at a time.

Understanding WCAG Contrast Levels

  1. 1AA is the standard most legal and practical guidelines requireA contrast ratio of at least 4.5:1 for normal text, or 3:1 for large text (18pt+, or 14pt+ bold) — this is the level most accessibility audits and legal requirements (like ADA-related web guidelines) check against.
  2. 2AAA is a stricter, "enhanced" levelRequires 7:1 for normal text and 4.5:1 for large text — not legally required in most contexts, but recommended where readability matters most, like content aimed at users with low vision.
  3. 3The ratio only measures contrast, not color choice itselfTwo colors can pass WCAG contrast while still being a poor combination for someone with color blindness — pair this checker with the Color Blindness Simulator for a fuller picture.

Frequently Asked Questions

What contrast ratio do I actually need?

For most body text, aim for at least 4.5:1 (WCAG AA). For large headings (18pt+ or 14pt+ bold), 3:1 is the minimum. If you want to go beyond the standard requirement, 7:1 (AAA) is the stricter recommended level.

How is the contrast ratio actually calculated?

Using the official WCAG formula: each color's relative luminance is calculated from its RGB values, and the ratio between the lighter and darker luminance (plus a small offset) gives the final contrast ratio, from 1:1 (identical) to 21:1 (pure black on pure white).

What does the Palette Matrix mode actually check?

It computes the contrast ratio between every possible pair of colors in your list at once, color-coding each cell so you can immediately spot which combinations are safe to use together for text versus which aren't.

Does passing WCAG contrast guarantee my design is accessible?

It's one important factor, not the whole picture — color blindness, font size, font weight, and surrounding visual clutter all affect real-world readability too. Pairing this with the Color Blindness Simulator gives a more complete check.

Is my color data sent anywhere?

No — every calculation happens locally in your browser. Nothing you enter here is transmitted anywhere.

Is this contrast checker free to use?

Yes, completely free, with no sign-up and no limit on how many checks you run.