Low Color Contrast

Your text blends into the background like camouflage. Here's how to make sure everyone can actually read your site.

What is this?

Try reading light gray text on a white background in direct sunlight. Painful, right? That is what low color contrast feels like — except for some of your visitors, it feels like that all the time. Color contrast is the difference in brightness between your text and its background. When the difference is too small, text becomes hard or impossible to read.

Why it matters

For your visitors: About 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Add in aging eyes, low-quality screens, and outdoor glare, and suddenly a huge chunk of your audience is struggling to read your content. Low contrast does not just affect "blind people" — it affects almost everyone in some situations.
For your business: If visitors cannot read your call-to-action, they will not click it. Low contrast directly hurts conversion rates, time on page, and trust. Your beautiful gray-on-slightly-less-gray design might look "clean" to you, but it is invisible to many.
The standard: WCAG 1.4.3 (Contrast Minimum) requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular). These numbers are not arbitrary — they are based on research into human vision.

Sufficient contrast (7.5:1)

<p style="color: #1a1a1a; background-color: #ffffff;">
  This dark text on a white background is easy to read.
</p>
<!-- Ratio: 17.4:1 — well above the 4.5:1 minimum -->

Failing contrast (2.1:1)

<p style="color: #aaaaaa; background-color: #ffffff;">
  This light gray text on white is very hard to read.
</p>
<!-- Ratio: 2.3:1 — fails WCAG minimum -->

How to fix it

React / Next.js

Define your colors with sufficient contrast from the start. If you are using Tailwind CSS, stick to color pairings that meet the ratio.

// src/components/hero.tsx
export function Hero() {
  return (
    <section className="bg-neutral-950 px-6 py-20">
      {/* White on near-black: ~19:1 ratio — excellent */}
      <h1 className="text-4xl font-bold text-white">Build better products</h1>

      {/* Careful with muted text — check the ratio */}
      {/* neutral-400 on neutral-950 is about 7:1 — passes */}
      <p className="mt-4 text-lg text-neutral-400">Ship with confidence, not guesswork.</p>

      {/* Buttons need contrast too — text vs button background */}
      <button className="mt-8 bg-white px-6 py-3 font-semibold text-neutral-950">
        Get started
      </button>
    </section>
  );
}

Quick contrast check: If you are working in Tailwind, avoid these common failing combos on white backgrounds: text-gray-400, text-gray-300, text-slate-400. Instead use text-gray-600 or darker.

Plain HTML

<style>
  /* Define colors as CSS custom properties for consistency */
  :root {
    --text-primary: #1a1a2e; /* Use on light backgrounds — 15:1 ratio */
    --text-secondary: #4a4a5a; /* Muted but readable — 7.5:1 ratio */
    --text-on-dark: #f0f0f0; /* Use on dark backgrounds — 15:1 ratio */
    --bg-light: #ffffff;
    --bg-dark: #0a0a0f;
  }

  body {
    color: var(--text-primary);
    background-color: var(--bg-light);
  }

  .muted {
    /* NOT #aaa or #999 — those fail on white */
    color: var(--text-secondary);
  }
</style>

<h1>Welcome</h1>
<p class="muted">This secondary text is still readable.</p>

How to check contrast: Use the free WebAIM Contrast Checker. Paste your foreground and background colors and it tells you instantly if you pass. Browser DevTools also show contrast ratios when you inspect text elements.

High impact — accessibility~2 paws

Low contrast is the single most common accessibility failure on the web. The cat sees this everywhere and has zero patience for "but it looks more elegant" as an excuse. Readable beats pretty every time.

How the cat scores this

The cat analyzes every text element on your page and computes the contrast ratio between the text color and its background. Normal-sized text must meet a 4.5:1 ratio. Large text (18px bold or 24px regular and above) must meet 3:1. The cat also checks text on images and gradients by sampling the background color behind each text element. Failures are ranked by severity — a 2:1 ratio on body text is worse than a 4:1 on a large heading.