Color contrast on a landing page: the WCAG ratio, and the trap of fashionable light gray

Light gray has been everywhere in interface design for about a decade: subheads in #999 on a white background, captions in #AAAAAA, placeholders barely visible at all. The result reads as refined in a design review, on a brand-new screen, under a dimly lit office light — and becomes unreadable in bright sunlight on a phone, on a poorly calibrated monitor, or for a visitor whose eyesight has simply changed with age. Insufficient contrast never throws an error, never shows a visible bug: it silently strips part of the message from part of your traffic, much like the color blindness we cover in our article on color and color blindness — except here, everyone is affected to some degree, not just an identifiable minority.

What research says about contrast and reading

The most cited study on the topic remains Richard H. Hall and Patrick Hanna's, "The Impact of Web Page Text-Background Colour Combinations on Readability, Retention, Aesthetics and Behavioural Intention", published in 2004 in Behaviour & Information Technology. A hundred and thirty-six participants viewed real web pages rendered in several text/background color combinations. The central finding: higher contrast produces significantly better perceived readability, with no measurable effect on content retention — contrast doesn't make people remember more, it makes them read more easily. The authors also found that a pleasing aesthetic correlates with stronger purchase intent, which rules out the idea that minimal contrast is a neutral trade-off for appearance: unreadable text isn't rescued by a pretty gray gradient.

A second, design-independent factor makes the problem worse over time: contrast sensitivity declines mechanically with age. A landmark study by Hiroshi Akutsu, Gordon E. Legge, John A. Ross, and Karen J. Schuebel, "Psychophysics of Reading — X. Effects of Age-Related Changes in Vision", published in 1991 in the Journal of Gerontology, shows that the loss of contrast sensitivity accelerates markedly after age 40-50, with a direct impact on reading speed for low-contrast text. For a coach's, therapist's, or training organization's landing page whose audience skews past that age, a light-gray subhead isn't a neutral aesthetic detail — it's text some visitors physically have to squint to decipher, at the exact moment they're being asked to read an offer and decide.

The WCAG ratio, in practice

The Web Content Accessibility Guidelines (WCAG) turn readability into a calculable number: the contrast ratio between a text color and its background color, ranging from 1:1 (no contrast, two identical colors) to 21:1 (maximum contrast, pure black on pure white). The AA level — the one most audits rely on, including our own recommendations in the guide to RGAA/WCAG accessibility — requires 4.5:1 for regular text and only 3:1 for large text (24px and up, or 19px bold) and for interface elements like field borders or active icons. The stricter AAA level raises that to 7:1 for regular text.

What most surprises people once they actually test their colors: the scale isn't intuitive. A gray of #767676 on white just barely reaches 4.54:1 — compliant, but right at the edge; the widely used #999999 tops out at 2.85:1, well under the threshold, even though the visual difference between the two grays looks minimal to the eye. Conversely, darkening a brand color by a few points is often enough to clear a threshold without the visual identity changing noticeably to a visitor who isn't comparing both versions side by side.

Where contrast breaks most often on a landing page

• Light-gray subheads and captions — the most widespread trend, often inherited from a Figma mockup designed on a calibrated screen under ideal conditions.
• Text placed over a hero photo — a white headline that becomes unreadable the moment sky, a light garment, or an overexposed patch of the photo passes underneath it; a case covered in detail in our article on hero image art direction, where mobile cropping shifts the text precisely into unpredictable areas of the image.
• Placeholders used as labels — a form field whose only cue is light-gray text inside it, which disappears the moment someone starts typing, on top of often failing the contrast threshold on its own.
• "Ghost" buttons — a thin outline in a tone close to its background, elegant in a static mockup, hard to spot in real use.
• Dark mode bolted on afterward — a palette designed for a light background, where mid-gray text that barely passed on white becomes noticeably insufficient once inverted onto a dark background; our article on dark mode and conversion covers this specific trap.
• The footer — statistically the most sacrificed area of all: legal links and notices in very light gray on a background just slightly darker, a choice that hurts not just perceived aesthetics but, quite concretely, access to the legal notices themselves.

Checking it in a few minutes, no expertise required

Three free tools are enough to audit an entire page before publishing:

1. WebAIM's contrast checker — enter the two colors (text and background) and the tool returns the ratio directly, along with AA/AAA compliance for regular and large text.
2. Chrome DevTools' Accessibility panel — inspecting a text element shows the color picker computing the contrast ratio live, and suggests the closest shade that clears the AA threshold.
3. A Lighthouse audit, built into the same browser, which automatically lists every insufficient text/background pair across the whole page in one click, with no need to test element by element.

Fixing it without breaking your brand identity

The reflex that most often blocks a fix is the fear of losing brand identity by darkening a color. In practice, the gap needed to clear a contrast threshold is almost always smaller than feared — a few points of lightness usually do it, rarely a hue shift noticeable on its own. A few concrete levers: darken a brand color slightly rather than lighten it when it's used as text on a light background; add a dark gradient (scrim) under a headline placed over an image instead of relying on the photo itself to stay dark enough everywhere; reserve the palette's lightest gray for purely decorative elements, never for text carrying information; and check every state of a component, not just its default one — a placeholder, a disabled label, or a "coming soon" badge often fail the threshold even when the main text passes it.

Common mistakes

• Judging contrast by eye on your own screen — a designer's monitor, often high-end and calibrated, hides problems that become glaring on an entry-level phone outdoors.
• Only testing the main CTA — as with color blindness, the worst offenders lie elsewhere: subheads, placeholders, the footer, secondary badges.
• Confusing contrast with font size — enlarging light-gray text makes it more visible without fixing the underlying problem; the WCAG threshold does drop for large text (3:1 versus 4.5:1), but it's still a real requirement.
• Relying only on a color-blindness simulator — useful for hue discrimination, it doesn't measure the luminosity ratio that defines contrast under WCAG; the two checks are complementary, not interchangeable.

Fixing insufficient contrast costs almost nothing once spotted — a few points of lightness on a color variable, tested in thirty seconds with an online checker — and benefits your whole traffic, not just visitors with a visual impairment. The 10 LanderKit templates (€89 per template, €229 for the full pack) default to text/background combinations that clear the AA threshold, including on subheads and form placeholders — a baseline you can check directly by adjusting brand colors on the coach & consultant demo or the SaaS waitlist demo.