RecolorOpen Recolor

A medium gray, black text passes AA

Tailwind neutral-400

Tailwind neutral-400 is oklch(70.8% 0 none) in Tailwind CSS 4.3.3, which is #a1a1a1 in hex and rgb(161 161 161). Black text on it reaches 8.13:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#a1a1a1neutral-400
From the theme file of Tailwind CSS 4.3.3 (--color-neutral-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(70.8% 0 none)
Hex#a1a1a1
RGBrgb(161 161 161)
HSLhsl(0 0% 63%)
CSS variablevar(--color-neutral-400)
Nearest CSS namedarkgray #a9a9a9, 0.026 away in OKLab
White text2.58:1: AA fails, AAA fails, large text fails
Black text8.13:1: AA passes, AAA passes, large text passes

About neutral-400

Tailwind neutral-400 is a medium gray: OKLCH lightness 70.8%, chroma 0.000, no hue. On Tailwind's neutral scale it sits between neutral-300 at 87.0% and neutral-500 at 55.6%.

HSL calls its lightness 63%, OKLCH 70.8%: 8 points between a formula and a measure of what the eye sees. Its value fits inside sRGB, so #a1a1a1 is the same color, not an approximation.

Black text on neutral-400 measures 8.13:1, past the 7:1 of WCAG AAA, while white text manages only 2.58:1. It is the darkest neutral shade that still carries black body text; neutral-500 drops to 4.43:1.

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

Tints and shades

  1. #efefef
  2. #dfdfdf
  3. #cfcfcf
  4. #bfbfbf
  5. #b0b0b0
  6. #a1a1a1
  7. #7d7d7d
  8. #5b5b5b
  9. #3c3c3c
  10. #1e1e1e
  11. #050505

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. #a1a1a1
  2. #201d13
  3. #ebd9ff
  4. #25628c
  5. #7bbaeb

Recolor's generator, with neutral-400 locked as swatch 1 and the seed taken from its hex, drew a split-complementary palette, built on the two hues beside its opposite: #201d13, #ebd9ff, #25628c, #7bbaeb. Open it in Recolor.

Using neutral-400

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

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

Common questions

Does white text pass WCAG AA on Tailwind neutral-400?

No. White text measures 2.58:1 on neutral-400, under AA's 4.5:1; black text measures 8.13:1 and passes. The lightest neutral shade for white text is neutral-500.

Is Tailwind neutral-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-neutral-400: oklch(70.8% 0 none); #a1a1a1 is its conversion to sRGB.

Is there a CSS named color for Tailwind neutral-400?

No. The nearest CSS named color is darkgray (#a9a9a9), 0.026 away in OKLab.

Sources