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.
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
Related guides
Frequently asked questions
Does placeholder text need 4.5:1 contrast?
Can I use opacity to make a disabled button?
What about the text inside a disabled input?
How do I fix a placeholder that fails?
Related tools
Color Picker
Pick colors, convert between HEX, RGB, HSL, HSV, OKLCH and CMYK, and find the nearest CSS and Tailwind color.
Use toolJSON Formatter
Validate, format, and minify JSON. Browse it as a tree, run JSONPath queries, compare two documents, or validate against a JSON Schema.
Use toolAspect Ratio Visualizer
Visually compare width differences between 16:9, 21:9, and 32:9 monitors.
Use tool