Improve Contrast of Text on New Tab Page

VERIFIED FIXED in Firefox 33

Status

()

defect
VERIFIED FIXED
5 years ago
5 years ago

People

(Reporter: athornburgh, Assigned: Mardak)

Tracking

unspecified
Firefox 35
Points:
---
Dependency tree / graph
Bug Flags:
firefox-backlog +
qe-verify +

Firefox Tracking Flags

(firefox33+ verified, firefox34 verified, firefox35 verified)

Details

Attachments

(5 attachments)

Problem: Users are having a difficult time with text legibility due to insufficient contrast.

Solution: Increase contrast of tile TITLES and Sponsored LABELS.

Here are how the specs should change...

TITLES
Static title text = #6C6C6C
Rollover = no change

LABELS
Static label text = #6C6C6C / border = no change
Rollover: text = #FFFFFF / border = none / fill = #4A90E2 (link blue)
[Tracking Requested - why for this release]: Shounds like CSS only changes that would increase legibility quite a bit. Again, we want to reduce the amount of (visible) follow-up to tiles in the next few versions.
OK. It is probably too late for beta 6 (gtb later today) but I would really like to see it landed for beta 7 (gtb next Thursday)
Just to note, the current colors/contrast ratios:

old titles: #737373 on #f9f9f9 = 4.5 ratio
new titles: #6c6c6c on #f9f9f9 = 5.0 ratio

old label static:   #9b9b9b on #f9f9f9 = 2.6 ratio
new label static:   #6c6c6c on #f9f9f9 = 5.0 ratio
old label rollover: #666666 on #dcdcdc = 4.2 ratio
new label rollover: #ffffff on #4a90e2 = 3.3 ratio

Does the new label rollover need to be higher contrast ratio of 5.0? To get closer to 5, the background would need to be around #3a72b1 http://snook.ca/technical/colour_contrast/colour.html
Blocks: 1050643
Component: General → New Tab Page
Flags: needinfo?(philipp)
Flags: firefox-backlog+
OS: Mac OS X → All
QA Contact: clarkbw
Hardware: x86 → All
Flags: needinfo?(philipp) → needinfo?(athornburgh)
Posted patch v1Splinter Review
Attachment #8494131 - Flags: review?(adw)
Posted image v1 screenshot
Posted image before screenshot
Ed - 

The dark blue rollover color you suggested is nice. I'm good with that.

As for the tile titles, perhaps we could try #5c5c5c for the static color, and #222222 for rollover?
Flags: needinfo?(athornburgh)
Status: NEW → ASSIGNED
Flags: qe-verify?
(In reply to Aaron from comment #0)
> TITLES
> Static title text = #6C6C6C
> Rollover = no change
> LABELS
> Static label text = #6C6C6C

(In reply to Aaron from comment #7)
> As for the tile titles, perhaps we could try #5c5c5c for the static color,
> and #222222 for rollover?
Just making sure, you want to have 2 different colors for the static text? #5c5c5c for title and #6c6c6c for sponsored?

And currently the title rollover is #4a4a4a and you're suggesting #222222 for more contrast with the static vs rollover?
No no - I'm not suggesting two different tile title colors.

My suggestion is that ALL titles should be #5c5c5c static, and #222222 on rollover.
There's 2 static texts: title and sponsored label. In comment 0, you wanted both to be the same, and in comment 7, you're saying the static title should be #5c5c5c. I wanted you to clarify if both static title and sponsored label should be #5c5c5c (like comment 0) or if you mean static title should be #5c5c5c and static sponsored label be #6c6c6c.
Oh, i see what you're saying now.

Ok, yes, let's make the "Sponsored" label text #5c5c5c as well. Sorry for the confusion.
Comment on attachment 8494131 [details] [diff] [review]
v1

Review of attachment 8494131 [details] [diff] [review]:
-----------------------------------------------------------------

Okie dokie.
Attachment #8494131 - Flags: review?(adw) → review+
This looks easy enough to see that it basically verifies itself and doesn't require an additional look from QA.
Flags: qe-verify? → qe-verify-
https://hg.mozilla.org/mozilla-central/rev/1afebab33b8f
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 35
Iteration: --- → 35.2
Ed, just in bug 1068181, please ask for the uplift request. Thanks
Flags: needinfo?(edilee)
Posted patch for upliftSplinter Review
Flags: needinfo?(edilee)
Comment on attachment 8496361 [details] [diff] [review]
for uplift

Approval Request Comment
[Feature/regressing bug #]: Bug 1030832 / Enhanced Tiles
[User impact if declined]: Hard to read low contrast text
[Describe test coverage new/current, TBPL]: None
[Risks and why]: Low - css color changes
[String/UUID change made/needed]: None
Attachment #8496361 - Flags: approval-mozilla-beta?
Attachment #8496361 - Flags: approval-mozilla-aurora?
Attachment #8496361 - Flags: approval-mozilla-beta?
Attachment #8496361 - Flags: approval-mozilla-beta+
Attachment #8496361 - Flags: approval-mozilla-aurora?
Attachment #8496361 - Flags: approval-mozilla-aurora+
Taking it because Enhanced Tiles is a cool new feature of 33 and we want to make sure it is as good as possible.
(In reply to Robert Kaiser (:kairo@mozilla.com) from comment #13)
> This looks easy enough to see that it basically verifies itself and doesn't
> require an additional look from QA.

Robert set this as "qe-verify-", and then Sylvestre set the "verifyme" keyword. Since now "verifyme" has been replaced by the "qe-verify+" flag, the two are conflicting.

Sylvestre, can you please either set the "qe-verify+" flag if you want QA to look at this, or remove the "verifyme" keyword if you agree with Robert's comment.
Flags: needinfo?(sledru)
I think this should be still verified. It doesn't heart and it should be fast!
Flags: qe-verify-
Flags: qe-verify+
Flags: needinfo?(sledru)
Thank you Sylvestre! Assigning to Cornel for verification.
QA Contact: cornel.ionce
(In reply to Sylvestre Ledru [:sylvestre] from comment #23)
> I think this should be still verified. It doesn't heart and it should be
> fast!

Remember that every such comment means we will spend less or no time on something that is not obvious and not easy to QA. Our team should be set out to more and more go and aggressively minus anything that is obvious and easy so we can actually spend the few resources we have on the hard and more important stuff.
Verified this issue as fixed on Mac OS X 10.9, Ubuntu 12.04 and Windows 7 64-bit using:
- latest Aurora - build ID: 20140929004005
- latest Nightly - build ID: 20140929030205.
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:33.0) Gecko/20100101 Firefox/33.0
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:33.0) Gecko/20100101 Firefox/33.0
Mozilla/5.0 (X11; Linux x86_64; rv:33.0) Gecko/20100101 Firefox/33.0

Verified fixed using Fx 33 beta 8, Build ID:20140929180120.
Status: RESOLVED → VERIFIED
Keywords: verifyme
You need to log in before you can comment on or make changes to this bug.