How to fix: low color contrast

What it looks like in the wild

Body text in pale gray on white, sale prices in faint red, focus rings invisible against background.

The screen-reader user, keyboard user, or low-vision user encountering this issue does not get an error message. The page just stops working for them. Which is why this kind of bug rarely shows up in your error tracker; it shows up in support tickets, lawsuits, and abandoned conversions.

Why it fails WCAG

Text must hit 4.5:1 (regular) or 3:1 (large). UI components and graphical info need 3:1.

The wrong pattern (avoid)

body { color: #aaa; background: #fff; } /* 2.3:1, fails */

The right pattern (copy this)

body { color: #525252; background: #fff; } /* 7.4:1, AAA */
.muted { color: #6b7280; } /* 4.6:1, AA */

Notes from real audits

• Use a contrast checker; never trust the eye.

• Test brand colors against your full palette before standardising.

• Dark mode often regresses light-mode wins — audit both themes.

How to verify the fix

Shipping the change is not the same as passing 1.4.3 and 1.4.11. Re-run these checks against the page you edited before you close the ticket.

• Use a contrast checker on every text/background combination.

• Run an automated audit — contrast is deterministically computable.

• Test in dark mode separately; many themes pass light but fail dark.

• Measure UI element borders with a contrast checker.

• Tab through the page; the focus ring must be clearly visible on every background.

What 1.4.3 and 1.4.11 require

1.4.3 Contrast (Minimum) (Level AA, Perceivable): Body text must have a contrast ratio of at least 4.5:1 against its background. Large text (18pt+, or 14pt bold) needs at least 3:1. Low contrast is the single most-failed accessibility criterion online — 80%+ of homepages fail it. Users with low vision, color vision deficiencies, age-related sight loss, or who view screens in bright sunlight all rely on contrast to read.

1.4.11 Non-text Contrast (Level AA, Perceivable): UI components (form borders, focus indicators, icons that convey meaning) must have at least a 3:1 contrast ratio against adjacent colors. You cannot interact with a button you cannot see. Subtle UI is fashionable but excludes users with low vision from finding form fields, focus rings, and active states.

• Light gray placeholder text on white (e.g. #999 on #fff = 2.8:1)

  1.4.3

• Brand-colored buttons that fail against the page background

  1.4.3

• Sale prices in pale red on white

  1.4.3

• Form input borders too faint to distinguish from background

  1.4.11

• Focus rings with insufficient contrast (light blue on white)

  1.4.11

• Icon-only navigation with low-contrast icons

  1.4.11

Priority: Serious

This is one of the findings that shows up in demand letters, because the barrier it creates is total rather than inconvenient: the affected user cannot complete the task at all. Treat it as a release blocker, not a backlog item.

Because the cause is almost always a shared component rather than a single page, fix it where the component is defined and re-scan the whole site. Record 1.4.3, 1.4.11 on the ticket verbatim: that string is what an auditor, a procurement questionnaire or a regulator will search for.