Color Palette Generator & WCAG Contrast Checker
Create beautiful, accessible color palettes with PaletteChecker. Generate harmonious color schemes, check WCAG 2.1 contrast compliance, extract colors from images, simulate color blindness, and export to Tailwind CSS, SCSS, Figma, and more — all in one free tool.
Tools Included
- WCAG Contrast Checker — Test any two colors against WCAG 2.1 AA and AAA standards for text readability
- Palette Generator — Create complementary, analogous, triadic, and split-complementary color schemes
- Image Color Extraction — Upload an image and automatically extract its dominant colors into a palette
- Color Blindness Simulator — Preview how your palette appears to users with protanopia, deuteranopia, and tritanopia
- Tints & Shades — Generate a full range of tints and shades from any base color
- Gradient Generator — Create smooth CSS gradients between your palette colors
- Multi-Format Export — Export to CSS custom properties, Tailwind config, SCSS variables, Figma tokens, or PNG
WCAG Contrast Requirements
| Level | Normal Text | Large Text | UI Components |
|---|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 | N/A |
Large text is defined as 18pt (24px) regular weight or 14pt (18.5px) bold. Most websites should meet AA as a minimum standard.
Frequently Asked Questions
What is a color palette generator?
A color palette generator creates harmonious color combinations based on color theory rules like complementary, analogous, triadic, and split-complementary schemes. PaletteChecker generates palettes and checks WCAG accessibility in one tool.
How do I check if my colors are WCAG accessible?
Enter your foreground and background colors in the contrast checker. It calculates the contrast ratio and tells you if it passes WCAG 2.1 AA (4.5:1 for normal text) or AAA (7:1 for normal text) standards.
What is the difference between WCAG AA and AAA?
AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text. AA is the standard requirement for most websites.
Can I extract colors from an image?
Yes, upload any image and the tool automatically extracts the dominant colors to create a palette. You can then check each combination for WCAG accessibility compliance.
Can I export my palette for Tailwind CSS?
Yes, export in multiple formats including Tailwind CSS config, CSS custom properties, SCSS variables, and Figma tokens. Each export is ready to paste into your project.