Last Comment Bug 1324172 - Indented descriptions should use a lighter font color
: Indented descriptions should use a lighter font color
Status: NEW
:
Product: Firefox
Classification: Client Software
Component: Preferences (show other bugs)
: Trunk
: Unspecified Unspecified
-- normal with 1 vote (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
: Jared Wein [:jaws] (please needinfo? me)
Mentors: Jared Wein [:jaws] (please needinfo? me)
Mike Conley (:mconley)
Depends on:
Blocks: 1324168
  Show dependency treegraph
 
Reported: 2016-12-16 21:42 PST by Jared Wein [:jaws] (please needinfo? me)
Modified: 2017-01-23 08:53 PST (History)
4 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---
affected


Attachments
Proposed font (122.65 KB, image/png)
2017-01-22 19:23 PST, Tina Hsieh[:Tina_Hsieh] UX
no flags Details

Description User image Jared Wein [:jaws] (please needinfo? me) 2016-12-16 21:42:48 PST
From slide 12 and 13 of https://bugzilla.mozilla.org/attachment.cgi?id=8819509
Comment 1 User image John Drinkwater (:beta) 2016-12-22 05:29:18 PST
Thought most of the feedback in that guideline was fair, but found little to justify this change - Font is smaller & already indented, however robbing it of the contrast to the background makes it harder to read.
Hopefully if this change does happen it wont be as light as their example.
Comment 2 User image Jared Wein [:jaws] (please needinfo? me) 2016-12-22 09:40:16 PST
Using the DevTools I checked the font-sizes and in what we are shipping the font is not smaller.

For the gray text we will use 'color: GrayText', which on my machine results in rgb(109,109,109). The background-color of the page is rgb(251,251,251). Using WCAG Contrast formula (simple web form available at http://webaim.org/resources/contrastchecker/), there is a 5:1 contrast ratio between the two colors. This contrast passes the Normal Text WCAG AA test and fails the WCAG AAA test. I haven't seen us require WCAG AAA in other parts of our UI.

I measured the font-size difference in the spec. The indented text is one pixel shorter in height from the screenshots, so it would be a subtle difference but shouldn't affect readability.
Comment 3 User image Jared Wein [:jaws] (please needinfo? me) 2017-01-10 12:53:52 PST
The spec says:
font-size: 13px
font-color: #858585
line-height: 21px
Comment 4 User image Mike Conley (:mconley) 2017-01-18 14:37:42 PST
Hey Jared, are we okay to proceed with the spec's colours, or should we go back to UX (or a11y) and have them evaluate?
Comment 5 User image Jared Wein [:jaws] (please needinfo? me) 2017-01-19 07:26:24 PST
I think the colors here will be okay as far as contrast goes, after the examination I did in comment #2, but I am a bit worried that users may think this is disabled text and not supplemental text. Let's bring that up with UX.

Tina, what are your thoughts about people confusing the text for being disabled or not being applicable because they think it is disabled?
Comment 6 User image Tina Hsieh[:Tina_Hsieh] UX 2017-01-22 19:23:57 PST
Created attachment 8829304 [details]
Proposed font

Hey Jared,
I won't see it as a possibility to confuse people since the description has no checkbox in the front. The font color #858585 is accessible and can easily be distinguished from the option text.

I had a discussion with our visual designer Helen. She made an example that shows the comparison of the normal state, current disabled state, and the disabled state with lower opacity (30%). Making the opacity lower to show the differentiation might be a choice, but it's not accessible and different from the opacity defined in the current Firefox styleguide. 

Since I don't think the proposed font will confuse people and we need the option text to stand out from lines, I'll suggest us to use the proposed description font :)
Comment 7 User image Jared Wein [:jaws] (please needinfo? me) 2017-01-23 08:53:01 PST
Thank you, the lower opacity (30%) looks to have far too low contrast to be usable. We can use the "proposed font" color, #858585 and leave the font-size and line-height unchanged.

Note You need to log in before you can comment on or make changes to this bug.