Accessible WCAG Color Palette Generator

Generate a random color palette and filter to the colors that actually achieve a WCAG AA or AAA contrast ratio with white or black text. Luminance and ratio calculations run directly in your browser.

6 color(s)
Aa
White text: 1.52:1
Black text: 13.79:1
✅ AAA
Aa
White text: 10.15:1
Black text: 2.07:1
✅ AAA
Aa
White text: 4.56:1
Black text: 4.61:1
✅ AA
Aa
White text: 5.2:1
Black text: 4.04:1
✅ AA
Aa
White text: 14.73:1
Black text: 1.43:1
✅ AAA
Aa
White text: 1.5:1
Black text: 14.01:1
✅ AAA

How it works

Choosing a brand palette based only on aesthetics often leads to colors that fail accessibility testing when combined with text. This tool pulls random colors, calculates their relative luminance according to the WCAG formula, then compares the resulting contrast ratio with white text and black text to keep—if you wish—only those that reach AA or AAA level.

How is the contrast ratio calculated?

The calculation follows the official WCAG formula: each color is converted to relative luminance (a measure of perceived brightness that accounts for the human eye’s sensitivity to each red, green, and blue channel), then the ratio is obtained by comparing the luminance of the lighter color to that of the darker color. A ratio of 21:1 is the maximum possible contrast (pure black on pure white).

Why do some colors show “white text” and others “black text”?

The tool calculates the ratio in both directions and automatically keeps the text color (white or black) that offers the best contrast on the generated background. That’s the combination you should use if you adopt this color as a background in your interface.

All luminance and contrast calculations run in JavaScript in your browser: no generated color is ever sent to a server.