Does placeholder text need 4.5:1 contrast? Yes, while disabled controls are exempt

By TechCompare · Updated · How we check

Placeholder text needs 4.5:1 against the field it sits in, just like other text. Disabled controls are exempt only when they really can't be used.

Placeholder text is easy to make pale, since it looks like a hint, but WCAG treats it as text. Disabled controls are a different case. This page covers both cases, with the grays that pass on white and on a light fill, and the ones that fail.

WCAG level
WCAG AA
Minimum contrast (4.5:1+)
Example ratio
2.6:1
#A0A0A0 on #FFFFFF
Category
WCAG Rules
Accessibility knowledge base

How this is calculated

The Understanding page for 1.4.3 says the criterion "applies to text in the page, including placeholder text." Measure a placeholder against the field's own background, not the page color behind the field. A #A0A0A0 placeholder on white gives 2.61:1. It fails 4.5:1. The gray #757575 gives 4.61:1 on white, and that passes. A light fill is a second test. On #F5F5F5, #757575 gives 4.23:1, and that fails, so a check on white isn't enough. For a field that might sit on white or on #F5F5F5, try #6E6E6E. It gives 5.10:1 on white and 4.68:1 on the light fill. It passes 4.5:1 on both.

The text rule has an exception for disabled controls. Its "Incidental" list says text that is "part of an inactive user interface component" has "no contrast requirement." The Understanding page adds that user interface components "not available for user interaction (e.g., a disabled control in HTML)" are not required to meet contrast requirements, so a disabled button's gray label is exempt. A control that only looks disabled but still takes clicks isn't inactive, so its label keeps the normal rule.

Verdict

If you can't tell whether a control is inactive, meet 4.5:1 anyway. Don't rely on a placeholder to label the field, since it hides once someone starts typing. Keep a visible label outside the field instead. That's advice, not a WCAG rule. For the labeling rule itself, see Success Criterion 3.3.2.

More Contrast scenarios

Frequently asked questions

Does placeholder text need 4.5:1 contrast?
Yes. WCAG's text rule covers placeholder text, so it needs 4.5:1 against the field's own background. Check the fill inside the field, because a light fill can fail a gray that passed on white.
Can I use opacity to make a disabled button?
Opacity alone doesn't make a control inactive. What counts is whether the control can be used, such as an HTML disabled button. Fading a button people can still click leaves its label under the normal rule. WCAG sets no contrast requirement for a truly disabled button, but this part is advice: keep the faded label readable, so people can see the control and understand why it's unavailable.
What about the text inside a disabled input?
Text inside a disabled input is generally part of the inactive component, so it's exempt. A label next to the field usually sits outside the input, though, so it's ordinary page text and still needs 4.5:1. That's a reading of the exemption, not a W3C example, so check the label against its background.
How do I fix a placeholder that fails?
Start with the fill the placeholder sits on, then darken the gray until it passes against that fill. Test every fill the field can show, such as a focused or error state, and leave a little margin past 4.5:1 so small color changes don't push it under. Then keep a visible label outside the field.