Accessible Color Palette Generator

Generate color palettes that meet WCAG AA/AAA contrast requirements with automatic pairing suggestions.

Tested tool guide Design and color tools Checked July 30, 2026

What Accessible Color Palette Generator does, with a checked example

This tool calculates relative luminance for two sRGB colors and applies the WCAG contrast-ratio formula. It reports AA and AAA results for normal and large text, shows the pair in a live preview, and can suggest black or white text when that provides stronger contrast against the selected background.

Worked example

A concrete input and expected output from the current implementation.

Input

Text #000000 on background #FFFFFF

Expected output

21.00:1 contrast; passes AA and AAA for normal and large text

Black and white produce the maximum contrast ratio in the WCAG formula. A 4.5:1 result is the usual AA threshold for normal-size text.

How the result is produced

sRGB channels are linearized before comparison

The formula converts encoded red, green, and blue values into linear-light components, weights them to obtain relative luminance, then compares the lighter and darker colors.

Text size changes the threshold

WCAG AA uses 4.5:1 for normal text and 3:1 for large text. AAA uses 7:1 and 4.5:1 respectively. Large text also has weight and size conditions.

Good uses

Check body text against a proposed page background.
Compare button-label colors before implementation.
Find a high-contrast black or white fallback.

Limits and checks

Contrast does not cover focus visibility, states, spacing, or semantics.
Text over gradients or images needs testing at the actual placement.
Logo text and inactive controls can have different WCAG treatment.

Common questions

Does passing 4.5:1 make a design fully accessible?

No. It satisfies one contrast criterion for normal text. The complete interface still needs keyboard, semantic, state, zoom, and usability review.

Why is a color pair easier for some users than the ratio suggests?

The ratio is a standardized minimum signal. Font shape, size, weight, display conditions, glare, and individual vision also affect readability.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.