Why contrast matters

Readability isn't a matter of taste — it's a measurable property of two colors. When the text and its background are too close in brightness, your eyes work harder, and some people can't read it at all.

Good contrast is also quietly good for business: buttons that are easy to read get clicked more, and forms people can actually read get completed more often.

The WCAG ratios, briefly

The Web Content Accessibility Guidelines boil contrast down to a number — the ratio between two colors' luminance. The two numbers that matter:

  • 4.5:1 — the minimum for normal body text.
  • 3:1 — the minimum for large text (18px+ or 14px bold).

These aren't arbitrary. They're the point where most people — including those with low vision — can read without strain.

How to check your colors fast

You don't need to do the math by hand. There are two fast paths:

  • A contrast checker — drop in a foreground and background color, and it returns the ratio plus a pass/fail. Offset Studio's Contrast Checker does exactly this, live.
  • A mental shortcut — if you have to squint at the screen to tell where the text ends and the background begins, the ratio is probably failing.

Three common contrast mistakes

Most contrast problems come from the same few habits:

  • Grey text on grey backgrounds — the classic "disabled" look, applied everywhere by default.
  • Accent colors as text — a warm orange that works as a fill is often too light to read as body copy.
  • White-on-image — text placed over a photo with no scrim or overlay underneath.

Fixing low-contrast pairs

The fixes are usually small. Here's what actually works:

  • Darken the text — instead of grey-on-grey, step the text one shade darker than you think you need.
  • Reserve accent for accents — use brand colors for links and highlights, not for paragraphs.
  • Add a scrim — when text sits on an image, a dark gradient behind it restores readability without killing the photo.

Run every new color pair through a contrast check before you ship it. It takes five seconds and it's the difference between a design that looks good and one that everyone can actually use.