Generate palettes where every color is guaranteed to have accessible contrast against your background.
About the Accessible Palette Generator
Most palette generators focus only on aesthetics (harmonies, shades, tints). This tool focuses on usability and accessibility. It allows you to select a background color and instantly generate a suite of foreground colors that strictly adhere to WCAG (Web Content Accessibility Guidelines) contrast requirements.
How to build your palette
Set your Background: Enter your app's primary surface color (e.g., a dark slate or a pure white).
Select your Target: Choose WCAG AA (4.5:1) for standard text, or AAA (7.0:1) for maximum readability.
Curate: Lock the colors you like and regenerate the rest. The algorithm ensures all new colors mathematically pass the contrast test.
The math behind the colors
The tool calculates relative luminance for your background color and then uses binary search to adjust the lightness of newly generated hues until their relative luminance creates a contrast ratio that meets or exceeds your selected threshold.
Frequently Asked Questions
An accessible color palette ensures that there is sufficient contrast between background and foreground (text) colors so that content is readable for everyone, including individuals with visual impairments. The standard metric is the WCAG contrast ratio.
WCAG AA is the standard legal and practical requirement for most websites, requiring a contrast ratio of 4.5:1 for normal text and 3.0:1 for large text. AAA is a stricter standard requiring 7.0:1 for normal text, intended for highly accessible environments.
The generator picks random colors and mathematically adjusts their lightness until they meet your selected target contrast ratio against the chosen background color. This guarantees that every generated color is safe to use for text or important UI elements on that background.
Yes! Contrast works both ways. If the generated color has a 4.5:1 ratio against your base color, you can use the generated color as the background and the base color as the text.
If you manually edit a color's HEX code and it fails to meet your selected WCAG target, the tool will display a 'Fail' badge. You can then unlock it and hit 'Regenerate Unlocked' to find a new accessible color, or use our Accessible Color Fixer tool to find the closest passing alternative.