Placeholder Text Contrast Ratio WCAG Checker

Check Placeholder Text Contrast

Placeholder text is one of the most common WCAG failures on the web. The default light gray that browsers apply to placeholders almost always falls below the 4.5:1 contrast ratio required by WCAG AA. This example tests a typical placeholder gray (#9ca3af) on a white background.

Why Placeholder Text Fails More Than You Think

Most CSS frameworks ship placeholder colors that fail WCAG. Tailwind’s default placeholder-gray-400 (#9ca3af) gives only 3.14:1 contrast on white. Bootstrap’s .form-control::placeholder uses rgba(0,0,0,.4) which translates to roughly #666666, barely passing at 5.74:1. Material UI’s default placeholder fails in dark mode.

The problem is compounded because placeholder text is typically smaller than body text (14-16px), meaning it falls under the stricter 4.5:1 requirement rather than the 3:1 large text threshold.

Placeholder Contrast Examples

The Fix Is One Line of CSS

Most placeholder contrast issues come down to one CSS property. Instead of relying on the browser default or framework default, override it explicitly:

/* Fails WCAG AA */
input::placeholder {
  color: #9ca3af;
}

/* Passes WCAG AA */
input::placeholder {
  color: #6b7280;
}

In Tailwind, use placeholder-gray-500 instead of placeholder-gray-400:

<!-- Fails -->
<input class="placeholder-gray-400" />

<!-- Passes -->
<input class="placeholder-gray-500" />

How to Use

1. Enter your placeholder text color in the foreground field
2. Enter the input background color in the background field
3. Check if the ratio meets 4.5:1 for WCAG AA
4. If it fails, use the suggestions to find a darker shade that passes
5. Copy the updated CSS for your input styles

Beyond Color: Placeholder Accessibility

Contrast is one part of placeholder accessibility. WCAG also requires that placeholder text is not the only way to label an input (SC 1.3.1), and that the input has an accessible name (SC 4.1.2). Always pair placeholder text with a visible label or aria-label. The Regex Tester can help test input patterns, but the visual accessibility of the input itself is a separate concern.