Indented descriptions should use a lighter font color

NEW
Unassigned

Status

()

Firefox
Preferences
P2
normal
5 months ago
10 days ago

People

(Reporter: jaws, Unassigned, Mentored)

Tracking

(Blocks: 1 bug)

Trunk
Firefox 55
Points:
---
Bug Flags:
qe-verify +

Firefox Tracking Flags

(firefox53 affected)

Details

(Whiteboard: [photon-preference])

Attachments

(1 attachment)

From slide 12 and 13 of https://bugzilla.mozilla.org/attachment.cgi?id=8819509
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.
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.
The spec says:
font-size: 13px
font-color: #858585
line-height: 21px

Updated

4 months ago
Assignee: nobody → manotejmeka
Mentor: mconley@mozilla.com, jaws@mozilla.com

Updated

4 months ago
Status: NEW → ASSIGNED

Updated

4 months ago
Assignee: manotejmeka → nobody
Status: ASSIGNED → NEW
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?
Flags: needinfo?(jaws)
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?
Flags: needinfo?(jaws) → needinfo?(thsieh)
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 :)
Flags: needinfo?(thsieh)
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.

Comment 8

a month ago
Hi Helen,
Kindly provide the final specs for this after your call tonight. 
Thanks!
Flags: needinfo?(hhuang)
Whiteboard: [photon-preference]

Updated

28 days ago
Flags: qe-verify+
QA Contact: hani.yacoub
Sorry for the late reply. 
Base on the latest color palette, I will change the font color to #737373, please help to fix this, thanks!
Flags: needinfo?(hhuang)

Updated

22 days ago
Priority: -- → P2
Target Milestone: --- → Firefox 57
This is a stlying follow up for re-org, not visual update for 57.
Target Milestone: Firefox 57 → Firefox 55
You need to log in before you can comment on or make changes to this bug.