WCAG 1.4.3 Contrast Minimum: How to Fix Low Color Contrast

Last updated: 2026-03-22

Level AA Perceivable WCAG 1.4.3

What This Criterion Requires

WCAG 1.4.3 requires that text and images of text have a contrast ratio of at least 4.5:1 against their background, with large text (18pt or 14pt bold) requiring at least 3:1. This criterion ensures that text is readable by people with moderately low vision who do not use contrast-enhancing assistive technology. The contrast ratio is calculated using the relative luminance of the foreground and background colors. Incidental text (inactive UI components, purely decorative text, text not visible to anyone) and logotypes are exempt. Common failures include light gray text on white backgrounds, text overlaid on images without sufficient contrast treatment, placeholder text with insufficient contrast, and brand colors that prioritize aesthetics over readability. Meeting contrast requirements improves readability for all users, particularly in bright ambient lighting conditions or on low-quality screens.

Why It Matters

Color contrast is essential for readability. Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and many more people experience reduced contrast sensitivity as they age. Low contrast text forces users to strain their eyes, increases reading fatigue, and can make content completely illegible in challenging viewing conditions such as direct sunlight on a mobile screen. Beyond vision impairments, anyone using a low-quality monitor, a cracked phone screen, or working in a brightly lit environment benefits from adequate contrast. Poor contrast is consistently one of the top accessibility failures detected across the web. The WebAIM Million study consistently finds that low contrast text is present on over 80% of home pages tested. Fixing contrast issues is often straightforward and requires minimal effort, making it one of the highest-impact improvements you can make for both accessibility and overall user experience.

Common Failures and How to Fix Them

Light gray text on white background

Body text or secondary text uses a light gray color that fails to meet the 4.5:1 ratio against a white background. This is extremely common in modern minimalist design trends.

Inaccessible 
<p style="color: #999999; background-color: #ffffff;">
  This gray text has a contrast ratio of only 2.85:1
</p>
Accessible 
<p style="color: #595959; background-color: #ffffff;">
  This darker gray text has a contrast ratio of 7.0:1
</p>

Placeholder text with insufficient contrast

Form input placeholder text uses the browser default light gray or a custom light color that does not meet contrast requirements. While placeholder text is technically exempt if not relied upon, it should still be readable.

Inaccessible 
<style>
  input::placeholder {
    color: #c0c0c0; /* 1.6:1 ratio on white */
  }
</style>
<input type="text" placeholder="Enter your name">
Accessible 
<style>
  input::placeholder {
    color: #767676; /* 4.54:1 ratio on white */
  }
</style>
<input type="text" placeholder="Enter your name">

Text on background images without overlay

White or light-colored text is placed directly on a photograph or gradient background without a semi-transparent overlay to guarantee sufficient contrast across the entire image area.

Inaccessible 
<div class="hero" style="background-image: url('hero.jpg');">
  <h1 style="color: #ffffff;">Welcome</h1>
</div>
Accessible 
<div class="hero" style="background-image: url('hero.jpg'); position: relative;">
  <div style="position: absolute; inset: 0; background: rgba(0,0,0,0.6);"></div>
  <h1 style="color: #ffffff; position: relative;">Welcome</h1>
</div>

How to Test

  1. Use an automated tool like axe DevTools, WAVE, or Lighthouse to scan for contrast failures across the page.
  2. Use a contrast checker (WebAIM Contrast Checker, Colour Contrast Analyser) to manually verify specific color combinations, especially on hover/focus states and overlaid text on images.
  3. Test the page with browser zoom at 200% and Windows High Contrast Mode to ensure content remains readable.
  4. Check placeholder text, disabled button text, and other secondary text elements that automated tools may miss.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

Further Reading

Related WCAG Criteria