CColorWell
Get ColorWell

ColorWell · contrast check

White or black text on #8b5cf6?

Tailwind violet-500

Use black text. It gives 4.96:1, which passes AA, not AAA.

White text
4.23:1
passes AA for large text only (18pt+/14pt bold)
Black text
4.96:1
passes AA, not AAA

What the thresholds mean

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

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

#f4e3ff #e1cbff #c9acff #ac86ff #8a57fa #6c3ec9 #50279b #350f6f #1c0046

Paste this into your config

// tailwind.config.js
colors: {
  brand: {
    100: "#f4e3ff",
    200: "#e1cbff",
    300: "#c9acff",
    400: "#ac86ff",
    500: "#8a57fa",
    600: "#6c3ec9",
    700: "#50279b",
    800: "#350f6f",
    900: "#1c0046",
  },
}

Text colour to pair with the 500 shade (#8a57fa): black, at 4.82:1. For #8b5cf6 itself it is black, at 4.96: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