Free tools

Accessible color palette generator

Turn one brand color into a set of text, link, button, border and focus colors that pass WCAG 2.2 AA contrast, for a light and a dark theme.

Runs in your browser. Nothing is sent to our servers.

Palette ready for #2b59c3. 16 of 16 pairs reach their contrast target.

Your brand color

Palette for #2b59c3

Works as is #2b59c3 can carry button text that reaches 4.5 : 1.

Brand scale

  • 50
    #f1f3f9
  • 100
    #e2e7f3
  • 200
    #c2ceeb
  • 300
    #97aee3
  • 400
    #6286da
  • 500
    #2e5fd1
  • 600
    #264da6
  • 700
    #203c7e
  • 800
    #1a2e5b
  • 900
    #131f39
  • 950
    #0d1321

Neutral scale (same hue, low saturation)

  • 50
    #f4f4f6
  • 100
    #e9eaed
  • 200
    #d2d4db
  • 300
    #b4b9c5
  • 400
    #9199ab
  • 500
    #6e7891
  • 600
    #586074
  • 700
    #454b59
  • 800
    #343842
  • 900
    #22252a
  • 950
    #151619

Light theme

Light theme: color pairs and their contrast
UseLookColorsRatioResult
Body text on page backgroundNeutral 700Aa#454b59 on #f4f4f67.95 : 1needs 4.5 : 1Pass
Body text on cardsNeutral 700Aa#454b59 on #ffffff8.73 : 1needs 4.5 : 1Pass
Secondary textNeutral 600Aa#586074 on #f4f4f65.72 : 1needs 4.5 : 1Pass
Link textBrand 500Aa#2e5fd1 on #f4f4f65.20 : 1needs 4.5 : 1Pass
Button labelYour brand colorAa#ffffff on #2b59c36.32 : 1needs 4.5 : 1Pass
Input borderNeutral 500#6e7891 on #f4f4f64.01 : 1needs 3 : 1Pass
Focus ringBrand 400#6286da on #f4f4f63.21 : 1needs 3 : 1Pass
Error textRed, adjusted to passAa#af261d on #f4f4f66.13 : 1needs 4.5 : 1Pass

Dark theme

Dark theme: color pairs and their contrast
UseLookColorsRatioResult
Body text on page backgroundNeutral 50Aa#f4f4f6 on #15161916.47 : 1needs 4.5 : 1Pass
Body text on cardsNeutral 50Aa#f4f4f6 on #22252a13.99 : 1needs 4.5 : 1Pass
Secondary textNeutral 400Aa#9199ab on #22252a5.37 : 1needs 4.5 : 1Pass
Link textBrand 300Aa#97aee3 on #1516198.16 : 1needs 4.5 : 1Pass
Button labelBrand 400Aa#151619 on #6286da5.11 : 1needs 4.5 : 1Pass
Input borderNeutral 500#6e7891 on #1516194.09 : 1needs 3 : 1Pass
Focus ringBrand 400#6286da on #1516195.11 : 1needs 3 : 1Pass
Error textRed, adjusted to passAa#f7776e on #1516196.73 : 1needs 4.5 : 1Pass

Text pairs are held to 4.5 : 1 (WCAG 1.4.3). Borders and focus rings are held to 3 : 1 against the page (WCAG 1.4.11). The ratios above are worked out with the same formula as the color contrast checker.

Which steps pass together

Brand scale

Brand scale pairs that reach 4.5 to 1
Background stepText steps that reach 4.5 : 1
50500, 600, 700, 800, 900, 950
100500, 600, 700, 800, 900, 950
200600, 700, 800, 900, 950
300700, 800, 900, 950
400900, 950
50050, 100
60050, 100, 200
70050, 100, 200, 300
80050, 100, 200, 300
90050, 100, 200, 300, 400
95050, 100, 200, 300, 400

Neutral scale

Neutral scale pairs that reach 4.5 to 1
Background stepText steps that reach 4.5 : 1
50600, 700, 800, 900, 950
100600, 700, 800, 900, 950
200700, 800, 900, 950
300800, 900, 950
400900, 950
500None
60050, 100
70050, 100, 200
80050, 100, 200, 300
90050, 100, 200, 300, 400
95050, 100, 200, 300, 400

CSS variables

:root {
  --brand: #2b59c3;
  --on-brand: #ffffff;
  --bg: #f4f4f6;
  --surface: #ffffff;
  --text: #454b59;
  --text-muted: #586074;
  --link: #2e5fd1;
  --border: #6e7891;
  --focus: #6286da;
  --error: #af261d;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #6286da;
    --on-brand: #151619;
    --bg: #151619;
    --surface: #22252a;
    --text: #f4f4f6;
    --text-muted: #9199ab;
    --link: #97aee3;
    --border: #6e7891;
    --focus: #6286da;
    --error: #f7776e;
  }
}

Tailwind colors

// tailwind.config: theme.extend.colors
colors: {
    brand: {
      50: "#f1f3f9",
      100: "#e2e7f3",
      200: "#c2ceeb",
      300: "#97aee3",
      400: "#6286da",
      500: "#2e5fd1",
      600: "#264da6",
      700: "#203c7e",
      800: "#1a2e5b",
      900: "#131f39",
      950: "#0d1321",
    },
    neutral: {
      50: "#f4f4f6",
      100: "#e9eaed",
      200: "#d2d4db",
      300: "#b4b9c5",
      400: "#9199ab",
      500: "#6e7891",
      600: "#586074",
      700: "#454b59",
      800: "#343842",
      900: "#22252a",
      950: "#151619",
    },
}

What next?

Want to know how many colors on a live site fall short today? This tool looks at one thing at a time. It cannot tell you whether a whole website meets a standard or a law.

Check your whole site freeRunning this for client sites? See agency white-label reports

How it works

  1. Your color gives the hue and saturation. From them the tool builds an 11-step brand scale and a matching low-saturation neutral scale, from very light to very dark.
  2. For each use (body text, secondary text, links, borders, focus ring, errors) it picks a step that reaches the needed ratio against the page and card colors, using the same formula as the contrast checker.
  3. Your own color is kept for buttons when text on it reaches 4.5:1. If not, the closest color that works is used and you are told.
  4. Every pair in the tables shows its real ratio and a Pass or Fail label, so you can see the numbers and not just take our word for it.
  5. Copy the result as CSS variables with a dark-mode block, or as a Tailwind color scale.

Questions

What does "passes AA" mean for these colors?

Each text pair reaches a contrast ratio of at least 4.5:1, and each border or focus ring reaches at least 3:1 against the page color. These are the WCAG 2.2 levels for normal text (1.4.3) and for interface parts (1.4.11).

Why did the tool change my brand color?

If neither white nor dark text can reach 4.5:1 on your color, a button made in that exact color would have unreadable labels. The tool then moves the lightness a little, keeping the hue, and tells you it did.

Is a passing palette enough for an accessible design?

No. It covers color contrast for the pairs listed. Text over photos, hover and disabled states, charts that rely on color alone and many other parts of WCAG need their own checks.

Which color formats can I enter?

Hex (#2b59c3 or #2bc), rgb() and hsl(). The color picker next to the field works too.

Can I use the CSS variables in a client project?

Yes. They are plain CSS custom properties with a light set and a dark set. Check the result on the real design, especially where text sits on images or on a color not in the list.

More free tools