BYTETOOLS

Accessible Color Finder

Find the nearest colour that passes WCAG contrast by adjusting only OKLCH lightness, so your brand hue survives while the text becomes readable.

Foreground
Background

Starting point

#7dd3fc
Foreground #7dd3fc
#ffffff
Background #ffffff
1.67:1
Current contrast
4.5:1
Target

Nearest passing colour

The quick brown fox jumps over the lazy dog — this is #227fa5 on #ffffff.

#7dd3fc
Was #7dd3fc
#227fa5
Now #227fa5
4.52:1
New contrast
26.5 pts darker
Lightness moved
ΔE₀₀ 25.40
Perceptual shift
AA normal text (4.5:1)Pass
AA large text (3:1)Pass
AAA normal text (7:1)Fail
UI components (3:1)Pass

Hue was held at 230.3° and chroma at 0.1013, so only the lightness changed — the colour stays recognisably the same family. Original OKLCH lightness was 82.8%, the suggestion sits at 56.3%.

What is the Accessible Color Finder?

The usual advice when a colour fails contrast is to darken it, which too often means someone guesses at a new hex and the brand drifts.

  • Holds hue and chroma constant so the brand colour survives
  • Binary-searches OKLCH lightness to the exact WCAG threshold
  • Reports the perceptual size of the change as ΔE₀₀
  • Force the result darker or lighter, or minimise the move
  • Live preview plus AA, AAA and UI-component pass badges
  • Says clearly when no colour on that hue can reach the target

How to use the Accessible Color Finder

  1. 1

    Enter the foreground colour that is failing and the background it sits on.

  2. 2

    Choose your target: 3:1 for large text and UI, 4.5:1 for AA body text, or 7:1 for AAA.

  3. 3

    Pick a direction, or leave it on whichever moves least.

  4. 4

    Check the suggested colour in the live text preview, then copy its hex value.

About the Accessible Color Finder

The usual advice when a colour fails contrast is to darken it, which too often means someone guesses at a new hex and the brand drifts. This tool does the adjustment properly: it converts your foreground to OKLCH, pins hue and chroma exactly where they are, and binary-searches the lightness axis until the WCAG 2.1 contrast ratio against your background hits the target.

Because only lightness moves, the result stays recognisably the same colour. The tool reports how far it had to travel in lightness and the perceptual size of that shift as a ΔE₀₀ figure, so you can tell your design lead whether the change is cosmetic or significant.

You can force the search darker or lighter, or let it pick whichever direction moves least. When no colour on that hue can reach your target — which happens against mid-grey backgrounds — it says so plainly instead of returning something that quietly fails. All of it runs locally in your browser.

Frequently asked questions

How do I fix a color that fails WCAG contrast?

Change its lightness rather than its hue. Pushing a colour darker against a light background, or lighter against a dark one, raises the contrast ratio while keeping it recognisable. This tool finds the smallest such change automatically.

Why adjust lightness in OKLCH instead of HSL?

HSL lightness is not perceptual, so a fixed step changes yellows and blues by wildly different visual amounts and often drags the apparent hue with it. OKLCH lightness matches perception, so the search converges on a colour that still looks like your original.

What contrast ratio do I actually need?

WCAG 2.1 AA requires 4.5:1 for normal body text and 3:1 for large text (18.66px bold or 24px regular) as well as for UI components and meaningful graphics. AAA raises normal text to 7:1. Most teams target AA.

Why does the tool say no color can reach my target?

Because your background sits too close to mid-grey. A middle grey is at most about 5.3:1 from pure white and 4:1 from pure black, so a 7:1 target is simply unreachable against it no matter what foreground you choose. Change the background instead.

Will the suggested color still match my brand?

It keeps the exact hue and chroma, so it stays in the same family. Use the ΔE₀₀ figure to judge: under about 5 and most people would call it the same colour, above 10 and it reads as a deliberate variant worth signing off.

Related tools