No Gradient Text
NEVER: Use `background-clip: text` (or `-webkit-background-clip: text`) with a gradient background and a transparent text color — the glyphs then have no color, so the selection highlight paints behind invisible letters and forced-colors mode can erase the heading entirely. Set one solid color and carry emphasis with weight or size.
Set headings in a single solid color and carry emphasis with weight or size, not a clipped gradient
Bad
Good
Why it matters
The detector looks for `background-clip: text` (or its `-webkit-` alias) paired with a gradient background and a transparent text color. The gradient is painted as the element's background and clipped to the glyphs, which means the text itself has no color: the selection highlight paints behind transparent letters and the words disappear while selected, and forced-colors mode strips the background image so the heading can vanish entirely.
The hue carries no information — it never encodes state, importance, or grouping — so a solid color plus a heavier weight or a larger size says the same thing without breaking selection and high-contrast users.