A light gray, black text passes AA
What color is lightgray?
The CSS named color lightgray is #d3d3d3, or rgb(211 211 211): a light gray in plain words. Black text on it reaches 14.03:1, passing WCAG AAA, and Recolor (recolor.page) can put it on a real page.
Last updated
| Format | Value |
|---|---|
| Keyword | lightgray, also lightgrey |
| Hex | #d3d3d3 |
| RGB | rgb(211 211 211) |
| HSL | hsl(0 0% 83%) |
| OKLCH | oklch(86.7% 0.000 none) |
| Nearest Tailwind color | neutral-300 #d4d4d4, 0.003 away in OKLab |
| White text | 1.50:1: AA fails, AAA fails, large text fails |
| Black text | 14.03:1: AA passes, AAA passes, large text passes |
About lightgray
A light gray is the plain description of lightgray: OKLCH lightness 86.7%, chroma 0.000, no hue. Its other spelling, lightgrey, is the same color: the named color table of CSS lists both.
Here HSL's lightness, 83%, lands near OKLCH's 86.7%, which is not true of every color. The closest CSS named color is gainsboro (#dcdcdc), 0.028 away in OKLab: near, and still a visible step from it side by side.
Black text on lightgray measures 14.03:1, past the 7:1 of WCAG AAA, while white text manages only 1.50:1. Its neighbors in the hue-sorted list of names are gainsboro and silver.
The closest Tailwind 4.3.3 color is neutral-300, 0.003 away in OKLab, so bg-neutral-300 comes very close; bg-[#d3d3d3] gives the color itself.
Tints and shades
- #f8f8f8
- #f0f0f0
- #e9e9e9
- #e1e1e1
- #dadada
- #d3d3d3
- #a5a5a5
- #7a7a7a
- #515151
- #2b2b2b
- #0a0a0a
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
- #d3d3d3
- #6c3858
- #ceb1c8
- #1d2620
- #53a274
Recolor's generator, with lightgray locked as swatch 1 and the seed taken from its hex, drew a complementary palette, built on the hue opposite: #6c3858, #ceb1c8, #1d2620, #53a274. Open it in Recolor.
Using lightgray
As a text color, lightgray on a black page gives the same 14.03:1.
.notice {
background-color: lightgray; /* #d3d3d3 */
color: black; /* 14.03:1 */
}Common questions
Does white text pass WCAG AA on lightgray?
No. White text measures 1.50:1 on lightgray, under AA's 4.5:1; black text measures 14.03:1 and passes.
Can lightgray be written in OKLCH?
Yes: oklch(86.7% 0.000 none), computed from #d3d3d3. A named color is an sRGB color, so its OKLCH value converts back to the same hex.
Is there a named color close to lightgray?
Yes: gainsboro (#dcdcdc) is the nearest, 0.028 away in OKLab, then lightblue at 0.050.