Another Good Reason to Be Weary of Placeholders
Composed Thursday, January 16, 2025
In this post, we learn about a Firefox-specific placeholder colour contrast quirk.
Arguments Against Placeholders
Before we start off, a quick disclaimer about the use of placeholders in general.
Placeholders are not labels. Use them as labels, and some of the accessibility industry's leading auditors will flag you for a SC 3.3.2 Labels and Instructions Level A WCAG Violation.
As Eric Bailey notes, using a placeholder for 'a short hint intended to aid the user with data entry' may be 'technically correct.' However, he notes that despite this 'correctness,' we must contend with a couple important things:
- The placeholder attribute doesn't get localized in automatic machine translation.
- Such hints are better placed where they are persistently visible.
- Placeholders can be mistaken for auto-filled information, even when they are designed carefully. High-contrast themes will almost always make them look like auto-filled text.
Placeholders Are Not Exempt
Let's say you need a placeholder. Maybe you're not the one making the design call, or maybe you're using placeholder text in the 'Search' bar of your website. Using the placeholder text, 'Search' on a search box is such a common idiom that Adrian Roselli makes a special 3.3.2 exception for it.
Whatever your reason, you're here. So let's make your placeholder have accessible colour contrast.
Remember: you need to choose a colour that is both...
- Lighter than your normal text so it doesn't get mistaken for auto-filled text.
- Meets WCAG contrast minimum thresholds.
You cannot just use the default placeholder styling. In certain browsers, it will fail contrast minimum by default.
Let's say that you've decided a contrast of 4.59:1 is a satisfactory ratio for your placeholder colour.
#7F717F and #FFFFF have a contrast ratio of 4.59:1.
It is reasonably legible. Now that you've diligently picked out your colours, let's apply the .good-placeholder-text styling to our placeholder.
When rendered in Firefox
Our placeholder text has far lower contrast than we expected it to have.
The Reason
Why does the colour show up as totally unlike the colour we selected?
Well, here is the default styling for placeholder text in Firefox.
::placeholder {
-webkit-text-security: none;
opacity: 0.54;
}
Opacity of the placeholder pseudoelement is set to 0.54% by default.
While we thought we achieved a colour ratio that was 4.59:1, we actually ended up with a ratio of about 2.04:1.
This colour contrast failure will not be detected by automated contrast checkers.
Main Conclusions
If you are styling a placeholder, style the placeholder pseudoelement (not the input element) and also set opacity: 1.
If you are auditing a site for colour contrast, make sure to look at any placeholders for weird contrast in Firefox specifically.
More Resources
Erig Eggert also emphasizes the need to use both opacity and color attributes to style placeholder elements, which have inaccessible color contrast by default in some browsers.
Peter-Paul Koch wrote a very similar article to this one nearly ten years ago. I found this after I completed my version. Unfortunately I don't have much to offer as an update!
Demonstrations
The article's done, but I've compiled some examples for you to look at below.
I set the placeholders to red not because it's a good placeholder color (it's not), but because it might be easier to distinguish what the output is doing.
Styling Input Color
Changing the color attribute on input elements will alter the colour of placeholder text on Firefox, but not in Chrome or Safari. Unlike Firefox, Chrome/Blink and Safari/Webkit set a specific colour onto the placeholder.
Chrome's default styling of the ::webkit-input-placeholder pseudoelement is #757575, a light grey. This colour has a contrast ratio of 4.60 to 1 with pure white text, which meets contrast ratios.
Safari's ::placeholder pseudoelement uses the CSS color darkgray, which works out to be #a9a9a9. Safari's default styling does not meet contrast ratios.
The Code
input.sample1 {
color:red;
}
Output in Your Browser
Screenshots (taken in light mode)
Firefox. Placeholder is red with 45% transparency
Chrome. Placeholder is a light grey that meets contrast minimums
Safari. Placeholder is light grey that doesn't meet contrast minimums.
Styling ::placeholder Colour
If you want to change the colour of placeholder text in Chrome (and you must change it, because the default color doesn't meet minimum contrast ratios) you have to do so by directly styling the ::placeholder pseudoelement.
The Code
input.sample2::placeholder {
color: red;
}
Output in Your Browser
Screenshots
Firefox. Placeholder is red with 45% transparency.
Chrome. Placeholder is red with full opacity.
Safari. Placeholder is red with full opacity.
Styling ::placeholder Colour and Opacity
With custom placeholder colours, ensure you set opacity to 1 so that the colour is consistent across browsers.
The Code
input.sample3::placeholder {
color: red;
opacity: 1;
}
Output in Your Browser
Screenshots
Firefox. Placeholder is red with full opacity.
Chrome. Placeholder is red with full opacity.
Safari. Placeholder is red with full opacity.
If this post was useful, consider supporting me on Ko-Fi to help me pay for my CPACC exam fees. I am a young nonbinary person of colour, Disabled, and looking to get into the accessibility profession.
Feedback on this post can be sent to me via Mastodon. I will post any comments I receive below this line unaltered.