Accessible color adjuster

Keep the color, fix the contrast

A brand color often looks great as a logo but fails as body text: a pastel pink or a light gold can be beautiful on a white background and still be nearly unreadable at normal text size. Rather than picking a completely different color by trial and error, this tool nudges your color's lightness up or down, just enough to pass the contrast ratio you need, while keeping its hue as close to the original as possible.

The three targets

• 3:1 is the WCAG AA minimum for large text (24px and up, or 18.66px bold) and for the visible parts of UI components such as input borders and icons.
• 4.5:1 is the AA minimum for normal body text, the level most accessibility audits check first.
• 7:1 is the AAA level, a stricter bar recommended for content aimed at low-vision readers or where legibility matters most.

How the adjustment works

The tool keeps your color's hue and saturation and searches for the lightness value that reaches the target contrast against your chosen background, moving toward black if the background is light and toward white if the background is dark. If your color already passes, nothing changes. The result is a real color you can use directly, not just a pass or fail message.

What to do with the result

Use the adjusted color for text or an icon on that background, and keep the original for places that do not need to pass contrast, such as a large decorative shape or a logo. If the adjusted color has drifted further than you like, try a lower contrast target if your use case allows it, for example large text at 3:1 instead of 4.5:1, or start from a color with more contrast headroom.

Limits

This adjusts lightness only; it does not change hue or saturation, so an extremely light or saturated starting color may need a large shift to pass. To measure the contrast of two colors you already have, use the contrast checker. Everything is calculated in your browser.