Accessible Palette Generator

Generate a color palette from a base color, checked and auto-adjusted so every swatch meets WCAG contrast against a background you choose.

Overview

Accessible Palette Generator combines palette generation with WCAG contrast checking: it builds a harmony palette from your base color, checks every swatch against a background you specify, and automatically nudges any failing color toward a passing alternative while preserving its hue as much as possible. It's the same harmony engine as Palette Generator, with an accessibility check built in rather than left as a separate step.

Key Features

  • Generate a harmony palette from a base color and a background
  • Every swatch checked against WCAG AA automatically
  • Colors that fail are auto-adjusted toward a passing alternative, hue preserved
  • See exactly what changed when a color is adjusted
  • Deeplinkable via ?base= URL parameter

Common Use Cases

  • Building an accessible brand palette — Generate a full palette from a primary color that's guaranteed readable against your site's background.
  • Fixing a palette that fails an audit — Get an adjusted version of an existing palette that clears WCAG AA without changing its overall character.

How It Works
1

Enter a base color and background

Pick the color you want to build a palette from, and the background it will be used against.

2

Choose a harmony type

Pick complementary, analogous, triadic, tetradic, split-complementary, or monochromatic.

3

See the accessible result

Every swatch is shown with a pass/fail badge. Failing colors are automatically nudged toward passing, keeping their hue where possible.

Frequently Asked Questions

How does the auto-adjustment work?
A failing color's lightness is walked up or down in OKLCH — toward black or white, whichever increases contrast against your background — until it clears the target ratio, while its hue and chroma stay as close to the original as possible.

What if a color can't be adjusted enough to pass?
The closest achievable result is shown, marked as not passing, so you can see the tool didn't silently force a value it couldn't actually reach.

Does this check AAA as well as AA?
The palette is checked against AA by default. For a specific pair's exact ratio and AAA status, open it in the Color Editor or Contrast Checker.

Gerelateerde Tools

Accessible Text Color Finder Brand Palette Accessibility Checker Color Blindness Simulator Color Converter Color Editor Complementary Color Generator