Page MenuHomePhabricator

Readability of login and signup forms in low contrast / low light could be improved
Closed, ResolvedPublic

Description

We should explicitly investigate the appearance of the forms in low-light / low contrast environments and see if we could improve it. We could try making the placeholder text a bit darker, and ensure that the labels are darker than the placeholder text.


Version: 1.22.0
Severity: minor
See Also:
https://bugzilla.wikimedia.org/show_bug.cgi?id=47698

Details

Reference
bz47777

Event Timeline

bzimport raised the priority of this task from to Low.
bzimport set Reference to bz47777.
bzimport added a subscriber: Unknown Object (MLST).
ori created this task.Apr 27 2013, 6:26 PM

In Firefox, from light to dark:

  • The text field border is #C9C9C9 This is $agoraGray in the Compass sass files from which we build the Agora CSS.
  • placeholder text is #898989 This isn't explicitly styled but it varies with the text input color, Firefox's rule is opacity: 0.54.
  • label text is #7D7D7D I think this is darken($agoraGray, 30%) in sass
  • text input is #252525 This is $agoraTextColor in sass.

all on a #FFFFFF background.

I think the labels should be darker. darken($agoraGray, 50%) makes them #4a4a4a. But I'm not a designer.

Created attachment 12419
default form appearance in Ubuntu Firefox

Attached:

Created attachment 12420
darker Agora labels in Ubuntu Firefox

Example of darker labels. I changed .mw-ui-vform > div label to color: #4A4A4A;

Attached:

Approved from Design. Darken away!

For future reference, WORKSFORME means the current behavior is correct (i.e. no change is required).

See also bug 47698, which is about Monobook issues. The issue is more noticeable there, due to a slight background on the Monobook login screen.

They also noted that the button text is light in non-Vector skins, particularly given that it's overlaid on gray. I already did a fix for that (not affecting text color).

By "text color" I meant the text of regular fields (e.g. input type text).

Related URL: https://gerrit.wikimedia.org/r/66047 (Gerrit Change I01dd960d673a37d519ae8805db1fbbcb5a4306c9)

Related URL: https://gerrit.wikimedia.org/r/66164 (Gerrit Change I01dd960d673a37d519ae8805db1fbbcb5a4306c9)

Related URL: https://gerrit.wikimedia.org/r/66172 (Gerrit Change I01dd960d673a37d519ae8805db1fbbcb5a4306c9)