Browser 106

no file limit

Inspector color/accessible-palette-generator

Accessible Palette Generator

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.

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

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

Set

Color Tools 11

Neighbours

01 Accessible Text Color Finder 02 Brand Palette Accessibility Checker 03 Color Blindness Simulator 04 Color Converter 05 Color Editor 06 Complementary Color Generator

Specification

Command: color.accessible_palette_generator
Set: Color
Input: text
Output: —
Max. bestand: no limit
Batch: single file

Runtime

Engine: native oklch
Threads: single
Isolated: —
WebGPU: —
Memory: —

Transport 0 B

The file is opened, worked on and written back inside this tab. No upload step exists in this tool — there is nowhere for the bytes to go.

Keys

Zoeken: ⌘K
Panels: ⌘1 · ⌘2
Full width: F
All keys: ⌘/

How it works

Enter a base color and background

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

Choose a harmony type

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

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

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.

Keys

Zoeken: ⌘K
Panels: ⌘1 · ⌘2
Full width: F
All keys: ⌘/

Gerelateerd · Color Tools