CColorWell
Get ColorWell

ColorWell · contrast check

White or black text on #7c3aed?

Tailwind violet-600

Use white text. It gives 5.7:1, which passes AA, not AAA.

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

What the thresholds mean

LevelNeedsWhite textBlack text
AA, normal text4.5:1passfail
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

#f5e1ff #e3c7ff #cba7ff #ae7fff #8e4bff #6f33d5 #521ba5 #370077 #1e004c

Paste this into your config

// tailwind.config.js
colors: {
  brand: {
    100: "#f5e1ff",
    200: "#e3c7ff",
    300: "#cba7ff",
    400: "#ae7fff",
    500: "#8e4bff",
    600: "#6f33d5",
    700: "#521ba5",
    800: "#370077",
    900: "#1e004c",
  },
}

Text colour to pair with the 500 shade (#8e4bff): black, at 4.6:1. For #7c3aed itself it is white, at 5.7: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