← Back to Accessalyze

WCAG 1.4.3 Minimum Contrast Ratio Explained

WCAG 1.4.3 is consistently one of the most failed success criteria — present in over 80% of accessibility audits. Understanding exactly what it requires (and what it exempts) prevents both violations and unnecessary over-engineering.

Exact Requirements

What Is "Large Text"?

WCAG defines large text using CSS point sizes (pt), which map to pixels at 96dpi:

In practice:

• font-size: 24px; font-weight: 400 → large text (3:1 ratio allowed)
• font-size: 18px; font-weight: 700 → large text (3:1 ratio allowed)
• font-size: 18px; font-weight: 400 → NOT large text (4.5:1 required)
• font-size: 16px; font-weight: 700 → NOT large text (4.5:1 required)
• font-size: 14px; font-weight: 400 → NOT large text (4.5:1 required)

Exemptions (What 1.4.3 Does NOT Apply To)

• Decorative text — text that conveys no information and is purely ornamental
• Inactive/disabled UI components — disabled buttons, greyed-out form fields
• Logotypes — text in company logos or brand marks
• Images of text that are incidental — text in a photograph that's not the subject

Important: these exemptions are narrow. "Decorative" means truly no-information text. A product description, subheading, or link is not decorative even if visually subtle.

What 1.4.3 Does NOT Cover

WCAG 1.4.3 only covers text contrast. For non-text contrast (UI components, focus rings), see WCAG 1.4.11 (added in 2.1). For graphics needed to understand content, see 1.4.11 as well.

The Contrast Ratio Formula

// Relative luminance of a color
function getLuminance(r, g, b) {
  // Normalize to 0-1
  const rgb = [r, g, b].map(c => {
    c = c / 255;
    return c <= 0.03928
      ? c / 12.92
      : Math.pow((c + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
}

// Contrast ratio
function getContrastRatio(l1, l2) {
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

How Opacity Affects Contrast

Contrast is measured against the actual rendered color, not the CSS color value. If you use color: rgba(0, 0, 0, 0.5) on a white background, the effective color is #808080 (50% black blended with white) — which has only 3.95:1 contrast on white. Automated tools handle this correctly; manual calculators require you to compute the blended color first.

/* FAIL on white background: renders as ~#808080 = 3.95:1 */
p { color: rgba(0, 0, 0, 0.5); background: #fff; }

/* PASS: solid color with known ratio */
p { color: #595959; background: #fff; } /* 7.0:1 */

Testing 1.4.3 in Practice

1. Run Accessalyze to find all contrast failures on your live site automatically
2. For specific color checks, use the WebAIM Contrast Checker (enter hex values)
3. Use Chrome DevTools — hover over a color value in CSS to see its contrast ratio in a tooltip
4. Install the Colour Contrast Analyser desktop app to sample colors from your screen

Why 4.5:1? The Science Behind the Number

The 4.5:1 ratio was determined through psychophysical research on color vision deficiency. It approximates the vision loss of someone with moderately low vision (around 20/80) or someone with Deuteranopia (the most common form of color blindness). People with this degree of vision loss can read 4.5:1 contrast text without assistive technology.

← Back to Accessalyze · ← WCAG Color Contrast Overview