How to fix: Low contrast text detected

Contrast ratio measures how distinct your text color is from the color behind it, on a scale from 1:1 (identical, invisible) to 21:1 (pure black on pure white). WCAG Success Criterion 1.4.3 Contrast (Minimum) sets the Level AA floor: 4.5:1 for normal text and 3:1 for large text. Large text is defined as roughly 18pt and up (about 24px), or 14pt bold and up (about 18.66px bold), because bigger and heavier letterforms stay legible at lower contrast.

The ratio is computed from the relative luminance of the two colors using the sRGB formula, not by eyeballing them. Two colors that look fine to a designer on a calibrated monitor can still fail the math, which is why a real calculation matters. Light gray placeholder text on white, pale brand colors on tinted backgrounds, and white text over busy hero images are the usual offenders.

Hitting the threshold is almost always a small change: nudge the text darker, nudge the background lighter, or increase the font size and weight enough to qualify for the 3:1 large-text rule.

Low-vision users are the primary group, and that group is large: it includes people with reduced acuity, cataracts, glaucoma, and the gradual contrast-sensitivity loss that comes with aging. For them, text that is technically present can be effectively unreadable, forcing them to zoom, strain, or give up.

It also affects everyone in non-ideal conditions: bright sunlight on a phone screen, a dimmed laptop on battery, an old or cheap monitor, or a projector in a lit room. Good contrast is one of the few accessibility wins that visibly improves the experience for sighted users too.

Low color contrast is a Level AA failure under SC 1.4.3, and Level AA is the standard courts and the U.S. Department of Justice point to when applying the ADA to websites. Contrast is also one of the most frequently cited issues in the WebAIM Million report and in accessibility demand letters, precisely because it is so common and so easy for a plaintiff to document with a screenshot and a ratio.

Fixing contrast is high-leverage. It often touches a single design token (your body text color, your link color, a placeholder shade) and instantly resolves dozens of flagged instances across a site, while making the page measurably easier to read for every visitor.

1. Identify the text color and the actual background color it sits on (check the element and its ancestors, since background often comes from a parent).
2. Calculate the contrast ratio with a WCAG contrast tool rather than judging by eye.
3. If normal text is below 4.5:1, darken the text or lighten the background until it clears 4.5:1.
4. For headings or other large text, you only need 3:1, so increasing size and weight can also bring an element into compliance.
5. Fix the underlying CSS variable or design token where possible so every instance updates at once, then re-scan.

<p style="color: #9aa0a6; background-color: #ffffff;">
  Subscribe for product updates and tips.
</p>

<p style="color: #44474c; background-color: #ffffff;">
  Subscribe for product updates and tips.
</p>

AccessKnight reads the inline style attribute of each element to find a color value, then walks up the ancestor chain looking for an inline background-color or background; if none is found it assumes a white background. It parses both colors (hex, rgb, and named colors), computes the real WCAG contrast ratio using the sRGB relative-luminance formula, checks the inline font-size and font-weight to decide whether the text qualifies as large, and flags the element when the ratio falls under the 4.5:1 (normal) or 3:1 (large) threshold. Because it currently evaluates inline styles, colors set only in external or embedded stylesheets are reported via this rule less often, so pair the scan with a manual contrast spot-check on your stylesheet-driven text.