The gray that looked fine

When this site moved to English, I added a small tool that checks the contrast between a text color and a background color against the WCAG 2 thresholds. The first thing I ran through it was the site itself.

The secondary text, the gray used for dates and captions, was #777777 on a background of #faf9f6. It looked fine. It measured 4.25:1. WCAG AA asks for at least 4.5:1 for normal-size text, so it failed.

Why it was easy to miss

#777 is a common choice for "quiet but readable" text, and on pure white it comes close: 4.48:1. That is still just under 4.5, but close enough that it reads as a safe default.

The better-known safe value is #767676, which gives 4.54:1 on white and is often quoted as the lightest gray that passes there. But this site does not use pure white. The background is a warm off-white, slightly darker than white, and that lowers contrast with every gray. On #faf9f6, #767676 measures 4.31:1 and fails. The lightest neutral gray that passes on this background is #737373, at 4.50:1.

So a rule of thumb that is correct on one background quietly stops being correct on another. Nothing about the page looked wrong. The only way to find out was to compute it.

What changed

I darkened the secondary text to #6b6b6b, which gives 5.06:1, leaving some margin instead of sitting exactly on the line. The dark theme was already fine: #999999 on #1b1b1a is 6.05:1.

How the number is computed

The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker color. Relative luminance converts each sRGB channel to linear light, then weights them 0.2126 red, 0.7152 green, 0.0722 blue. Green dominates, which is why a background that is only a little warmer and darker than white can move the result this much. I checked the tool's numbers against an independent calculation before trusting them; black on white gives exactly 21:1, as it should.

The contrast checker is on the tools page if you want to test your own colors.