Accessible Color Palette Generator

For each evenly spaced hue, it walks lightness toward the extreme that gains contrast on your background, testing several saturation levels along the way. It verifies the final rounded hex value, not a floating point color, so the published ratio holds exactly.

Press the AA button when the colors will render normal-size text, since that returns aa compliant colors for body copy. Use 7:1 for AAA text, and 3:1 when the colors fill chart segments, icons, large headlines, or component borders.

Mid-tone backgrounds can make high ratios mathematically unreachable. On #808080, pure black only manages about 5.3:1 and pure white about 3.9:1, so a 7:1 request has no possible answer. The tool tells you this and suggests a lighter or darker background or the 3:1 target.

Yes, just set the background to your dark surface color. The generator detects that lighter colors gain contrast there and walks each hue upward instead, producing bright, saturated swatches that hold their ratio on the dark background.

No. Shuffle only rotates the starting hue offset, and every color is re-solved against your background and target from scratch. You can shuffle as many times as you like; each result carries the same guarantee.

Yes, there are two outputs: a plain comma-separated hex list, and a :root block of CSS custom properties named --color-1 through --color-n. The CSS version pastes directly into a stylesheet or design token file.

Each color is guaranteed against the background, but pairs within the palette can still collide for users with color vision deficiency. Paste the result into the Color Blindness Simulator's palette test to confirm the set survives all four vision types.