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.