Closed Bug 1009812 Opened 6 years ago Closed 6 years ago

New error page is poor color contrast.

Categories

(Firefox :: Theme, defect)

defect
Not set

Tracking

()

VERIFIED FIXED
Firefox 34
Iteration:
34.1
Tracking Status
firefox32 --- wontfix
firefox33 --- verified
firefox34 --- verified

People

(Reporter: alice0775, Assigned: poiru)

References

Details

(Keywords: access, regression)

Attachments

(5 files, 1 obsolete file)

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!
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)
Component: General → Theme
Flags: needinfo?(vtsatskin)
Keywords: access, regression
OS: Windows 7 → All
Hardware: x86_64 → All
Attached patch 1009812.patch (obsolete) — Splinter Review
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.
Attachment #8423266 - Flags: review?(bmcbride)
Flags: needinfo?(vtsatskin) → needinfo?(alice0775)
Attached image before.png
Attached image after.png
(In reply to Valentin Tsatskin [:vt] from comment #4)
> Created attachment 8423296 [details]
> after.png

It is OK for me.
Flags: needinfo?(alice0775)
Comment on attachment 8423266 [details] [diff] [review]
1009812.patch

You haven't updated the button color.
Attachment #8423266 - Flags: review?(bmcbride) → review-
(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?
Flags: needinfo?(alice0775)
Flags: needinfo?(mmaslaney)
(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?)
Flags: needinfo?(alice0775)
(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.
(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.
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?
Flags: needinfo?(alice0775)
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.
Flags: needinfo?(alice0775)
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.
Flags: needinfo?(mmaslaney)
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?
Flags: needinfo?(mmaslaney)
Blair, we are moving forward with the flat styled icons.
Flags: needinfo?(mmaslaney)
(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`?
Flags: needinfo?(mmaslaney)
Apologies, yes, please adjust the background to a flat color value of #f1f1f1.
Flags: needinfo?(mmaslaney)
Flags: firefox-backlog?
Attachment #8462335 - Flags: review?(bmcbride)
Attachment #8462335 - Flags: review+
Attachment #8462335 - Flags: checkin?
Comment on attachment 8462335 [details] [diff] [review]
Change about:neterror text/background colors to match about:preferences

I'll check it in later.
Attachment #8462335 - Flags: checkin?
https://hg.mozilla.org/mozilla-central/rev/a3579f0a6339
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 34
Iteration: --- → 34.1
QA Whiteboard: [qa?]
Flags: firefox-backlog? → firefox-backlog+
QA Whiteboard: [qa?] → [qa+]
QA Contact: florin.mezei
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.
Status: RESOLVED → VERIFIED
QA Whiteboard: [qa+] → [qa!]
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?
Flags: needinfo?(birunthan)
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.
Attachment #8462335 - Flags: approval-mozilla-aurora?
Flags: needinfo?(birunthan)
Attachment #8462335 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
QA Whiteboard: [qa!]
Flags: qe-verify+
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.
You need to log in before you can comment on or make changes to this bug.