Contrast Ratio Fixer
Take a colour that fails contrast and find the nearest passing version, adjusting lightness in OKLCH so the hue and chroma stay as close to the original as possible.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
The usual fix destroys the colour
Faced with a brand colour that fails contrast, the common response is to darken it until the checker turns green, usually by dragging an HSL lightness slider. That shifts the apparent hue as it goes, so the result no longer matches the brand and the change is visible next to any existing use of the original. Adjusting lightness in OKLCH keeps hue and chroma fixed, so the fixed colour is recognisably the same colour, just lighter or darker.
Search for the nearest passing value, not the safest one
There is a smallest adjustment that reaches the threshold, and anything beyond it changes the design more than necessary. Finding it takes a binary search over lightness, which is instant, and it produces a colour that passes by the narrowest honest margin. Whether you want that margin or some headroom is a judgement, and both are shown here so the choice is explicit.
Sometimes the background is the thing to change
A brand colour that must stay exactly as it is can still be used on a different background. Adjusting the background is frequently the better fix, because backgrounds are usually neutral and a small change to them is invisible, while the same change to a brand colour is not. Both directions are offered here, and the one that moves the design least is usually the right one.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
Why adjust in OKLCH rather than HSL?
Because HSL lightness changes apparent hue as it moves, so the fixed colour no longer matches the original and the difference shows next to any existing use of it. OKLCH holds hue and chroma fixed, so only the lightness changes.
Should I aim for the minimum passing value?
It depends on how settled the design is. The minimum changes the colour least; a little headroom survives later tweaks to either colour. A pair passing at exactly 4.5:1 fails if anything moves at all.
Is it better to change the foreground or the background?
Usually the background, when it is a neutral. A small lightness change to a grey surface is invisible, while the same change to a brand colour is not. The tool offers both so you can pick whichever moves the design less.
What if no adjustment reaches the target?
That happens when the required ratio is impossible at any lightness for that hue and chroma against that background, which is common for vivid mid-tones against mid-greys. Reducing chroma as well, or changing the background, is then the only route.
Does this apply to large text differently?
Yes. Large text needs only 3:1, so a colour failing for body text can be perfectly acceptable in a heading. Choosing the right threshold before adjusting avoids changing a colour that never needed changing.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Enter a foreground and background colour to find the nearest version that passes.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.