About placeholder text in Firefox

Search is an important function of the website I support as Web Services Manager. Recently, several colleages were telling me that the placeholder text in the search bar of our website was really very light – maybe too light. I knew the color probably didn’t meet the WCAG color contrast standard, but I felt it was still legible on both my laptop and my crummy old Dell external display.

Still, in respect for their opinion and the fact that search is very important to us, I decided to increase the contrast to a minimally acceptable level for accessibility – a contrast ratio of about 3:1. In addition, I made an effort to review the updated color in several browsers. I didn’t think this was strictly necessary – all browsers should display color in the same way on the same screen, right?

Right?

To my surprise, the placeholder text in the search bar was much, much lighter in Firefox. The color defined in our stylesheet is #7a7f85, but the color being displayed in Firefox (as checked by inspecting a screen capture in Pixelmator Pro) was more like #b7babd. That’s a huge difference, particularly for accessibility. What is up with that? I did a quick search for information about color display difference between Firefox and other browsers, but came up empty. Then I searched specifically for Firefox placeholder text color. The result was this Stack Overflow question. For some reason, the default opacity of placeholder text in a Firefox input field is not equal to 1. You have to specify opacity:1 in your stylesheet to make placeholder text in Firefox match appearance with that in Edge or Safari.

This is a really annoying quirk of Firefox.