#808080: CSS gray color codes, contrast and shades

CSS gray names don't line up the way they read. The name gray comes from the old VGA palette, while darkgray, #A9A9A9, comes from the X11 list. So darkgray is the lighter of the two, at an OKLCH lightness of 73.48% against 59.99%. The CSS spec itself points this out.

Halfway in code isn't halfway in light. The channel value sits at about the middle of its range, but screens don't turn values into light in a straight line, so #808080 gives off less than a quarter of the light of white. That's also why white text on it only reaches 3.95:1.

For text on it, WCAG 2 picks black at 5.32:1 over white at 3.95:1. APCA, a newer method that isn't part of any WCAG standard, leans the other way, at Lc -72.4 for white and Lc 37.2 for black. If you want gray body text on white that passes AA, #767676 is the lightest neutral gray that does, at 4.54:1. #777777 already falls short at 4.48:1.

Use #808080 for borders, dividers, icons and input outlines on white. At 3.95:1 it clears the 3:1 that WCAG 2.1 asks for parts of a control people need to see. Keep it off normal size text on white, where it fails AA.

One step down the scale, #6A6A6A, gets white text and text on white to 5.41:1 and passes AA. The lighter steps fall under 3:1 against white, so use them for backgrounds and disabled states, not for borders that have to show. Click a shade to open it in the Color Picker.