Input Placeholders Fail Color Contrast

[CalvinRodo]

I just noticed on the demos for Inline Form we are using input placeholders and the colour of the placeholders does not have a high enough contrast with the background to be accessible.

http://wet-boew.github.io/wet-boew/demos/grids/grid-form-eng.html#inline

[CalvinRodo]

It's not just those placeholders but all of the placeholders used on that page, and probably anywhere in the Examples.

[pjackson28]

I'm getting greater than 4.5:1 contrast ratio in Firefox. What browser are you using and what contrast ratio are you getting?

[CalvinRodo]

I'm getting a colour of #aaa for the text and a background colour of #fff

This is coming from the theme.min.css file

These colours have a contrast of 2.3:1 which fails.

I'm using Firefox. 23.01 with windows xp

[pjackson28]

Strange as I'm getting a 4.9:1 contrast ratio #82669B with #FFFFFF for the background on Windows 7 with Firefox 17.0.1.

Looking at the CSS, it looks like #666666 is being applied to the placeholder using input:-moz-placeholder. The problem is it seems this only works for Firefox 4 to 18. There needs to be double-colon (::) for Firefox 19+ and the solution is missing the Webkit equivalent (::-webkit-input-placeholder) and the IE10+ equivalent (:-ms-input-placeholder). There seems to be no equivalent for IE9 and earlier (but they don't support placeholder text). I found this information here: http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css

Here is the WET code that is changing the placeholder colour in Firefox 4 to 18 (comes from forms.scss):

@if $experimental-support-for-mozilla {
    &:-moz-placeholder { color: $medium; }
}

@nschonni Is there a better Compass way of dealing with this? Something that at least leverages all the equivalents?

[CalvinRodo]

Firefox defaults to the OS's disabled text colour for placeholders which just so happens to be an Inaccessible colour in my case. I'm sure if I had a high contrast theme it would be better.

[nschonni]

@pjackson28 there is a mixin that is in the vNext of Compass that we could just recreate ourselves https://github.com/chriseppstein/compass/blob/master/frameworks/compass/stylesheets/compass/css3/_user-interface.scss#L50

There new definition of legacy FF does make me wonder though

[pjackson28]

@nschonni Is this something that would be added to both v3.0 and v3.1 or are you only suggesting this for v4.0 on?

[nschonni]

I think it's safe to backport, since it is a "bug" that we don't support the other browsers directly. I'll take a look at adding it this weekend.