Closed Bug 1070022 Opened 7 years ago Closed 7 years ago
Improve Contrast of Text on New Tab Page
609.84 KB, image/png
1.67 KB, patch
|Details | Diff | Splinter Review|
146.43 KB, image/png
146.66 KB, image/png
1.83 KB, patch
|Details | Diff | Splinter Review|
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
Component: General → New Tab Page
OS: Mac OS X → All
QA Contact: clarkbw
Hardware: x86 → All
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?
(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-
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 35
Ed, just in bug 1068181, please ask for the uplift request. Thanks
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
Taking it because Enhanced Tiles is a cool new feature of 33 and we want to make sure it is as good as possible.
https://hg.mozilla.org/releases/mozilla-aurora/rev/9b09db65084b status-firefox33 wontfix per bug 1073823
(In reply to Robert Kaiser (:email@example.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.
I think this should be still verified. It doesn't heart and it should be fast!
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.
You need to log in before you can comment on or make changes to this bug.