1070022 - Improve Contrast of Text on New Tab Page

Status: VERIFIED FIXED

Description

[Aaron]

Attachment: New title and label text and rollover treatments.

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)

Comment 1

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

[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.

Comment 2

[Sylvestre Ledru [:sylvestre]]

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)

Comment 3

[Ed Lee :Mardak]

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

Comment 4

[Ed Lee :Mardak]

Attachment: v1

Comment 5

[Ed Lee :Mardak]

Attachment: v1 screenshot

Comment 6

[Ed Lee :Mardak]

Attachment: before screenshot

Comment 7

[Aaron]

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?

Comment 8

[Ed Lee :Mardak]

(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?

Comment 9

[Aaron]

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.

Comment 10

[Ed Lee :Mardak]

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.

Comment 11

[Aaron]

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 12

[Drew Willcoxon :adw]

Comment on attachment 8494131 [details] [diff] [review]
v1

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

Okie dokie.

Comment 13

[Robert Kaiser]

This looks easy enough to see that it basically verifies itself and doesn't require an additional look from QA.

Comment 14

[Ed Lee :Mardak]

https://hg.mozilla.org/integration/fx-team/rev/1afebab33b8f

Comment 15

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/1afebab33b8f

Comment 16

[Sylvestre Ledru [:sylvestre]]

Ed, just in bug 1068181, please ask for the uplift request. Thanks

Comment 17

[Ed Lee :Mardak]

Attachment: for uplift

Comment 18

[Ed Lee :Mardak]

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

Comment 19

[Sylvestre Ledru [:sylvestre]]

Taking it because Enhanced Tiles is a cool new feature of 33 and we want to make sure it is as good as possible.

Comment 20

[Ed Lee :Mardak]

https://hg.mozilla.org/releases/mozilla-aurora/rev/9b09db65084b

status-firefox33 wontfix per bug 1073823

Comment 21

[Ed Lee :Mardak]

https://hg.mozilla.org/releases/mozilla-beta/rev/8dd30191477e

Comment 22

[Florin Mezei, QA (:FlorinMezei)]

(In reply to Robert Kaiser (:[e-mail]) 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.

Comment 23

[Sylvestre Ledru [:sylvestre]]

I think this should be still verified. It doesn't heart and it should be fast!

Comment 24

[Florin Mezei, QA (:FlorinMezei)]

Thank you Sylvestre! Assigning to Cornel for verification.

Comment 25

[Robert Kaiser]

(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.

Comment 26

[Cornel Ionce [:cornel_ionce], Desktop Release QA]

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.

Comment 27

[Cornel Ionce [:cornel_ionce], Desktop Release QA]

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.