1009812 - New error page is poor color contrast.

Status: VERIFIED FIXED

(Firefox :: Theme, defect)

Description

[Alice0775 White]

Build Identifier:
https://hg.mozilla.org/mozilla-central/rev/4b6d63b05a0a
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:32.0) Gecko/20100101 Firefox/32.0 ID:20140513030201

New error page is poor color contrast!

Foreground        : #737980, background  : #EDEDED
Contrast Ratio    : 3.76 < text should have a ratio of at least 7:1 (larger text, at least 4.5:1).
( http://snook.ca/technical/colour_contrast/colour.html )

STR
1. Show error page 

Actual Results:
The error page is poor color contrast. 

Expected Results:
More readable!

Comment 1

[:Gijs (he/him)]

VT, can we make the text darker so as to fix this? (I think 4.5 is fine; the text is pretty big, and this is about AAA vs. AA compliance, IIRC)

Comment 2

[Valentin Tsatskin [:vt]]

Attachment: 1009812.patch

Turns out I was not using the colours we use in about:preferences (can't remember where I got these colours from). I've updated the text and icon to use the right colours. 

The new contrast ratio is 7.26, which should be in the acceptable range. Alice, please confirm.

Comment 3

[Valentin Tsatskin [:vt]]

Attachment: before.png

Comment 4

[Valentin Tsatskin [:vt]]

Attachment: after.png

Comment 5

[Alice0775 White]

(In reply to Valentin Tsatskin [:vt] from comment #4)
> Created attachment 8423296 [details]
> after.png

It is OK for me.

Comment 6

[Dão Gottwald [:dao]]

Comment on attachment 8423266 [details] [diff] [review]
1009812.patch

You haven't updated the button color.

Comment 7

[Valentin Tsatskin [:vt]]

(In reply to Dão Gottwald [:dao] from comment #6)
> Comment on attachment 8423266 [details] [diff] [review]
> 1009812.patch
> 
> You haven't updated the button color.

This was intentional to match the visual style of about:preferences. For the sake of consistency we should have all the buttons look the same. So if I were to update the button colour, I would need to do the same for about preferences. I'm going to needinfo on mmaslaney on this one.

Alice, is the button foreground and background colour's contrast in the acceptable ranges?

Comment 8

[Alice0775 White]

(In reply to Valentin Tsatskin [:vt] from comment #7)
> (In reply to Dão Gottwald [:dao] from comment #6)
> > Comment on attachment 8423266 [details] [diff] [review]
> > 1009812.patch
> > 
> > You haven't updated the button color.
> 
> This was intentional to match the visual style of about:preferences. For the
> sake of consistency we should have all the buttons look the same. So if I
> were to update the button colour, I would need to do the same for about
> preferences. I'm going to needinfo on mmaslaney on this one.
> 
> Alice, is the button foreground and background colour's contrast in the
> acceptable ranges?

If the button is enabled state, I think that it should be contrast a little more.

I want to compare between enabled state and disabled state of the button.

(Is there the place(public url) showing the appearance of all in-content UI parts?)

Comment 9

[Dão Gottwald [:dao]]

(In reply to Alice0775 White from comment #8)
> (In reply to Valentin Tsatskin [:vt] from comment #7)
> > (In reply to Dão Gottwald [:dao] from comment #6)
> > > Comment on attachment 8423266 [details] [diff] [review]
> > > 1009812.patch
> > > 
> > > You haven't updated the button color.
> > 
> > This was intentional to match the visual style of about:preferences. For the
> > sake of consistency we should have all the buttons look the same. So if I
> > were to update the button colour, I would need to do the same for about
> > preferences. I'm going to needinfo on mmaslaney on this one.
> > 
> > Alice, is the button foreground and background colour's contrast in the
> > acceptable ranges?
> 
> If the button is enabled state, I think that it should be contrast a little
> more.

Right, my concern is that the button looks disabled when its label is not as dark as the surrounding text.

Comment 10

[Valentin Tsatskin [:vt]]

(In reply to Alice0775 White from comment #8)
> 
> (Is there the place(public url) showing the appearance of all in-content UI
> parts?)

Currently there is not, however, the UX team is currently working to document all of our visual style in one place. You can see a VERY early draft here: http://people.mozilla.org/~jgruen/chameleon/

If you would like to contribute your accessibility expertise, the github repository can be found here: https://github.com/johngruen/project-dfa

However, to answer your question, I will be uploading a screenshot of both types of buttons side-by-side shortly.

(In reply to Dão Gottwald [:dao] from comment #9)
> Right, my concern is that the button looks disabled when its label is not as
> dark as the surrounding text.

I totally agree, I had the same thought. We should figure how to make the enabled button not look like a disabled button while still keeping things consistent between about:preferences and this page. This might mean updating the about:preferences buttons. Once again, I'll differ the design work to mmaslaney as he is the one who designed about:preferences.

Comment 11

[Valentin Tsatskin [:vt]]

Attachment: compare.enabled.disabled.buttons.png

The button on the left is the enabled state and the button on the right is the disabled state.

The foreground colour of the enabled button is #737980 and the background colour is roughly #F8F8F8 (it's a gradient, I took the middle colour).

The foreground colour of the disabled button is #B7BABD and the background colour is roughly #F5F5F5.

Are these colours in acceptable ranges?

Comment 12

[Alice0775 White]

When they are adjacent, I can determine which is an enabled state button.
However, when it is placed independent, it seems to be hard to determine whether it is enabled state.

I think that text color of enabled button should be more dark.

Comment 13

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Preferences - [e-mail]

Val, below is an example of the new inContent design in action. You'll notice the increased contrast between the type and background. I would suggest changing the type color globally to hex #333333.

Comment 14

[Biru [:poiru]]

Attachment: Change about:neterror text/background colors to match about:preferences

The text and background color now match: http://mxr.mozilla.org/mozilla-central/source/browser/themes/shared/incontentprefs/preferences.css#8
And the button color matches: http://mxr.mozilla.org/mozilla-central/source/browser/themes/shared/incontentprefs/preferences.css#126

Comment 15

[Blair McBride [:Unfocused] (UNAVAILABLE)]

This is the first time changing the background colour has been mentioned.

mmaslaney: Do we want that changed to a flat colour, or kept as a gradient?

Comment 16

[Michael Maslaney [:mmaslaney] ([e-mail])]

Blair, we are moving forward with the flat styled icons.

Comment 17

[Biru [:poiru]]

(In reply to mmaslaney from comment #16)
> Blair, we are moving forward with the flat styled icons.

Just to clarify, Blair was talking about the page background color. Is it OK to change it from `linear-gradient(#fff, #ededed 100px)` to `#f1f1f1`?

Comment 18

[Michael Maslaney [:mmaslaney] ([e-mail])]

Apologies, yes, please adjust the background to a flat color value of #f1f1f1.

Comment 19

[Biru [:poiru]]

Comment on attachment 8462335 [details] [diff] [review]
Change about:neterror text/background colors to match about:preferences

I'll check it in later.

Comment 20

[Biru [:poiru]]

https://hg.mozilla.org/integration/mozilla-inbound/rev/a3579f0a6339

Comment 21

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/a3579f0a6339

Comment 22

[[SV Manager] Florin Mezei, QA (:FlorinMezei)]

To verify this I compared the May 12th build to the latest Firefox 34 Nightly (BuildID: 20140801030201) on Win 7 x64, Win 8 x64, Ubuntu 12.10 x86, Mac OS X 10.6.8. The contrast for the text and button is improved.

Comment 23

[Lawrence Mandel [:lmandel] (use needinfo)]

It's too late to get this fix into 32 but there is still time to uplift to 33.

poiru - Do you want to request approval to uplift this fix to Firefox 33 this week while it is on Aurora?

Comment 24

[Biru [:poiru]]

Comment on attachment 8462335 [details] [diff] [review]
Change about:neterror text/background colors to match about:preferences

Approval Request Comment
[Feature/regressing bug #]: Bug 982347
[User impact if declined]: Poor contrast on about:neterror pages.
[Describe test coverage new/current, TBPL]: None, verified locally and by QA.
[Risks and why]: Very low, only color changes in .css/.svg files.
[String/UUID change made/needed]: No.

This patch (or https://hg.mozilla.org/mozilla-central/rev/a3579f0a6339) should apply as-is on top of mozilla-aurora.

(In reply to Lawrence Mandel [:lmandel] from comment #23)
> poiru - Do you want to request approval to uplift this fix to Firefox 33
> this week while it is on Aurora?

Done.

Comment 25

[Ryan VanderMeulen [:RyanVM][PTO June 24-28]]

https://hg.mozilla.org/releases/mozilla-aurora/rev/d9abef03e161

Comment 26

[Petruta Horea [:phorea], Desktop QA]

Verified as fixed using Firefox 33 beta 2 (20140908190852) under Win 7 64-bit, Ubuntu 12,10 32-bit and Mac OSX 10.9.4.