Contrast Minimum

title: "Contrast Minimum — SC 1.4.3" weight: 14 description: "Learn WCAG Success Criterion 1.4.3 Contrast Minimum: 4.5:1 for normal text and 3:1 for large text, exceptions for incidental text and logotypes, and how to test and remediate contrast failures." date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, color-contrast]

WCAG Success Criterion 1.4.3 Contrast Minimum requires that text and images of text have a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, with exceptions for incidental text, decorative text, and logotypes.

## What You'll Learn

You will understand SC 1.4.3 requirements, exceptions, how to test compliance, and how to fix contrast failures for text elements.

## Why It Matters

SC 1.4.3 is one of the most commonly failed WCAG criteria. Lawsuits frequently cite contrast failures because they affect readability for a large portion of users and are easy to verify.

## Real-World Use

A news site uses gray text (#888) for bylines and dates. A user with low vision cannot read the article metadata. An accessibility audit flags this as a SC 1.4.3 violation. The fix is a simple color change to #555, which passes AA.

## SC 1.4.3 Evaluation

```mermaid
flowchart TD
  A[Text Element] --> B{Is it incidental?}
  B -->|Yes, decorative only| C[Exempt]
  B -->|No| D{Is it a logotype?}
  D -->|Yes| E[Exempt]
  D -->|No| F{Is it large text?}
  F -->|Yes| G[3:1 minimum]
  F -->|No| H[4.5:1 minimum]

Testing SC 1.4.3

Use a contrast checker to verify every text element passes the applicable threshold.

<!-- SC 1.4.3 examples -->
<!-- FAIL: 2.8:1 against white -->
<p style="color: #999;">Insufficient contrast text</p>

<!-- PASS AA: 5.1:1 against white -->
<p style="color: #555;">Sufficient contrast for normal text</p>

<!-- PASS large text exemption -->
<p style="color: #777; font-size: 24px;">
  Large text at 3.9:1 -- passes AA large text exemption
</p>

<!-- Exempt: decorative text in a logo -->
<span class="logo-text">CompanyName</span>

/* SC 1.4.3 compliant text styles */
.text-body {
  color: #333;
  background: #fff;
  /* 12.6:1 -- passes AAA */
}

.text-secondary {
  color: #555;
  background: #fff;
  /* 5.1:1 -- passes AA */
}

.text-meta {
  color: #666;
  background: #fff;
  /* 4.6:1 -- passes AA */
}

.text-disabled {
  color: #999;
  background: #fff;
  /* 2.8:1 -- fails AA, but exempt for disabled */
}

// SC 1.4.3 compliance checker
function checkSC143(element) {
  const style = window.getComputedStyle(element);
  const color = style.color;
  const bgColor = style.backgroundColor;
  const fontSize = parseFloat(style.fontSize);
  const fontWeight = parseInt(style.fontWeight);
  const text = element.textContent.trim();

  // Check exemptions
  if (!text || element.closest('[role="presentation"]')) {
    return { status: 'exempt', reason: 'decorative' };
  }

  const ratio = getContrastRatio(color, bgColor);
  const isLarge = fontSize >= 24 || (fontSize >= 18.7 && fontWeight >= 700);
  const passes = isLarge ? ratio >= 3 : ratio >= 4.5;

  return {
    element: element.tagName,
    text: text.slice(0, 30),
    ratio: ratio.toFixed(1),
    isLarge,
    passes,
    threshold: isLarge ? '3:1' : '4.5:1'
  };
}

Common Mistakes

• Applying the 4.5:1 threshold to large text that only needs 3:1
• Not checking text on hover, focus, or active states
• Forgetting that placeholder text is not exempt
• Assuming disabled text is always exempt
• Not testing text on image backgrounds
• Ignoring text in components like tooltips and popovers
• Using opacity to reduce text visibility without changing contrast

Practice and Challenge

Practice 1: Determine if #777 on #fff passes AA for 16px text. Practice 2: Find three text colors on your site that pass SC 1.4.3. Practice 3: Find one text color that fails and suggest a fix. Practice 4: Test a button label in both default and hover states. Practice 5: Check if a disabled input label is exempt from contrast requirements.

Challenge: Create a SC 1.4.3 audit checklist for a form page. Include all text elements: labels, inputs, placeholders, helper text, error messages, buttons, and links. For each, document the color pair, contrast ratio, applicable threshold, and pass/fail status.

FAQ

Mini Project

Create a SC 1.4.3 testing tool that scans a web page, identifies all text elements, extracts their computed color and background color, calculates contrast ratios, and reports which elements pass or fail the applicable threshold. Include exemptions for disabled and decorative elements.

What's Next

Contrast Enhanced - SC 1.4.6 covers the stricter AAA contrast requirements.