Skip to content
ToolQivo

Accessible Color Generator

Nudge a colour until it passes WCAG, keeping its hue.

Color Tools Reviews Free · no sign-up

The colour to fix

Accessible colour 
The fixed colour appears here

Quick Tool Overview

The Accessible Color Generator takes a colour that fails WCAG and walks its lightness in OKLCH until it passes, holding hue and chroma — so the result is still recognisably your brand colour rather than a generic dark grey.

What it does
Finds the nearest passing version of a colour
You give it
A failing colour, its background and a target level
You get back
The nearest accessible colour, lighter and darker
Best for
Making brand palettes pass without losing the brand
Color Tools Free, unlimited use No sign-up Runs in your browser

About the Accessible Color Generator

Brand colours are chosen for how they look, not for how they score, and the usual result is a palette where the primary blue is a few points short of 4.5:1 on white. Replacing it with a generic dark grey solves the audit and ruins the brand.

This generator does the smaller thing instead. It holds your hue and saturation and walks the lightness in OKLCH — a perceptual space, so the steps are even — until the colour clears the target you set, then stops at the first value that passes. The result is recognisably the colour you started with, just light or dark enough to read.

Both directions are offered, because sometimes the accessible version of a colour is darker and sometimes lighter, and which one suits a design is a judgement the tool should not make for you. A full ramp of passing shades is shown alongside so you can see how much room the hue has.

Key features of the Accessible Color Generator

Hue is preserved exactly

Only lightness moves, so the fixed colour belongs to the same family as the one you started with.

Perceptual steps

The search runs in OKLCH, where equal steps look equal, so it finds the nearest passing colour rather than the nearest number.

Both directions

Darker and lighter candidates are offered, because which one suits a layout is not a decision a tool should make.

A full accessible ramp

Every shade of your hue that passes the target, so you can see how much room it has.

Any target level

AA body text, AA large text or AAA, against any background rather than assuming white.

How to use the Accessible Color Generator

  1. 1

    Enter the colour that fails

    Usually a brand colour, and the background it sits on.

  2. 2

    Choose the target

    AA body text at 4.5:1, AA large at 3:1, or AAA at 7:1.

  3. 3

    Pick a direction

    Darker or lighter — the tool gives the nearest passing colour either way.

  4. 4

    Copy the fixed colour

    Take the HEX, or copy the whole ramp of accessible shades.

Frequently asked questions

Contrast is a function of relative luminance, and lightness is what moves luminance most directly. Changing saturation shifts the colour much further from the original for far less contrast gained.

Reviews of the Accessible Color Generator

What people who use the Accessible Color Generator think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the Accessible Color Generator. It takes half a minute and no account.

Write the first review

More color tools