The icons for categories in about:preferences lack so much contrast they're illegible, when using black-on-white High Contrast mode. See attached screenshot.

Since the text labels are still visible, this won't be a hard blocker.

(In reply to Matthew N. [:MattN] (away until Jan. 7) from comment #1) > Since the text labels are still visible, this won't be a hard blocker. Except we hide the labels when the window is narrow. Seems like we could use SVG icons here and that will fix the issue?

Yeah, it will. Michael, can you provide these icons as SVG?

Assets attached.

For normal themes I'm using the Project Chameleon fill color #fbfbfb. I've added a 0.5px black stroke with 0.4 opacity to not make the borders too blurry but making the icons visible when the page colors are disabled. On Windows for non-default themes I am using GrayText as fill color.

Screenshot when the page colors are disabled. I could increase the opacity of the border but this would make the icons blurrier on normal page colors.

Screenshot with Classic theme and GrayText as fill color.

That GrayText on the Classic theme is a bit dark. Any way that you can think of to make it lighter?

Comment on attachment 8564530 [details] [diff] [review] categorySVG.patch Review of attachment 8564530 [details] [diff] [review]: ----------------------------------------------------------------- ::: browser/themes/shared/incontentprefs/icons.svg @@ +1,5 @@ > +<?xml version="1.0" encoding="utf-8"?> > +<svg xmlns="http://www.w3.org/2000/svg" > + xmlns:xlink="http://www.w3.org/1999/xlink" > + x="0" > + y="0" x and y attributes have no effect on the SVG, you can remove those. We should probably remove those on our other SVG files too. @@ +10,5 @@ > + } > + use { > + fill: #fbfbfb; > + stroke: rgba(0,0,0,0.4); > + stroke-width: .5px; Do we need the stroke when the color is GrayText ? It makes the icons look blurry so it'd be nice to avoid it when we can. @@ +33,5 @@ > + <path > + d="M12.757,7.824h-1.657c-0.456,0-0.828,0.373-0.828,0.828v8.282c0,0.456,0.373,0.828,0.828,0.828h1.657 > + c0.456,0,0.828-0.373,0.828-0.828V8.652C13.586,8.196,13.213,7.824,12.757,7.824z"/> > + </g> > + <g id="search-shape"> I'm not sure if icons that just consist in one path need to wrapped inside a <g> tag.

(In reply to Richard Marti (:Paenglab) from comment #7) > Created attachment 8564533 [details] > classic.png > > Screenshot with Classic theme and GrayText as fill color. You could try ThreeDShadow or ThreeDLightShadow. Here's a list of values : https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#System_Colors

(In reply to Tim Nguyen [:ntim] from comment #9) > Comment on attachment 8564530 [details] [diff] [review] > categorySVG.patch > > Review of attachment 8564530 [details] [diff] [review]: > ----------------------------------------------------------------- > > ::: browser/themes/shared/incontentprefs/icons.svg > @@ +1,5 @@ > > +<?xml version="1.0" encoding="utf-8"?> > > +<svg xmlns="http://www.w3.org/2000/svg" > > + xmlns:xlink="http://www.w3.org/1999/xlink" > > + x="0" > > + y="0" > > x and y attributes have no effect on the SVG, you can remove those. > We should probably remove those on our other SVG files too. I'll remove them with the next patch. > @@ +10,5 @@ > > + } > > + use { > > + fill: #fbfbfb; > > + stroke: rgba(0,0,0,0.4); > > + stroke-width: .5px; > > Do we need the stroke when the color is GrayText ? It makes the icons look > blurry so it'd be nice to avoid it when we can. The stroke is for the no page color mode. This makes the white icons visible on the white background (see comment 6). > @@ +33,5 @@ > > + <path > > + d="M12.757,7.824h-1.657c-0.456,0-0.828,0.373-0.828,0.828v8.282c0,0.456,0.373,0.828,0.828,0.828h1.657 > > + c0.456,0,0.828-0.373,0.828-0.828V8.652C13.586,8.196,13.213,7.824,12.757,7.824z"/> > > + </g> > > + <g id="search-shape"> > > I'm not sure if icons that just consist in one path need to wrapped inside a > <g> tag. It's not needed but I made it to have the same structure on all icons for later, when a change needs two paths. If you want, I'll remove them where not needed.

(In reply to Richard Marti (:Paenglab) from comment #11) > > @@ +10,5 @@ > > > + } > > > + use { > > > + fill: #fbfbfb; > > > + stroke: rgba(0,0,0,0.4); > > > + stroke-width: .5px; > > > > Do we need the stroke when the color is GrayText ? It makes the icons look > > blurry so it'd be nice to avoid it when we can. > > The stroke is for the no page color mode. This makes the white icons visible > on the white background (see comment 6). Unless I'm wrong, the stroke isn't needed when the color is GrayText.

(In reply to Tim Nguyen [:ntim] from comment #12) > (In reply to Richard Marti (:Paenglab) from comment #11) > > > @@ +10,5 @@ > > > > + } > > > > + use { > > > > + fill: #fbfbfb; > > > > + stroke: rgba(0,0,0,0.4); > > > > + stroke-width: .5px; > > > > > > Do we need the stroke when the color is GrayText ? It makes the icons look > > > blurry so it'd be nice to avoid it when we can. > > > > The stroke is for the no page color mode. This makes the white icons visible > > on the white background (see comment 6). > Unless I'm wrong, the stroke isn't needed when the color is GrayText. Ah yes, misread the comment. It isn't needed with GrayText because the contrast is always enough.

Removed the x and y in svg and using now ThreeDHighlight as native color. This makes the icons look on Classic like on default themes. I was wrong, the stroke is also used as it's in the basic style. But now it's good it's used because if not we would have the same issue now with the classic theme with page colors disabled and also with the white HC theme. I didn't change the <g> surrounding awaiting your decision if I should remove them.

Verified fixed using Firefox 38 Beta 6 (buildID: 20150420134330).