701608 - General web page background and text color issue

Status: RESOLVED FIXED

(www.mozilla.org :: General, defect)

Comment 1

[Terry R.]

There have been a few comments over the months regarding this to the webmaster email address.  This is the latest one, and I felt it should be filed.  They all refer to the Mozilla support pages, so maybe the bug should be filed there?


I would like to see use of plain black text as much as possible and darker colours when color is used for text.

I have an excellent 28" flat screen monitor and decent video card.  Other items displayed on my screen such as documents and other WEB sites don't have the problem so it is not my equipment.  My eyes are just fine and I have excellent vision.

Whoever chose the font colors needs to be a little less 'artsy' and a lot more practical.

Comment 2

[James Socol [:jsocol, :james]]

I don't know why this was moved to SUMO. It's a question for our UX and visual designers across all properties.

Comment 3

[Crystal Beasley [:skinny, :crystal]]

@terry Which site in particular?

Comment 4

[Terry R.]

Hi Crystal,
Any pages on support.mozilla.com .  From what reports I've read, the text isn't black and it looks too light, the blue on blue tabs are hard to read.  I feel it looks okay, but it may be difficult for older users or color blind.

Comment 5

[James Socol [:jsocol, :james]]

Terry, I'm confused. Was there part of the email you didn't quote that referred to SUMO?

Comment 6

[Terry R.]

James, I've received others in the past, but didn't think they were enough to bother filing a bug.  Now after this last one, I figured it was time.  This part of the email was after I had already replied a few times to the user.  The original email (as the others) were referring to SUMO.

Comment 7

[Crystal Beasley [:skinny, :crystal]]

It does apply across all properties that use the blue pinstripe theme. I agree that the #666 gray body text and the blue links are too light. Black is actually not the most legible color (a case where more isn't more) because it's too harsh. I'm assigning the ticket to me so I can find the right hex values.

Let's change them on SUMO for now and I'll raise it with creative for other sites like AMO.

Comment 8

[Terry R.]

Another response about the support pages received today.

The font colors in your web pages are a little light for vision impaired person to read. Light greys and light blues may be fashionable, but very poor choice for easy readability.

Comment 9

[Crystal Beasley [:skinny, :crystal]]

#doc-content {
    color: #555;
}

Comment 10

[Sean Martell]

Hey all,

Before we start changing the contrasts of elements of our websites, should we mention to the parties involved that they can custom override the CSS within a browser's preferences or even add-ons?

I'd rather not start making changes to this right away as we're currently creating a new look and feel that will be built out across our major properties.

If we could point them to support on how they could customize their viewing to suit their specific needs, that'd be ideal.

Comment 11

[Terry R.]

Sean,

None of the users who have complained about this would have the knowledge to use CSS to modify it.  I offered some alternative methods to them and they all refused that as a resolve, since no other sites they visit have these problems.  Also, these have been mostly users with sight issues of one kind or another, but others claimed they had perfectly good vision.

Comment 12

[Crystal Beasley [:skinny, :crystal]]

(In reply to Sean Martell from comment #10)

I 100% agree that we don't want to be making big cross-property design changes. I'm really looking forward to the new one moz theme. I would like to see better contrast in the new theme, so this is a step in the right direction. I don't believe this change will interfere with your progress as it is such a small change.

Comment 13

[Bram Pitoyo [:bram]]

I wonder if we can make a “v1.5” change? That is, tweak the page so that it simultaneously 1) has better visibility, and 2) starts to look like the new style.

Practical action items:
1. Look at the new moz style color palette (beta is okay)
2. Apply some of the colors on the Support page, increase contrast if needed
3. Tweak text spacing and sizes to further optimize readability

On item #3, I suspect that some of the color issues could be alleviated by optimizing the way the page is typeset.

Here are a few areas I found on my first pass:
1. Space between list items
2. Size difference between section heading (“Troubleshooting”, “Privacy & Security”) and list items
3. Text hierarchy of “Ask a Question” and “Help with”

Comment 14

[Ricky Rosario [:rrosario, :r1cky]]

(In reply to Crystal Beasley [:skinny, :crystal] from comment #9)
> 
> #doc-content {
>     color: #555;
> }

Are we moving forward with this change or holding off?

Comment 15

[Terry R.]

What is the status of this bug?  

Here is another user complaint:

There is one facet of Mozilla web pages I find really troublesome:  your use of gray rather than black text on your web pages.  This reduces the contrast ratio and makes text hard for me to read.  I can understand how this might appeal to some artsy-fartsy design mavens, but in this instance I think you've become a little too cute.

Comment 16

[Ricky Rosario [:rrosario, :r1cky]]

(In reply to Terry R. from comment #15)
> What is the status of this bug?  
> 
> Here is another user complaint:
> 
> There is one facet of Mozilla web pages I find really troublesome:  your use
> of gray rather than black text on your web pages.  This reduces the contrast
> ratio and makes text hard for me to read.  I can understand how this might
> appeal to some artsy-fartsy design mavens, but in this instance I think
> you've become a little too cute.

On SUMO we have a fix for this landing tomorrow: Bug 719981

Comment 17

[James Socol [:jsocol, :james]]

See also bug 727927 for the latest in Mozilla-wide styles.

Comment 18

[Sean Martell]

(In reply to Terry R. from comment #15)

> 
> There is one facet of Mozilla web pages I find really troublesome:  your use
> of gray rather than black text on your web pages.  This reduces the contrast
> ratio and makes text hard for me to read.  I can understand how this might
> appeal to some artsy-fartsy design mavens, but in this instance I think
> you've become a little too cute.


Just to clarify here, feedback like this is in no way useful to us when their feedback starts to insult our designers. I'd rather leave the posted criticisms to the constructive ones. Thanks!

Comment 19

[Ricky Rosario [:rrosario, :r1cky]]

This was filed against the old design.

Comment 20

[Terry R.]

I would consider the new design as fixing the old problem, no?

Changing INCOMPLETE to FIXED.