Colors
Palette sûre pour l'accessibilité
Used by developers, writers, and creators worldwide.
An accessibility-safe palette generator builds a UI color set where the text and accent colors are guaranteed to clear WCAG AA contrast against the background. Starting from a white background, it takes your chosen accent hue and walks each role, heading, body, accent, and muted text, down in lightness until it reaches the 4.5:1 ratio required for normal text, reporting the achieved ratio beside each color so you can verify compliance at a glance. This removes the trial-and-error of picking a brand-tinted text color only to discover it fails an audit. The relative luminance and contrast math run inline using the official WCAG formula, so the numbers are real. Designers and developers use it to seed a compliant theme, choose readable on-white text tones, or prove accessibility in a review. Each value is a labelled, paste-ready hex code annotated with its contrast ratio against the background.
Read the complete guide — 4 min read
Loading usage…
Free forever — no account required
How to use
- Choose your options above
- Click Generate
- Copy your result
Detailed instructions
- Set your accent hue from 0 to 360.
- Click Generate to build the compliant palette.
- Read the contrast ratio beside each color.
- Apply the text and accent tones on a white background.
Use Cases
- •Seeding a WCAG-compliant theme on a white background
- •Choosing on-white text tones that pass AA
- •Picking an accent that meets text contrast
- •Documenting contrast ratios for an audit
- •Avoiding brand colors that fail accessibility
Tips
- →Keep body text at 4.5:1 or higher for AA.
- →Use the reported ratios as audit evidence.
- →Large text can pass at the lower 3:1 threshold.
- →Re-check colors if you change the background.
FAQ
how does it guarantee AA
For each role it steps the color darker in lightness while measuring the real WCAG contrast against the white background, stopping once the ratio reaches 4.5:1, the AA threshold for normal text. The achieved ratio is shown beside each hex.
why is the background white
White is the most common UI background and the toughest to pass colored text against. Anchoring on white means the derived text and accent tones are conservative and will usually pass on lighter tinted backgrounds too.
does AA cover everything
AA 4.5:1 covers normal body text; large text passes at 3:1 and AAA wants 7:1. For non-text UI like borders and icons, the requirement is 3:1, so check those separately against their neighbours.
You might also like
Popular tools from other categories that share themes with this one.