Find WCAG-Compliant Foreground Colors

Find WCAG-compliant foreground colors on a fixed background

WCAG 2.x contrast uses relative luminance and a contrast ratio between foreground text and background. Normal text typically needs at least 4.5:1 for level AA and 7:1 for level AAA. Large text (18 pt regular or 14 pt bold) can use 3:1 for AA. When you already chose a brand background, this tool searches for the nearest lighter or darker foreground that meets your target ratio.

How the search works

Lock the background hex color you must keep.
Enter a starting foreground color (often a gray that fails AA).
Pick a target ratio (4.5:1 for AA body text, 3:1 for large text).
Copy the suggested lighter or darker hex that first satisfies the target.

For side-by-side ratio checks on any two colors, use the Color Contrast Checker.

Frequently Asked Questions

Why might “no solution” appear?

If the background is very light, a lighter foreground cannot increase contrast. If the background is very dark, a darker foreground may not reach the target either. Try the opposite direction or adjust the background slightly.

Does this guarantee brand hue?

The search adjusts lightness in HSL space while holding hue and saturation. Small hue shifts can still occur after rounding to 8-bit RGB channels.

Is this the same formula browsers use?

Yes. Relative luminance follows WCAG 2.x sRGB gamma correction, matching common accessibility audit tools.

Report

WCAG Contrast Pair Finder