CColorWell
Get ColorWell

ColorWell · contrast check

White or black text on #f59e0b?

Tailwind amber-500

Use black text. It gives 9.78:1, which passes AAA (and AA).

White text
2.15:1
fails AA
Black text
9.78:1
passes AAA (and AA)

What the thresholds mean

LevelNeedsWhite textBlack text
AA, normal text4.5:1failpass
AA, large text (18pt+/14pt bold)3:1failpass
AAA, normal text7:1failpass

If you need the other one to pass

Same hue, moved along the lightness ramp until the ratio clears AA.

The colour itself

Shade ramp

#ffe8af #ffd18b #fab45d #e09112 #bf6700 #984e00 #723500 #4f1e00 #2e0800

Paste this into your config

// tailwind.config.js
colors: {
  brand: {
    100: "#ffe8af",
    200: "#ffd18b",
    300: "#fab45d",
    400: "#e09112",
    500: "#bf6700",
    600: "#984e00",
    700: "#723500",
    800: "#4f1e00",
    900: "#2e0800",
  },
}

Text colour to pair with the 500 shade (#bf6700): black, at 5.16:1. For #f59e0b itself it is black, at 9.78:1.

Your own colours, the same way

Paste any hex and get this page for it live — ratio, verdict, ramp. Export the whole palette to CSS variables, a Tailwind config or Figma tokens when you want it in the project rather than on the screen.

Open ColorWell

Other colours