1.4.3 Contrast (Minimum)

Level: AA | Principle: Perceivable | Since: WCAG 2.0 | Automation: Partial (axe-core)

What This Means

Text must have enough contrast against its background to be readable. The minimum contrast ratios are:

Normal text (under 18pt / 24px, or under 14pt / 18.5px bold): 4.5:1
Large text (18pt+ / 24px+, or 14pt+ / 18.5px+ bold): 3:1

Low contrast text is difficult to read for everyone, and impossible for users with low vision or color deficiencies.

Who This Affects

Users with low vision — reduced contrast sensitivity is extremely common
Older adults — contrast sensitivity decreases with age
Everyone in bright sunlight — low contrast text washes out on mobile screens
Users with color vision deficiency — affects ~8% of men

Common Pitfalls

1. Light gray text on white

/* Bad: #999 on #fff = 2.85:1 ratio (fails) */
p { color: #999999; }

/* Good: #595959 on #fff = 7.0:1 ratio (passes) */
p { color: #595959; }

2. Placeholder text with insufficient contrast

<!-- Bad: default placeholder color often fails contrast -->
<input placeholder="Enter your name">

Placeholder text must also meet contrast requirements.

3. Text over images without overlay

<!-- Bad: white text on a photo — contrast varies -->
<div style="background-image: url('photo.jpg')">
  <h2 style="color: white">Title</h2>
</div>

<!-- Good: add a semi-transparent overlay -->
<div style="background-image: url('photo.jpg')">
  <div style="background: rgba(0,0,0,0.6)">
    <h2 style="color: white">Title</h2>
  </div>
</div>

4. Disabled states that are too faint

Disabled elements are exempt from contrast requirements, but users still need to see them. Aim for at least 3:1.

How to Fix

Use a contrast checker to verify ratios. Adjust text color or background color until the ratio meets the minimum.

Quick reference for common backgrounds:

| Background | Minimum text color (4.5:1) | |------------|---------------------------| | White #fff | #595959 or darker | | Light gray #f5f5f5 | #545454 or darker | | Black #000 | #949494 or lighter |

How to Test

Open DevTools (F12), inspect a text element, and click the color swatch in the Styles panel. The contrast ratio is shown in the color picker tooltip.
Check normal text (under 18pt / 24px) for at least a 4.5:1 contrast ratio against its background.
Check large text (18pt+ / 24px+, or 14pt+ / 18.5px+ bold) for at least a 3:1 contrast ratio.
Inspect placeholder text, disabled-state text, and text over images or gradients, as these are commonly missed.
For text over images, use the DevTools eyedropper to sample the darkest and lightest areas behind the text and check both ratios.
Pass: All text meets the minimum contrast ratio (4.5:1 for normal text, 3:1 for large text) against its background.
Fail: Any text falls below the required contrast ratio, including placeholder text or text over variable backgrounds.

axe-core Rules

| Rule | What It Checks | |------|---------------| | color-contrast | Text elements meet minimum contrast ratio |

Note: axe-core cannot check text over background images, gradients, or dynamically colored backgrounds. Those are flagged as "needs review."

Tools

Check your colors with the A11y Scan Contrast Checker — supports solid colors, gradients, and image backgrounds.