Placeholder Text Colour Varies Across Browsers
Posted by Steve Green on 20 August 2016.
When using HTML5, the "placeholder" attribute can be used to add placeholder text to textboxes in forms. By convention, placeholder text is usually chosen to be a lighter colour than the user-entered text, but it must still meet or exceed the minimum colour contrast level of 4.5:1 specified in the W3C Web Content Accessibility Guidelines (WCAG) 2.0.
So what's difficult about that?
Unfortunately, the major browsers all use different ways of setting the colour of placeholder text. This obviously affects the contrast ratio so it is necessary to measure it in each browser.
Internet Explorer uses the same colour(s) that have been specified for the user-entered text. This will change on hover if that is what has been specified.
In the example below, the "color" attribute is #555555, so that's the colour of the placeholder text. The contrast ratio is 7.5:1, which comfortably complies with WCAG 2.0.
Firefox uses the same colour(s) that have been specified for the user-entered text but applies an opacity factor that depends on the background colour. So if you specified the user-entered text to be #333333 on a white background normally and #7D7D7D on hover, the placeholder text will be #919191 normally and #B9B9B9 on hover.
The opacity level is sufficient to make any text colour other than #000000 (which converts to #767676) fail the 4.5:1 ratio against a white background. If the textbox has a coloured background, a higher opacity level is applied to the text to compensate, but the contrast ratio is always worse than for a white background.
In the example below, the "color" attribute is #555555, but the placeholder text is #A4A4A4 due to the opacity applied by Firefox. The contrast ratio is 2.5:1, which is not compliant with WCAG 2.0.
Chrome always uses #A9A9A9 regardless of what colour has been specified for the user-entered text.
In the example below, the "color" attribute is #555555, but the placeholder text is #A9A9A9 because that's what it always is in Chrome. The contrast ratio is 2.4:1, which is not compliant with WCAG 2.0.
Contrast ratio measurements by automated tools
Most automated accessibility testing tools conduct colour contrast measurements by analysing the CSS. There are a number of reasons why these measurements are not totally reliable, and the measurement for placeholder text is yet another.
I have not yet done this test using any automated tools but at best the tools might give the same results as one of these browsers. And they probably won't warn you that the measurement will be different in other browsers.
If anyone has done this test with any tools please email the results to email@example.com and I will publish them here.
So how do you fix this?
Unfortunately, the fix involves an absolute heap of ugly browser-specific CSS rules. There's a lengthy discussion containing possible solutions at http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css but there are a variety of gotchas, not least the difficulty in overriding the specificity built into some development frameworks.
The big take-away
Never use placeholder text for anything important. Assume that users can't see it and that it's a bonus if they can. If it's important it should be outside the textbox where you can control the appearance reliably.