What is a good contrast ratio for text?

4.5:1 or higher for normal text and 3:1 for large text meets WCAG AA, the level most laws and standards reference. 7:1 meets AAA for normal text, worth it for long-form reading. The checker reports your pair against all four thresholds.

How do I fix a failing color without losing my brand?

Adjust lightness, not hue: the fixer converts your color to OKLCH and walks lightness until the pair passes, leaving hue and chroma untouched, so the result still reads as your color rather than a gray substitute.

What counts as large text for the 3:1 rule?

24px and up at normal weight, or 18.5px and up at bold. Anything smaller is normal text and needs 4.5:1 for AA. When a design mixes sizes, check the smallest text that uses the pair.

Does passing WCAG mean everyone can read it?

It means most people can: the ratios are calibrated to typical vision plus common low-vision needs. Thin font weights and red-green hue pairs can still cause trouble at passing ratios, which is why the live preview renders your real colors at real sizes.

Contrast checker that fixes colors

Most checkers only tell you that you failed. This one suggests the nearest passing version of your color, one click away.

How this works

1 Set your text color and your background color.
2 Read the ratio and the AA and AAA verdicts.
3 If it fails, click a suggested fix to apply the nearest passing color.

Text color

Background color

2.65:1

AA text FAILAAA text FAILAA large FAILAAA large FAIL

Make it pass AA: keep the hue, shift the lightness:

Click a suggestion to apply it as the text color.

Guide

What the WCAG numbers actually mean

The ratio compares the relative luminance of your two colors, from 1:1 (identical) to 21:1 (black on white). AA requires 4.5:1 for normal text and 3:1 for large text (24px+, or 18.5px+ bold). AAA raises that to 7:1 and 4.5:1 respectively. AA is the legal bar in most jurisdictions and the minimum you should ship; AAA is worth it for body text people read for minutes at a time.

How the fixer works: we convert your text color to OKLCH, a color space where lightness is perceptually uniform, then walk its lightness up and down until the ratio passes, leaving hue and chroma untouched. The result passes WCAG but still reads as your color, which matters when the failing color is a brand color you can't swap for gray.

Two things checkers can't see: thin font weights fail in practice at ratios that pass on paper, and color-blind users may struggle with hue pairs (red/green) that have fine contrast numbers. When in doubt, test with real text at real size. The live preview above uses your actual colors for exactly that reason.

FAQ

Common questions

What is a good contrast ratio for text?: 4.5:1 or higher for normal text and 3:1 for large text meets WCAG AA, the level most laws and standards reference. 7:1 meets AAA for normal text, worth it for long-form reading. The checker reports your pair against all four thresholds.
How do I fix a failing color without losing my brand?: Adjust lightness, not hue: the fixer converts your color to OKLCH and walks lightness until the pair passes, leaving hue and chroma untouched, so the result still reads as your color rather than a gray substitute.
What counts as large text for the 3:1 rule?: 24px and up at normal weight, or 18.5px and up at bold. Anything smaller is normal text and needs 4.5:1 for AA. When a design mixes sizes, check the smallest text that uses the pair.
Does passing WCAG mean everyone can read it?: It means most people can: the ratios are calibrated to typical vision plus common low-vision needs. Thin font weights and red-green hue pairs can still cause trouble at passing ratios, which is why the live preview renders your real colors at real sizes.