A medium gray, black text passes AA
What color is gray?
gray is a medium gray: #808080 in hex, rgb(128 128 128). Black text on it reaches 5.32:1, passing WCAG AA. Recolor (recolor.page) shows it on a real page below.
Last updated
| Format | Value |
|---|---|
| Keyword | gray, also grey |
| Hex | #808080 |
| RGB | rgb(128 128 128) |
| HSL | hsl(0 0% 50%) |
| OKLCH | oklch(60.0% 0.000 none) |
| Nearest Tailwind color | olive-500 #7c7c67, 0.037 away in OKLab |
| White text | 3.95:1: AA fails, AAA fails, large text passes |
| Black text | 5.32:1: AA passes, AAA fails, large text passes |
About gray
A medium gray is the plain description of gray: OKLCH lightness 60.0%, chroma 0.000, no hue. CSS accepts two spellings for it, gray and grey, with the same value; grey leads to this page. It is one of the 16 named colors that CSS Color 4 traces to the VGA palette, by way of HTML; most of the others came from the X11 color system. CSS Color 4 itself points out that darkgray is lighter than gray: in OKLCH lightness, 73.5% against 60.0%.
HSL calls its lightness 50%, OKLCH 60.0%: 10 points between a formula and a measure of what the eye sees. The closest CSS named color is slategray (#708090), 0.032 away in OKLab: near, and still a visible step from it side by side.
Black text on gray reaches 5.32:1, enough for WCAG AA body text but short of AAA's 7:1; white text gets 3.95:1. In the hue-sorted table of named colors it sits between darkgray and dimgray.
In Tailwind CSS 4.3.3 the nearest default color is olive-500 (#7c7c67), 0.037 away in OKLab; for the exact color, an arbitrary value such as bg-[#808080] works.
Tints and shades
- #e9e9e9
- #d3d3d3
- #bdbdbd
- #a9a9a9
- #949494
- #808080
- #636363
- #484848
- #2e2e2e
- #161616
- #030303
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
- #808080
- #23160b
- #bcc6ed
- #36585f
- #fff1e4
Recolor's generator, with gray locked as swatch 1 and the seed taken from its hex, drew a split-complementary palette, built on the two hues beside its opposite: #23160b, #bcc6ed, #36585f, #fff1e4. Open it in Recolor.
Using gray
As a text color, gray on a black page gives the same 5.32:1.
.notice {
background-color: gray; /* #808080 */
color: black; /* 5.32:1 */
}Common questions
Does white text pass WCAG AA on gray?
No. White text measures 3.95:1 on gray, under AA's 4.5:1; black text measures 5.32:1 and passes.
Can gray be written in OKLCH?
Yes: oklch(60.0% 0.000 none), computed from #808080. A named color is an sRGB color, so its OKLCH value converts back to the same hex.
Is there a named color close to gray?
Yes: slategray (#708090) is the nearest, 0.032 away in OKLab, then lightslategray at 0.038.