Contrast Checker

WCAG accessibility guidelines set specific minimum contrast ratios between text and background color, not a vague "make sure it's readable" suggestion, but an actual number (4.5:1 for normal text, 3:1 for large text, at the AA level) that a page either passes or fails. This tool calculates the exact ratio for any two colors and tells you which WCAG level it clears.

Large Text Preview

Normal text preview — the quick brown fox jumps over the lazy dog.

Small text looks like this at 14px.

13.98:1
Contrast Ratio
AA NormalPass
AA LargePass
AAA NormalPass
AAA LargePass

WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold+). AAA requires 7:1 for normal text and 4.5:1 for large text.

How to use the Contrast Checker

  1. Enter or pick a foreground (text) color using the color input or HEX field.
  2. Enter or pick a background color the same way.
  3. View the contrast ratio and pass/fail results for WCAG AA and AAA at normal and large text sizes.
  4. Adjust your colors until all required levels pass, using the live preview as a guide.

AA vs. AAA, and why AA is usually the right target

WCAG AA is the level most legal accessibility requirements (like the ADA in the US, in practice) reference, and it's what most real audits check against. AAA is stricter (7:1 for normal text) and is genuinely difficult to hit with many brand color palettes without changing the actual brand colors. Most production sites, including many run by companies with serious accessibility investment, target AA rather than AAA for this reason. If a color combination fails AA, the fix is almost always to darken the lighter color or lighten the darker one slightly, not to redesign the whole palette.

Frequently asked questions

What contrast ratio do I need to pass?

4.5:1 for normal-sized text and 3:1 for large text (18pt+ or 14pt+ bold) to meet WCAG AA, the most commonly required standard.

Does this check apply to background images too, or just solid colors?

This tool checks two flat colors; text over a background image needs a different approach (like a semi-transparent overlay) since the contrast varies across the image and can't be reduced to a single ratio.

My brand color fails the contrast check. What should I do?

Keep the brand color for large elements like logos and buttons where contrast rules are more lenient, but adjust it slightly darker or lighter specifically for body text use, which carries the strictest requirement.

Related Guides

WCAG Contrast Ratios: What AA and AAA Actually Require

A practical guide to WCAG contrast ratio requirements, including AA and AAA thresholds, real color examples, and common mistakes designers make.

Related Tools

Color Converter

Convert colors between HEX, RGB, and HSL with a live preview.

Color Palette Generator

Generate complementary, analogous, triadic, and custom color palettes from any base color.

CSS Gradient Generator

Build beautiful CSS gradients visually with color stops, angles, and one-click copy.

Image Color Picker

Upload an image and pick any color from it — get HEX, RGB, and HSL values instantly.