1202495 - Default color of input; insufficient color contrast

Status: RESOLVED WORKSFORME

(Core :: Layout: Form Controls, defect)

Description

[Gérard Talbot]

gre-resources/forms.css (line 54) uses

input
  {
    (...)
    background-color: #FCFCFC; /* background-color: -moz-Field; */
    color: #31363B; /* color: -moz-FieldText; */
    (...)
  }

which, I believe, to be insufficient in terms of color contrast for the placeholder attribute text value. When I try to author-set color to black, then, for unknown reasons at this moment, color of placeholder attribute value is still not black (although it is a bit darker).

Actual result in Firefox 40.0.3
- - - - - - - - - - - - - - - -

A) 
default color of placeholder attribute value is set to #31363B and it seems to be lighter than the real #31363B color . Something else (not identified right now; could be opacity < 1 or some overlapping layer with gradient) interferes with the rendering of real #31363B color .

B)
color of placeholder attribute value does not look as black color despite author rule 

input {color: black}


Expected result
- - - - - - - -

A)
default color of placeholder attribute value should be darker than #31363B ; it should be *_at least_* the real #31363B color . Something else (not identified right now) interferes with the real #31363B color .

B) color of placeholder attribute value should be author-settable and set to black with the rule 

input {color: black}

Notes
-----
- I am using Firefox 40.0.3 buildID=20150826185918
- I use Linux 3.13.0-63-generic x86_64, Qt: 4.8.6, KDE 4.13.3; Kubuntu (trusty) 14.04.3 LTS
- I've searched for duplicates and did not find any
- reduced testcase coming up

Comment 1

[Gérard Talbot]

Reduced testcase:

http://www.gtalbot.org/BugzillaSection/Bug1202495-default-color-input-insufficient-contrast.html

Comment 2

[Gérard Talbot]

If default border of input is thin and uses a light gray color and if font-size of input is smaller than user-preferred font size, then some webpages may end up displaying a search input button for website that may be in fact unnoticeable or non-discoverable within normal viewing context... which, to me and to say the least, is ironic. 

I should not be searching a lot a webpage or spending a lot of time searching or examining source code of a webpage just to find where the search button of a search-this-website form is in a webpage.

Mozilla could help here.

Comment 3

[Gérard Talbot]

Furthermore to the border color, to the border width, to the font size of such input and to the color of such input, web authors usually just use the word - one word - "Search" or worse, even just use a small magnifying glass icon inside the left side of such input and that is how I could not see, could not notice that a search form existed in a webpage. 

There is something worse than not finding a form input: it is when you do not even suspect, do not even think that there may be a form input for some task to begin with. Why would you start searching for some form input if you do not think or do not believe there might be one in the first place?

Comment 4

[Boris Zbarsky [:bzbarsky]]

> When I try to author-set color to black, then, for unknown reasons at this moment, color
> of placeholder attribute value is still not black

That's because it has opacity != 1, so that the placeholder value can be told apart from a real value.

> B) color of placeholder attribute value should be author-settable

Authors can set opacity on the placeholder text if they want, of course.

There are a lot of constraints here; the current solution attempts to address as many of them as it can.

Comment 5

[jimallan]

For people with Low Vision the contrast of default form controls fail to pass WCAG 2.0 color contrast guidelines. 
http://w3c.github.io/low-vision-SC/luminosity-form-controls.html

Comment 6

[jimallan]

(In reply to jimallan from comment #5)
> For people with Low Vision the contrast of default form controls fail to
> pass WCAG 2.0 color contrast guidelines. 
> http://w3c.github.io/low-vision-SC/luminosity-form-controls.html

default controls generated by mozilla should be 5:1 for borders of 1 px

Comment 7

[jimallan]

correction default controls generated/rendered by mozilla should be 4.5:1 for form borders of 1 px

Comment 8

[Gérard Talbot]

(In reply to Boris Zbarsky [:bz] from comment #4)
> > When I try to author-set color to black, then, for unknown reasons at this moment, color
> > of placeholder attribute value is still not black
> 
> That's because it has opacity != 1, so that the placeholder value can be
> told apart from a real value.

line 227 of chrome/toolkit/res/forms.css :

input::placeholder,
textarea::placeholder {
  opacity: 0.54;
}

Comment 9

[Anna Yeddi [:ayeddi]]

Attachment: Measured-color-contrast-Firefox-Nightly-121.png

Hi all, I believe this bug has been fixed since it was reported - in the testcase provided (thank you!) the placeholder color now is gray #757575 which against the white #FFFFFF gives 4.6:1 color contrast which is sufficient to comply with the WCAG 2.2 Minimum Contrast criterion.

@Emilio, I think this bug could be closed now.

Comment 10

[Emilio Cobos Álvarez (:emilio)]

I was going to 301 Gerald since these colors depend on the system sometimes, but I think yeah, our behavior here is pretty acceptable. And actually no longer depends on the system since we enabled the non-native-theme (here). So yeah probably WFM.