🌓Min color fix to pass WCAG ratio

Min color fix to pass WCAG ratio

🌓 Failed WCAG Contrast? Find the Smallest Fix

When a WCAG contrast check fails, it's often unclear exactly how far to push the color. Overcorrect and the brand feel disappears; undercorrect and it still fails. This tool keeps the background fixed and adjusts only the foreground's lightness by the smallest amount needed to pass your target ratio.

It first calculates the relative luminance of both colors and checks whether the current ratio already meets your target (AA 4.5:1, AA large text 3:1, or AAA 7:1). If it doesn't, it keeps the foreground's hue and saturation untouched and binary-searches only the lightness, finding the exact point that clears the bar with the smallest possible color shift.

The result shows a live text preview of both the original and adjusted colors side by side, so you can see exactly how much the brand feel changes. If even pushing the foreground to pure white or pure black can't clear the target, that's a sign you'll need to adjust the background's lightness as well.

Frequently Asked Questions

Why does it only adjust the foreground? Can I change the background instead?

You can. This tool assumes you want to keep a fixed background, such as a brand color, and adjust the text instead. If adjusting the background is easier for your case, swap the two colors and run it the other way.

What if it says the fix isn't achievable?

That means even pushing the foreground all the way to pure white or pure black can't reach the target ratio. In that case, you'll need to adjust the background's lightness too.

Should I aim for AA or AAA?

Most web products treat AA (4.5:1) as the minimum bar. For services where accessibility is especially critical, like government or finance, aiming for AAA (7:1) is recommended.