Accessible color palette generator

Enter your brand color. You'll get a scale of eleven tints and shades of it, with the WCAG contrast of each against white and black, which text color is readable on each, and code to copy. Your color is marked in the scale.

AA = 4.5:1 for normal text. AA large = 3:1, for text at least 24px, or 18.66px bold, and for icons and input borders. AAA = 7:1.

Pairs that pass for body text

Text on a background from the same scale, for tinted cards, badges and alerts. Each row lists the darkest light step and lightest dark step that still pass 4.5:1.

Copy the palette

How to use a scale like this

• Text and links on white: use a step marked AA on white, usually 600 or darker. Your brand color may not qualify; that's normal for bright hues.
• Buttons: a filled button needs the label to pass on the fill (4.5:1), and the button's edge to reach 3:1 against the page if the fill is the only thing showing where the button is (WCAG 1.4.11).
• Backgrounds for callouts: the 50–100 steps behind 800–900 text pass easily.
• Don't rely on hue alone. Two colors with the same lightness look identical to many color-blind users. Check with the color blindness simulator.

Steps are made by changing lightness in HSL while keeping your hue and saturation, then measured with the WCAG 2.2 formula. The ratios are exact; the shades are a starting point you can adjust. For the rules behind the numbers, see WCAG contrast ratio explained.

Related: contrast checker · WCAG 2.2 AA checklist · how to do an accessibility audit.