Color contrast is not optional

A design trend with a cost

For several years, low-contrast text was fashionable. Secondary labels faded to a pale gray, placeholder text nearly vanished, and buttons wore thin outlines in colors chosen to feel calm. In a design tool on a calibrated monitor, the result looked refined. On a phone in afternoon sunlight, a lot of it disappeared.

The numbers

The Web Content Accessibility Guidelines define contrast as a ratio between the relative luminance of two colors. The thresholds are simple:

• 4.5 to 1 for normal body text.
• 3 to 1 for large text, roughly 24 pixels regular or 19 pixels bold.
• 3 to 1 for meaningful graphics and the boundaries of interactive controls.

These are minimums, not goals. Text that just clears the threshold is readable; it is not comfortable.

Who benefits

It is tempting to think of contrast as a concern for a small group of users with low vision. In practice, everyone has low vision sometimes: in bright light, on a dim screen with the battery saver on, through a cracked display, or simply after a long day. Older readers, who make up a growing share of the web, lose contrast sensitivity gradually and often do not notice it themselves.

Checking your palette

Build the check into the palette rather than into each screen. When you define your color tokens, record which pairs are allowed to sit on top of each other and verify each pair once. A designer choosing "secondary text on surface" should never have to wonder whether the combination passes.

Dark mode needs its own check

Inverting a light palette rarely produces a good dark one. Saturated colors that read well on white can vibrate on black, and grays that were comfortably distinct in light mode can collapse into one another. Verify the dark palette as its own system.

Beyond text

Contrast matters for:

1. Focus rings, which must be visible against every background they can appear on.
2. Form field borders, which tell people where to tap.
3. Chart series, which must be distinguishable without relying on hue alone.
4. Icons that carry meaning without a label.

The quiet benefit

Teams that adopt strict contrast rules often find their designs improve in ways unrelated to accessibility. Hierarchy has to come from size, weight, and spacing instead of from fading things out, and that forces clearer decisions about what actually matters on the page. Pale gray was frequently a way of avoiding that decision.

Start today

Pick the five most common text and background pairs in your product, measure them, and fix the ones that fail. It is an afternoon of work, and it improves the experience for every single reader.