Accessible color finder
Choose a background and a text color you like but that fails contrast. The finder changes only the lightness, in OKLCH, until the WCAG ratio is reached, so the hue stays and the change is as small as possible.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Enter the background color and the text color.
- Choose the target: AA or AAA, normal or large text.
- Copy the closest accessible color, or the lighter or darker option.
How it works
The contrast ratio is (L1 + 0.05) ÷ (L2 + 0.05), where L1 and L2 are the WCAG relative luminances of the lighter and the darker color. If your text color fails, the tool tests colors with the same OKLCH hue and chroma and a different lightness, one step of 0.1 at a time in both directions, checks each rounded HEX code against the background and returns the first that passes. Chroma is lowered only when a color would not fit in sRGB.
Example
Grey #777777 on white has a contrast of 4.47:1, just short of AA (4.5:1). The closest darker color is #767676 at 4.54:1. For AAA (7:1) it is #595959 at 7.00:1.
Tips
- Large headings need less contrast (3:1 at AA) than body text.
- Change the text color rather than the background when the background is part of a brand palette.
- WCAG 2 contrast does not cover everything: also check size, weight and the real appearance on screen.
Frequently asked questions
How is the closest color found?
The tool keeps the hue and chroma of your text color and moves OKLCH lightness in steps of 0.1 (on a 0–100 scale), lighter and darker, until the contrast reaches the target. The option with the smaller change is shown as the closest.
What contrast ratios does WCAG require?
WCAG 2.x asks for at least 4.5:1 for normal text and 3:1 for large text at level AA, and 7:1 and 4.5:1 at level AAA. Large text means about 18 pt (24 px) or 14 pt (18.7 px) bold and above.
Why are some results not available?
On a mid-tone background neither a lighter nor a darker color may be able to reach a high ratio. For example, 7:1 is out of reach on #777777 even with black or white.
Is the displayed ratio exact?
The ratio is calculated from the HEX code shown, after rounding, and is shown rounded down to two decimals. A result that is shown as 4.54:1 is really at least 4.54.