Color Accessibility Palette Generator
Generate WCAG AA/AAA compliant color palettes from a base color. Get accessible text/background combinations with contrast ratios.
Base Color
Presets
Base Color Details
HEX
#4F46E5
RGB
rgb(79, 70, 229)
HSL
hsl(243, 75%, 59%)
Preview
On White
6.29:1
AA AA: ✓ | AAA: ✗
On Black
3.34:1
FAIL AA: ✓ | AAA: ✓
Generated Palette (10 colors)
#4F46E5
AA on W FAIL on B
#DDE548
FAIL on W AAA on B
#E548DD
FAIL on W AA on B
#48DDE5
FAIL on W AAA on B
#9E48E5
AA on W AA on B
#488FE5
FAIL on W AA on B
#6C67C5
AA on W FAIL on B
#382EFF
AA on W FAIL on B
#2019AE
AAA on W FAIL on B
#A5A1F2
FAIL on W AAA on B
Recommended Accessible Pairs
Top accessible background/foreground combinations for text readability.
| Background | Foreground | Ratio | WCAG Level |
|---|---|---|---|
#DDE548 | #2019AE | 8.49:1 | AAA |
#2019AE | #DDE548 | 8.49:1 | AAA |
#48DDE5 | #2019AE | 7.04:1 | AAA |
#2019AE | #48DDE5 | 7.04:1 | AAA |
#DDE548 | #382EFF | 5.12:1 | AA |
#382EFF | #DDE548 | 5.12:1 | AA |
#2019AE | #A5A1F2 | 4.96:1 | AA |
#A5A1F2 | #2019AE | 4.96:1 | AA |
#4F46E5 | #DDE548 | 4.6:1 | AA |
#DDE548 | #4F46E5 | 4.6:1 | AA |
Understanding Color Accessibility
WCAG Contrast Requirements
- AA Normal Text: 4.5:1 contrast ratio (minimum for body text)
- AA Large Text: 3:1 contrast ratio (18pt+ or 14pt+ bold)
- AAA Normal Text: 7:1 contrast ratio (enhanced accessibility)
- AAA Large Text: 4.5:1 contrast ratio
How This Tool Works
- Enter a base color (hex) or choose a preset
- The tool generates a harmonious palette using color theory (complementary, triadic, analogous, muted/vibrant, lighter/darker)
- Each color shows its contrast ratio on both white and black backgrounds
- WCAG AA/AAA compliance is calculated for both normal and large text
- Recommended pairs show the most accessible background/foreground combinations
Using the Palette
- Click any color's "Copy" button to copy its hex code
- Use "Copy Palette" to get all hex codes as comma-separated values
- Check the "Recommended Pairs" table for ready-to-use accessible combinations
- AAA pairs are ideal for accessibility-first designs; AA pairs are good for general use
Related tools
More from Design & Images
Build custom software with us
From internal tools to full platforms — we deliver end to end.
Was this tool useful?