CColorWell
Get ColorWell

ColorWell · contrast check

White or black text on #06b6d4?

Tailwind cyan-500

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

White text
2.43:1
fails AA
Black text
8.65: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

#bdfeff #9aedff #6fd5ed #30b6d2 #0092b1 #00728c #005469 #003748 #001c29

Paste this into your config

// tailwind.config.js
colors: {
  brand: {
    100: "#bdfeff",
    200: "#9aedff",
    300: "#6fd5ed",
    400: "#30b6d2",
    500: "#0092b1",
    600: "#00728c",
    700: "#005469",
    800: "#003748",
    900: "#001c29",
  },
}

Text colour to pair with the 500 shade (#0092b1): black, at 5.75:1. For #06b6d4 itself it is black, at 8.65: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