Placeholder Text Contrast Requirements
Understand the WCAG contrast requirements for placeholder text in form inputs. Learn which gray shades are too light and how to make placeholders accessible.
Detailed Explanation
Placeholder Text and Accessibility
Placeholder text in form inputs is a contentious accessibility topic. While WCAG 2.1 does not explicitly require placeholder text to meet contrast minimums (since it is not "real" content), best practices strongly recommend making placeholders readable.
The Problem with Light Placeholders
Most browsers render placeholder text in a light gray:
/* Default browser placeholder colors */
::placeholder { color: #a9a9a9; } /* Chrome: 2.32:1 vs white - Fails */
::placeholder { color: #757575; } /* Firefox: 4.60:1 vs white - Passes */
WCAG 1.4.3 and Placeholders
While WCAG Success Criterion 1.4.3 applies to "text" and "images of text," there is debate about whether placeholder text qualifies. However, WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast) at Level AA does apply to user interface components, and a form input's placeholder provides meaningful information.
Recommended Placeholder Colors
/* On white (#ffffff) background */
::placeholder { color: #6b7280; } /* gray-500: 5.03:1 - Passes AA */
::placeholder { color: #71717a; } /* zinc-500: 4.79:1 - Passes AA */
::placeholder { color: #737373; } /* neutral-500: 4.69:1 - Passes AA */
::placeholder { color: #78716c; } /* stone-500: 4.52:1 - Passes AA */
/* On dark (#1f2937) background */
::placeholder { color: #9ca3af; } /* gray-400: 5.28:1 - Passes AA */
::placeholder { color: #a1a1aa; } /* zinc-400: 5.24:1 - Passes AA */
Best Practice
Even if you do not consider placeholder text to fall under WCAG 1.4.3, making it readable benefits all users. A contrast ratio of at least 4.5:1 for placeholder text ensures:
- Users can read the hint before interacting
- Users with low vision can understand expected input formats
- The placeholder remains visible in bright ambient lighting
Important Note
Never use placeholder text as a replacement for visible labels. Placeholders disappear on focus, leaving users without context. Always pair placeholders with a visible <label> element.
Use Case
Apply these guidelines when styling form inputs, search bars, and text fields. Ensure placeholder text is readable across all form elements in your design system while maintaining visual hierarchy between placeholder and user-entered text.