How does this preserve brand identity?

Most accessibility fixers just suggest dark gray or black. This tool moves only the lightness channel — your indigo stays an indigo, just a lighter or darker indigo that passes contrast.

Defaults to AA (4.5:1) for body text. Toggle to AAA (7:1) when designing for high-accessibility-required products (government, healthcare, education).

What if I need to keep the foreground fixed instead?

Toggle the lock — the tool then walks the background to match. Useful when brand text color is unalterable and you have control of the canvas color (button labels, hero copy).

wcag · suggester · same-hue · iterative · live

Suggest an accessible foreground

Given a foreground and background, we walk lightness until contrast hits the WCAG target — preserving hue and saturation.

Accessible Color Suggester

Foreground

#3B82F6

input

Background

#FFFFFF

fixed

Target

4.5:1

Result

4.52:1

found

input · color

Foreground HEX

Background HEX

output · preview

Original

#3b82f6

3.68:1

Suggested

#1e6ff5

4.52:1

✓ Found accessible variant.

Quick Start

How to suggest an accessible color

Lock the background, walk the foreground's lightness in HSL until WCAG target met.

01
Set inputs
The foreground color you'd like to use and the background it sits on.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
inputOKLCHCSS Color 4perceptuallive
fg/bg · colorhex · sRGB
```
#3b82f6 / #fff
```
loaded · normalisedOKLCH · ready
02
Pick a target
3:1 for large text, 4.5:1 for AA normal, 7:1 for AAA.
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
targethex · rgb · hslP3gamut-mappedlive
target · options4.5:1 · live
```
AA Normal
```
options applied · livelive
03
Get suggestion
We darken/lighten while preserving hue and saturation.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
walkWCAG 2.2APCAAA · AAAcontrast
walk · convertedlive · ready
```
#1d4ed8
```
converted · liveWCAG-aware
04
Use it
If the target is unreachable, try a different hue.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
shipclipboardCSS varspalette JSONblob
ok · copiedready · done
```
✓ Copied
```
shipped · ready to shipsuccess

Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Use Cases

When to use an accessible suggester

A11y fixes, brand-friendly variants, design reviews.

A11y fixes

Repair a barely-failing contrast without redesign. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Brand-safe

Stay on-hue while gaining contrast — preserve identity. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Design review

Suggest accessible alternates inline during reviews. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Token derivation

Generate accessible tokens for varied surfaces. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Rapid iteration

Avoid manual lightness tweaks. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Cross-tool

Apply the suggestion in your design tool of choice. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token

FAQ

Frequently asked questions

Does it change hue?

No — only lightness. Hue and saturation are preserved.

What if the target is unreachable?

We return the best-effort and warn — try a different hue (e.g. shift to a more contrasting color).

Which WCAG version is this?

WCAG 2.x — the 4.5:1 / 3:1 / 7:1 thresholds. See APCA Checker for WCAG 3.

Can I adjust the background instead?

Currently we walk the foreground. For palette-wide testing, see the WCAG Pair Tester.

Is anything sent to a server?

No — calculation runs entirely in your browser.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!