Color Palette Generator & WCAG Contrast Checker
Generate harmonious 5-color palettes, lock favorite shades, and verify WCAG 2.1 AA/AAA accessibility contrast ratios in real time. Press Spacebar to generate.
WCAG 2.1 Accessibility Contrast Ratio
Test any two palette colors for complianceSample preview text in #38BDF8 on #0F172A
Color Vision Deficiency Simulation
Color Palette Generator & WCAG Accessibility Contrast Checker: Complete Technical Guide
Generate beautiful, harmonious color schemes and ensure WCAG 2.1 AA/AAA compliance directly in your browser.
Accuracy Standards & Best Practices
- Precision-calibrated inputs: Ensure parameters conform to standard unit conventions before applying results in production.
- Zero network roundtrips: All calculations and transforms are executed in-memory on your local browser engine.
- Session safety: Workspaces reset on reload to maintain maximum memory efficiency and confidentiality.
Frequently Asked Technical Questions
What is the WCAG 2.1 contrast standard?
Web Content Accessibility Guidelines (WCAG) 2.1 require a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text (18pt or 14pt bold) to achieve Level AA compliance. Level AAA requires 7:1 for normal text.
How do I lock a color swatch?
Click the lock icon (🔓) on any swatch to prevent it from changing when you press Spacebar or click Generate Palette. This lets you build palettes around your existing brand colors.
Can I export my palette to CSS or Figma?
Yes! Use the 'Copy CSS' button to grab CSS custom property variables (--palette-color-1) or 'Copy HEX List' for instant pasting into Figma, Sketch, or Adobe Illustrator.