RecolorOpen Recolor

A pale cyan, black text passes AA

Tailwind teal-200

Tailwind teal-200 is oklch(91% 0.096 180.426) in Tailwind CSS 4.3.3, which is #96f7e4 in hex and rgb(150 247 228). Black text on it reaches 16.72:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#96f7e4teal-200
From the theme file of Tailwind CSS 4.3.3 (--color-teal-200), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(91% 0.096 180.426)
Hex#96f7e4
RGBrgb(150 247 228)
HSLhsl(168 86% 78%)
CSS variablevar(--color-teal-200)
Nearest CSS namepaleturquoise #afeeee, 0.040 away in OKLab
White text1.26:1: AA fails, AAA fails, large text fails
Black text16.72:1: AA passes, AAA passes, large text passes

About teal-200

Tailwind teal-200 is a pale cyan: OKLCH lightness 91.0%, chroma 0.096, hue 180.4 degrees. On Tailwind's teal scale it sits between teal-100 at 95.3% and teal-300 at 85.5%.

Its lightness is 78% in HSL and 91.0% in OKLCH, 13 points apart; only the second tracks how light it looks. Its value fits inside sRGB, so #96f7e4 is the same color, not an approximation.

Black text on teal-200 measures 16.72:1, past the 7:1 of WCAG AAA, while white text manages only 1.26:1. On the teal scale black text works down to teal-600, which leaves teal-200 4 shades of margin.

The closest CSS named color is paleturquoise (#afeeee), 0.040 away in OKLab: near, and still a visible step from it side by side.

Tints and shades

  1. #effefa
  2. #dffdf6
  3. #cefcf1
  4. #bdfaed
  5. #aaf9e8
  6. #96f7e4
  7. #75c2b3
  8. #558f84
  9. #376058
  10. #1c342f
  11. #050e0c

From light to dark: 5 toward white and 5 toward black, mixed in OKLCH a sixth of the way at a time with the hue kept. A step that would repeat its neighbor is left out.

A palette around it

  1. #96f7e4
  2. #395747
  3. #a1d6ce
  4. #0e1d1e
  5. #00a1b7

Recolor's generator, with teal-200 locked as swatch 1 and the seed taken from its hex, drew an analogous palette, hues next to each other on the wheel: #395747, #a1d6ce, #0e1d1e, #00a1b7. Open it in Recolor.

Using teal-200

Pair it with text-black, 16.72:1; teal-200 as text on a black page measures the same ratio. In CSS it is var(--color-teal-200).

HTML
<a class="bg-teal-200 text-black" href="/start">Get started</a>
<p class="text-teal-200">Text in teal-200</p>

Common questions

Does white text pass WCAG AA on Tailwind teal-200?

No. White text measures 1.26:1 on teal-200, under AA's 4.5:1; black text measures 16.72:1 and passes. The lightest teal shade for white text is teal-700.

Is Tailwind teal-200 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-teal-200: oklch(91% 0.096 180.426); #96f7e4 is its conversion to sRGB.

Is there a CSS named color for Tailwind teal-200?

No. The nearest CSS named color is paleturquoise (#afeeee), 0.040 away in OKLab.

Sources