WCAG Accessible

Color Palette Generator

Generate beautiful, accessible color palettes with WCAG contrast checking

πŸ“€ Share this tool

Frequently Asked Questions

What is a complementary color?

Complementary colors are pairs of colors that sit opposite each other on the color wheel. They create high contrast and vibrant looks when used together. For example, blue (#6366F1) and orange-yellow are complementary.

How do I pick colors for my website?

Start with your brand color as the base. Use the palette generator to find harmonious colors. For web design: use your primary color for CTAs, secondary colors for accents, and ensure text has sufficient contrast (WCAG AA minimum 4.5:1 for normal text).

What is WCAG contrast ratio?

WCAG (Web Content Accessibility Guidelines) defines contrast ratios for text readability. AA normal text requires 4.5:1, AA large text (18pt+) requires 3:1, and AAA requires 7:1. This tool shows pass/fail for each color against white and black backgrounds.

What are analogous colors?

Analogous colors are groups of three colors that are next to each other on the color wheel. They create serene and comfortable designs because they match well naturally. Great for creating subtle, cohesive color schemes.