Accessible color palette generator
Generate palettes that satisfy WCAG contrast targets: every scheme lists background, text and accent colors with their ratios and AA/AAA levels, exportable as CSS variables or plain text.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Generation settings
Colors come from the browser cryptographic RNG each run, so they vary — but every scheme meets the target contrast.
Palette
Ratios follow WCAG 2.x: sRGB channels are linearized, weighted into relative luminance, and compared as (Llight + 0.05) / (Ldark + 0.05). The accent keeps at least 3:1 against the background (§1.4.11 UI components).
Press "Generate again" to build a palette.
What this tool does
- Starting a new project: generate candidate palettes at your target contrast (4.5:1 or 7:1 for body text) and pick one you like.
- When an existing brand color fails contrast, reverse-engineer a background, text and accent trio that all pass instead of tweaking colors by hand.
- Need light and dark themes at once? Set the background to "Mixed" and get schemes for both in a single run.
- Copy the result as CSS variables or a plain-text list straight into your stylesheet or design doc.
Example
Input
Schemes 1, target contrast 4.5:1, background "Light", random source fixed at 0 (the deterministic input used by the unit tests)
Output
Scheme 1: background #F0EAEA (HSL 0°, 18%, 93%), text #000000 at 17.66:1 (AAA); accent #862727 with #FFFFFF text at 9.00:1 (AAA); accent against background 7.57:1.
On the page the hues come from the browser cryptographic RNG, so every "Generate again" differs; this is the deterministic output for a fixed random source, which is what the unit tests pin down.
Frequently asked questions
Do the generated colors really pass?
Yes. Each scheme builds a background first, then takes whichever of pure white or pure black scores higher against it, and if that is still short of the target the background lightness is pushed in the same direction until it just passes. The accent also meets the target against its own text and keeps at least 3:1 against the background (WCAG 2.2 §1.4.11 for UI components).
Why is the text always pure black or pure white?
The two ends of the lightness range cover the widest contrast span and never introduce a color cast. If you want tinted text, take the generated values into the contrast checker and use its fix suggestion to nudge the lightness.
What happens at a 21:1 target?
21:1 is the theoretical maximum and only pure black on pure white reaches it, so the background is pushed to #FFFFFF with #000000 text. The higher the target, the fewer schemes exist and the more extreme the colors get.
Is the palette random? Can I get the same one twice?
Hue, saturation and lightness all come from crypto.getRandomValues, so results differ between runs and are not guaranteed to repeat. Press "Generate again" until you like a set, then copy it to keep it.
Can I use the exported CSS variables as-is?
Yes. Each scheme emits four variables named --uk-pair-<n>-bg, -text, -accent and -accent-text inside a palette { } block — rename the selector to whatever you need.
Keywords：accessible palettewcag color generatorcontrast palettecolor scheme generatoraa aaa colors无障碍配色配色方案生成对比度达标WCAG 配色CSS 变量