CColorWell
Get ColorWell

ColorWell · contrast check

White or black text on #4b5563?

Tailwind gray-600

Use white text. It gives 7.56:1, which passes AAA (and AA).

White text
7.56:1
passes AAA (and AA)
Black text
2.78:1
fails AA

What the thresholds mean

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

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

#ecf2fc #d7dfea #bcc5d2 #9ba6b4 #768191 #5b6471 #414853 #282e37 #12161d

Paste this into your config

// tailwind.config.js
colors: {
  brand: {
    100: "#ecf2fc",
    200: "#d7dfea",
    300: "#bcc5d2",
    400: "#9ba6b4",
    500: "#768191",
    600: "#5b6471",
    700: "#414853",
    800: "#282e37",
    900: "#12161d",
  },
}

Text colour to pair with the 500 shade (#768191): black, at 5.32:1. For #4b5563 itself it is white, at 7.56: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