Accessible Color Palette Generator
Enter any brand or base color and instantly generate a full accessible color palette. Every shade is tested against every other for WCAG contrast compliance — so you know exactly which combinations work for text, buttons, and backgrounds.
Choose Your Base Color
Generated Palette
Contrast Matrix
Every color tested against every other. Green badges = pass, faded = fail.
Color Blindness Preview
Why Accessible Color Palettes Matter
Color is one of the most powerful tools in design, but when used without accessibility in mind, it can exclude millions of users. An estimated 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Additionally, people with low vision, aging eyes, or situational impairments (like screen glare) rely on high contrast to read text and interact with interfaces. WCAG (Web Content Accessibility Guidelines) sets clear contrast thresholds: 4.5:1 for normal text (AA), 3:1 for large text (AA), and 7:1 for enhanced readability (AAA). A well-designed accessible palette ensures compliance from the start rather than fixing contrast issues after launch.
How This Generator Works
This tool takes your brand color and generates 10 shades ranging from very light (tint) to very dark (shade) by mixing with white and black in perceptually even steps. It then calculates the relative luminance of each shade using the WCAG formula (linearizing sRGB values and weighting red, green, and blue channels) and computes contrast ratios for every possible pairing. The contrast matrix marks each pair as passing or failing WCAG AA text (4.5:1), AA large text (3:1), and AAA text (7:1). The color blindness preview applies Brettel simulation matrices to show how your palette appears under protanopia and deuteranopia — the two most common forms of color vision deficiency.
Tips for Building Accessible Color Systems
Start with your primary brand color and generate a full shade scale. Use the lightest shades for backgrounds and the darkest for text — this naturally produces high contrast. Reserve mid-tones for borders, disabled states, and decorative elements where contrast is less critical. Always test your chosen foreground-background pairs in the contrast matrix before shipping. If a critical pair fails AA, adjust the shade one step darker or lighter. For data visualizations, check the color blindness preview to ensure all categories remain distinguishable. Pair colors with patterns, labels, or icons as a secondary signal. Finally, export your palette as CSS custom properties to enforce consistency across your codebase and prevent developers from accidentally picking non-compliant shades.
Understanding WCAG Contrast Levels
WCAG defines three contrast levels. Level AA for normal text requires a minimum ratio of 4.5:1 — this is the baseline for legal compliance under ADA and EN 301 549. Level AA for large text (18px bold or 24px regular) requires 3:1. Level AAA, the enhanced level, requires 7:1 for normal text and 4.5:1 for large text. While AAA is not required by law, it significantly improves readability for users with low vision and in challenging environments like outdoor screens or low-brightness settings. Aim for AAA wherever possible, especially for body text and critical UI elements.
Frequently Asked Questions
What contrast ratio do I need for WCAG AA compliance?
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18px bold or 24px regular) and 3:1 for large text. These thresholds ensure readability for users with low vision.
What is WCAG AAA and when should I target it?
WCAG AAA requires 7:1 contrast for normal text and 4.5:1 for large text. While not legally required, AAA significantly improves readability for people with low vision, aging eyes, and users in challenging lighting conditions. Aim for AAA on body text.
How does the palette generator create shades?
It takes your base color and mixes it with white (for tints/lighter shades) and black (for shades/darker variants) at perceptually even intervals, producing 10 steps from very light to very dark.
How is the contrast ratio calculated?
Contrast ratio follows the WCAG 2.1 formula: (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the two colors. Relative luminance is calculated by linearizing sRGB values and weighting the red, green, and blue channels.
What do the color blindness previews show?
The previews simulate how your palette appears to people with protanopia (no red cones, ~1% of men) and deuteranopia (no green cones, ~6% of men). This helps ensure your color choices remain distinguishable for color blind users.
Is my data private?
Yes. All color calculations happen entirely in your browser. No data is sent to any server. Your brand colors stay completely private.
Can I export the palette for my design system?
Yes. Use the "Copy as CSS Variables" button to get ready-to-use custom properties, or "Copy as JSON" for design tokens compatible with Tailwind, Figma plugins, and other tooling.