My Tool Studio
WCAG

Accessible Color Palette Generator

This accessible color palette generator builds a set of 2 to 12 colors that all pass a WCAG contrast target against your background. Pick the background, choose 3:1, 4.5:1 or 7:1, and every swatch is checked before it is shown, with its ratio printed on it. Add your brand color and the palette starts from its hue. Tick the dark mode option to get a second set with the same hues that passes on a dark background too. A live preview shows headings, links, buttons, tags and chart bars in your colors, and a color blindness check lists pairs that would look alike. Export the result as CSS variables, SCSS, Tailwind, JSON tokens, SVG, PNG, ASE or PDF, or copy a share link.

Always freeNo sign upRuns in your browser
4.7:1
#d53939

Sample text

4.5:1
#7a7a2e

Sample text

4.9:1
#318131

Sample text

4.6:1
#318181

Sample text

7.8:1
#2b2bee

Sample text

4.7:1
#b545b5

Sample text

All 6 colors pass 4.5:1 on #ffffff

Live preview on your background

Heading in color 1

A link or small text in color 2. Read more

ButtonOutlineTagTagTag

Export: Tailwind, SCSS, JSON tokens, CSS, SVG, PNG, ASE, PDF

:root {
  --accessible-1: #d53939;
  --accessible-2: #7a7a2e;
  --accessible-3: #318131;
  --accessible-4: #318181;
  --accessible-5: #2b2bee;
  --accessible-6: #b545b5;
}

Color blindness check

Pairs listed here look almost the same to people with that type of color blindness. Do not use them as the only way to tell two things apart, for example two lines in the same chart.

Protanopia 2 similar pairs:
Deuteranopia 3 similar pairs:
Tritanopia 1 similar pair:
Achromatopsia 10 similar pairs:

How to use

01

Set the background and brand color

Pick or type the background your colors will sit on, such as #FFFFFF. Optionally add your brand color so the palette starts from its hue, and tick the dark mode option with a dark background to build a second set.

02

Choose a count and contrast target

Set Colors from 2 to 12 and choose 3:1 for large text and chart fills, 4.5:1 AA for normal text, or 7:1 AAA. Press Shuffle hues for a different starting point.

03

Review the preview and export

Check the live preview and the color blindness list, then pick an export format and copy or download it. Copy share link saves the whole setup as a URL.

Why Accessible Color Palette Generator

Contrast targets and accessible chart colors

The three targets map to different parts of WCAG 2. Choose based on how the colors will be used, not on how they look in the swatch grid.

For dashboards, color is rarely enough on its own. Keep a legend or direct labels, use at most six to eight series colors, and vary lightness as well as hue so the series still separate in grayscale. Run the color blindness check after every change, and if a pair is flagged, either drop one of the colors or pair it with a pattern or marker shape.

TargetWhere it appliesWCAG criterion
3:1Large text, chart bars and lines, icons, input borders, focus rings1.4.3 (large text), 1.4.11
4.5:1Normal body text and links at AA1.4.3
7:1Normal body text at AAA1.4.6

Common questions

How does the accessible palette generator make sure every color passes?
For each hue it tries lightness and saturation values until the final 8-bit hex code reaches the target ratio against your background. The check runs on the rounded hex, so the ratio you see is the ratio you get. If a hue cannot pass, it falls back to black or white, and it is dropped only if neither passes.
Which contrast target should an accessible palette use?
Use 4.5:1 if the colors will be used for normal-size text, 7:1 for AAA text, and 3:1 for large headings, chart fills, icons and UI borders. When unsure, pick 4.5:1 so the colors work for both text and graphics.
Can I start an accessible palette from my brand color?
Yes. Enter it in Brand color and the first swatch uses that hue, with the rest spaced evenly around the wheel. The tool also shows the ratio of your exact brand color on the background, so you know whether you can use it as is.
Why does the palette generator return fewer colors or none at all?
Some targets are not reachable on mid-tone backgrounds. A gray around #777777 cannot give 7:1 with any color because neither black nor white is far enough away. Try a lighter or darker background or a lower target.
Are the generated accessible colors safe for color blind users?
Not always, which is why the tool runs a check. Each color passes against the background, but two palette colors can still look alike to someone with deuteranopia or protanopia. The check lists those pairs so you can drop one or add labels.
Can I make accessible chart colors for a dark dashboard?
Yes. Set a dark background such as #0F172A and choose 3:1 for chart fills or 4.5:1 if the colors will also be used for text. The generator then walks each hue toward lighter values so it stands out on the dark surface. If your dashboard has both themes, keep a light background and tick the dark mode option to get both sets at once.
Does shuffling hues keep the palette accessible?
Yes. Shuffle only rotates the starting hue. Every new swatch goes through the same contrast check, so the target still holds. Shuffle is hidden while a brand color is set, because the brand hue fixes the start.
How do I copy an accessible palette as CSS variables?
Press Copy CSS variables to get a :root block with --color-1, --color-2 and so on, or use the export panel for SCSS, Tailwind v3 or v4, JSON tokens, SVG, PNG, ASE or PDF. Rename the tokens to match your system, such as --chart-1 or --status-info, after pasting.
Can one accessible palette work in light and dark mode?
Usually not with the same hex codes, because a color dark enough for white pages is too dark for black ones. Tick Also build a dark mode set: the generator keeps each hue and finds a second lightness that passes on your dark background, then exports both sets with light and dark names.

More WCAG tools

View all

Website Accessibility Scanner

Full-site WCAG 2.1 audit with fix code for every issue

WCAG
URL-first

Color Contrast Checker

WCAG AA/AAA contrast ratio with passing colors

WCAG

WCAG Accessibility Checker

Check one page or HTML against 70 WCAG 2.1 rules

WCAG
URL-first

ADA Title II Compliance Checker

WCAG 2.1 AA scan, deadline calculator and Title II readiness checklist

WCAG
URL-first