792866 - Various parts of the site suffer from contrast issues

Status: RESOLVED FIXED

(support.mozilla.org :: General, defect, P2)

Description

[Kadir Topal [:atopal]]

After implementing the new sandstone design on SUMO, we got various reports about legibility issues that can be traced back to low contrast.

In general it seems like the fonts are too thin for people and the non-white background requires brighter colours. 

The feedback in particular: 

https://support.mozilla.org/
* The header menu is painful to read. Blue text over blue background works really badly.

https://support.mozilla.org/en-US/products/firefox/get-started
* Low contrast links on non-white background are hard to read

Article pages: https://support.mozilla.org/en-US/kb/private-browsing-browse-web-without-saving-info
* The bold style need to be bolder. Bold sections are not nearly as noticable as they were. http://people.mozilla.org/~mverdi/screenshots/bold-20120917-092641.jpg

Support Forum: https://support.mozilla.org/en-US/questions
* It's easy to oversee The "sort and filter" and "Top contributors" (the contrast with the background is minimal

We need some guidance on how to address these issues, now that we are using the sand stone design. Previously we'd have worked with our UX designer to make those changes directly.

Comment 1

[Bram Pitoyo [:bram]]

Attachment: existing design

Comment 2

[Bram Pitoyo [:bram]]

Attachment: white navigation bar

Comment 3

[Bram Pitoyo [:bram]]

Attachment: white navigation bar with extended width

Comment 4

[Bram Pitoyo [:bram]]

Attachment: new navigation bar

Reference:
http://www.mozilla.org/en-US/styleguide/identity/firefox/branding/
(Look at the series of buttons on the ‘Download’ section).

Comment 5

[Bram Pitoyo [:bram]]

Attachment: new navigation bar (hover)

Comment 6

[Bram Pitoyo [:bram]]

Attachment: new navigation bar with better contrast

Comment 7

[Bram Pitoyo [:bram]]

Attachment: new navigation bar with better contrast (hover)

Comment 8

[Bram Pitoyo [:bram]]

Attachment: article list with white box

Comment 10

[Bram Pitoyo [:bram]]

(In reply to Kadir Topal [:atopal] from comment #0)

> * The header menu is painful to read. Blue text over blue background works
> really badly.

I think that having a plain white header menu background will solve this problem.

I’ve attached two variations of the white navigation bar: attachment 666466 [details] and attachment 666467 [details]. One is the same width as our existing menu, and the other extends through the page width.

Personally I think that the extended bar integrates more nicely with the color scheme and design of the page, but the normal-width bar is much easier to implement.

An interesting compromise might be to make the menu be more button-like (attachment 666468 [details]).

With this method, we can make the button as white as we like. For example, attachment 666472 [details] shows a button bar that has more contrast.

And plus, when menu items look clickable, they have better affordance and user are more likely to use them: a usability win


> https://support.mozilla.org/en-US/products/firefox/get-started
> * Low contrast links on non-white background are hard to read

The link color is part of the guideline. Maybe what we can do here is put every article list on a white box? (attachment 666474 [details])


> * The bold style need to be bolder. Bold sections are not nearly as
> noticable as they were.
> http://people.mozilla.org/~mverdi/screenshots/bold-20120917-092641.jpg

This is going to be fixed with bug 791248, where I proposed a more contrasting yellow background to set the color of the alert box (see comment 13 of that bug). This yellow should be propagated to the article page’s warning box.


> Support Forum: https://support.mozilla.org/en-US/questions
> * It's easy to oversee The "sort and filter" and "Top contributors" (the
> contrast with the background is minimal

In all of these attachments, I have increased the background color of the feature boxes, but only subtly.

For example, compare attachment 666465 [details] and attachment 666469 [details].

I don’t want to break anything that the branding team had designed for us. But if the increase in contrast is still not enough, I can figure out a different solution.



In the meantime, I have also increased font sizes and improved text contrasts throughout. All of them are subtle. I can post the CSS changes for those, too.

Comment 11

[Verdi [:verdi] Best to slack me]

I like both versions of the white navigation bar. It's easier to read and looks more like existing Mozilla sites. The variations that look more like buttons seem out of place. They're more 3D and literal than anything else in the design.

The white background on the list of articles is also nice and will be much appreciated.

Comment 12

[Kadir Topal [:atopal]]

Hi Bram, I love the extended white background. It fits really well with the site and gives some more room for localization, which is a big plus with a site like SUMO. I'd go with that.

Regarding the bold style: Yes, the warning are much better now, but the bold style is still too easy to overlook. Less so in the warning box, but particularly when used within articles.

Also, could you please post the CSS here? Thanks!

Comment 13

[zipguypub]

Hi Bram, I love the white background in the links.  It makes them easier to read.

Unfortunately it is especially for those you've visited.  I wish it were the opposite, but that's my humble opinion.  I know you're following the styleguide properly!

Comment 14

[Bram Pitoyo [:bram]]

Thanks for the feedbacks. It sounds like we’ve decided that having a white background for the navigation bar is a good idea.



(In reply to Kadir Topal [:atopal] from comment #12)
> I love the extended white background. It fits really well with the
> site and gives some more room for localization

Actually, the extended background does not give more space for text. It’s done to maintain design continuity with the rest of the page, so that the white box does not look out of place.

But Ricky and Rehan had already solved the text overflow problem by flowing the menu text like this:
http://support.mozilla.org/ru/home

 

> Regarding the bold style: the bold
> style is still too easy to overlook. Less so in the warning box, but
> particularly when used within articles.

Ah, this is something I overlooked. It seems that we are using three weights of the Open Sans font at the moment:
* Light
* Regular
* Semibold

However, we have not embedded the Bold weight yet.

When we do this, the Bold font variant will be the one that gets used for bold text, and the contrast will improveozi.

Semibolds are great to make small texts (12px and under) look equal to larger texts that are set in Regular weight. This weight will be used on the auxiliary navigation and breadcrumb sections.



> Also, could you please post the CSS here? Thanks!

#aux-nav {
	font-weight: 600; /* use Open Sans Semibold */
	font-size: 12px; /* increase size */
}

#aux-nav > ul > li > a, #aux-nav > ul > li > a:visited {
	color: #333; /* darken text color */
}

.breadcrumbs {
	font-weight: 600; /* use Open Sans Semibold */
	color: #e0e5e8 url('../img/grain.png'); /* increase color contrast */
}

.breadcrumbs #breadcrumbs {
	color: #333; /* darken text color */
	font-size: 12px; /* increase size */
}

.sidebar-nav {
	font-family: 'OpenSans'; /* Open Sans Light is too thin
	font-size: 13px;
}

.sidebar-nav > li.selected > span, .sidebar-nav > li.selected > a, .sidebar-nav > li.selected > a:visited, .sidebar-nav > li.selected > a:hover {
	background: #fff; /* background of selected navigation item should be white */
	color: #333; /* darken text color */
}

.sidebar-nav > li > span:hover, .sidebar-nav > li > a:hover {
background: 
	background: #fff; /* background of hovered navigation item should be white */
}

.sidebar-nav > li > span, .sidebar-nav > li > a, .sidebar-nav > li > a:visited {
	background: #f7fafc url('../img/grain.png'); /* increase background contrast */
	color: #333; /* darken text color */
}

.sidebar-nav > li.selected::before {
	/* erase the 'background' property, so the shadow behind the arrow is erased */
}

.sidebar-nav > li.selected {
	border-bottom: 1px solid #fff; /* increase stroke contrast */
}

.feature-box {
	color: #e0e5e8 url('../img/grain.png'); /* increase color contrast */
}



(In reply to [e-mail] from comment #13)
> Hi Bram, I love the white background in the links.  It makes them easier to
> read.
> 
> Unfortunately it is especially for those you've visited.  I wish it were the
> opposite, but that's my humble opinion.  I know you're following the
> styleguide properly!

The web’s design convention for visited link color is the color purple, so I’m following that standard. Thanks for your feedback!

Comment 15

[Ricky Rosario [:rrosario, :r1cky]]

Bram, are we all set here or do we need something else from you? Thanks!

Comment 16

[Bram Pitoyo [:bram]]

(In reply to Ricky Rosario [:rrosario, :r1cky] from comment #15)
> Bram, are we all set here or do we need something else from you? Thanks!

We’re all set, except for the navigation bar, for which I would like Sean to look at some of our navigation bar options and help us select the option that will be the most readable while still adhering to the styleguide.

I think we have collectively decided that either attachment 666466 [details] or attachment 666467 [details], which is about putting the menu on top of a white background, are the ones we want. But is there a way to make them look better?

Comment 17

[Will Kahn-Greene [:willkg] ET needinfo? me]

Adding s= sprint information to whiteboard.

Comment 18

[Ricky Rosario [:rrosario, :r1cky]]

We haven't started this. Dropping to next sprint.

Comment 19

[Rehan Dalal (Inactive)]

Landed:
https://github.com/mozilla/kitsune/commit/60f18aa3cb45ae64e1149370034752e18d547741

Pushed to production now by me.

Comment 20

[Sean Martell]

Just want to confirm what was pushed here. I'd prefer the first option where the bar is not full width. 

Thanks!

Comment 21

[Kadir Topal [:atopal]]

Sean, we didn't push the menu bar yet, were waiting for your feedback. Preference noted. Just to be sure, would you object against the second option?

Comment 22

[Sean Martell]

Yes. the first is consistent with what we're doing on the rest of our sites.

Should have clarified. Thanks.