Skip to content
UIGrammer
EN 中文

Anti-pattern · Color · High

Gray-on-Gray Text

Gray-on-gray text is a low-contrast body style where the copy sits only a few shades from its background and fails contrast checks.

The tell

Body or label text where you have to lean in. Anything below 4.5:1 for normal-size copy.

Why it happens

Low contrast reads as "designed" in a screenshot because it removes visual noise, so models optimise for it. It also makes weak hierarchy invisible: when everything is mid-gray, nothing leads.

The rule

Body text sits at near-full contrast; only true metadata goes mid-gray — and never below 4.5:1.

  1. Set body copy to a near-black neutral on light surfaces, near-white on dark.
  2. Reserve one mid-gray step for timestamps and captions only.
  3. Run a contrast check on the smallest text on the page first.

What is a Gray-on-Gray Text?

Generated layouts love a soft, low-contrast palette: #999 text on a #f4f4f5 card, or light gray on white. It photographs beautifully and reads terribly. Body text is not a texture — it is the thing people came for. Set body copy at or near full contrast against its surface, and reserve mid-grays for genuinely secondary metadata.

Fix prompt

Paste this after your existing prompt to strip the pattern from the result.