924767 - text is too light to read on a white background

Status: RESOLVED WORKSFORME

(developer.mozilla.org Graveyard :: Design, defect)

Description

[nitishchandrachinta]

What feature should be changed? Please provide the URL of the feature if possible.
==================================================================================
URL :https://developer.mozilla.org/en-US/docs/Developer_Guide?redirectlocale=en-US&redirectslug=Mozilla_Hacker%27s_Getting_Started_Guide/#wikiArticle

I think every element in new design is so light-colored and this would be a problem to read the content. Headings are light blue in color and the background is pure white etc..

What problems would this solve?
===============================
Increase the font weight of content and change the color of headings to a darker(preferably blue) color.

Who would use this?
===================
Everyone who visits the MDN webpage.

What would users see?
=====================
The suggestion is regarding the content-style. So, entire webpage is affected with this

What would users do? What would happen as a result?
===================================================
Any user wouldn't like to visit a webpage frequently when the content is difficult to read.

Is there anything else we should know?
======================================

Comment 1

[Jean-Yves Perrier [:teoli]]

I've heard this several times during the feedback sessions.

Note that Chris Mills put a lot of thing in <strong> in the Apps and Firefox OS zones landing pages: this is likely a consequence of this very same problem.

Comment 2

[Kaustav Das Modak [:kaustavdm]]

Is this a confirmed bug in that case since it blocks 910513 now?

Comment 3

[ali spivak]

Sean, can you please take a look at this bug and make a proposal for how we can make the recommended changes to accommodate for accessibility/screen readers? If this is not something you are willing to do, please explain why.

Comment 4

[Stuart Cook]

After having trouble reading page text in the new design, I tried using developer tools to locally change the text colour from grey to black. The difference is like night and day! Text that once strained the eye to read becomes crystal clear.

It seems strange to me that a site primarily focused on reading would use a colour scheme that hinders reading.

Comment 5

[savior]

[WHITE BACKGROUND] Please, add a dark version option that changes MDN color palette,  it's very very hard to read text over a strong white background, Please makes MDN more accessible for people like me that have eyes very sensitive to white.

Thank you so much..

Comment 6

[Isac Lagerblad (:icaaq)]

I tweaked the background in my userContent.css and I found the text much much easier to read.

http://cl.ly/image/3T0a2U3K3z3p

I only added a little bit darker background #f6f6f6 :)

Comment 7

[Isac Lagerblad (:icaaq)]

Attachment: userContent.css

My userContent.css if you want to try it out, put it in a chrome-folder inside your firefox profile folder.

On OSX it's located here:
/Users/[username]/Library/Application\ Support/Firefox/Profiles/****.[profileName]/chrome/userContent.css

restart!

It's no way optimized and sort of a quick hack but I find it much easier to read on this background.

Comment 16

[David Walsh :davidwalsh]

Let's just bite the bullet here.  Sean, can we move to #333 or something?  Tired of these old redesign bugs still being open :/

Comment 17

[Eric Shepherd [:sheppy]]

I have to admit, I'm not clear on what text is the problem here. I look at the page and change the body text to be black, and it doesn't look any different. That said, I generally feel that user complaints win over all other things when it comes to contrast issues. We've gone through this before, with design saying it looks great while users complain about the contrast, until we finally cave and go to black text.

I say we just bite the bullet and do something here.

Comment 18

[andrew.e.mauney]

I believe the problem originated with a combination of the font color and weight coupled with the background color. I noticed it both on a OSX 10.6.8 machine with a Dell monitor and a lower-tier Toshiba laptop running Windows 8. 

I don't have the monitor next to me right now but I can check again when I am in the office tomorrow. Just looking on my machine at home, it is much better than I remember it being when I made the issue last October.

Comment 19

[Stuart Cook]

(In reply to Eric Shepherd [:sheppy] from comment #17)
> I have to admit, I'm not clear on what text is the problem here. I look at
> the page and change the body text to be black, and it doesn't look any
> different.

For this sort of colour scheme, the contrast level varies wildly based on local factors like display quality/configuration.

Looking at MDN on the three devices I happen to have at hand, the text colour is acceptable on two of them, and unbearably light on the third. So an inability to reproduce on any one system doesn't say much about the impact on those users actually affected.

Comment 20

[Raffzahn]

To me it's still clear visible and a heavy burden when reading. The text blends in with the background. The difference is clear visible agains other windos with similar font size but straight black on white colour scheme. I'm using Win7 with a Radeon card and a colour calibrated Dell U2711 screen. I'm prety sure the display is as intended.

I'm way past 50 by now, so eventually this is just a problem to elderly readers:)

Comment 21

[David Walsh :davidwalsh]

Can you give a suggestion Raffzahn?  Would #333 be better?  Your suggestion would be very valuable!

Comment 22

[Philip Chee]

(In reply to Eric Shepherd [:sheppy] from comment #17)
> I have to admit, I'm not clear on what text is the problem here. I look at
> the page and change the body text to be black, and it doesn't look any
> different. That said, I generally feel that user complaints win over all
> other things when it comes to contrast issues. We've gone through this
> before, with design saying it looks great while users complain about the
> contrast, until we finally cave and go to black text.

Designers have expensive high resolution monitors that are carefully calibrated. End users probably have crappy monitors that have never been calibrated (assuming that the user even knows what this means)

(In reply to David Walsh :davidwalsh from comment #21)
> Can you give a suggestion Raffzahn?  Would #333 be better?  Your suggestion
> would be very valuable!

Look just change the font colour to #000. Billions of users with less than perfect eyesight will thank you for that.

Comment 23

[Eric Shepherd [:sheppy]]

Attachment: On the left: Windows 7 Enterprise. On the right, Mac OS X.

On the left in the image I've attached is a page rendered on Windows 7 Enterprise. On the right is what it looks like on my MacBook Pro on OS X 10.9.3. The text on the left is signficantly greyer than on the Mac.

The screenshot of this page on Windows was sent to me by a user.

This is probably the source of this complaint; I don't know why it happens though.

Comment 24

[Eric Shepherd [:sheppy]]

Worth noting: my Mac has a retina display while the source machine does not.

Comment 25

[John Karahalis [:openjck]]

(In reply to Philip Chee from comment #22)
> Designers have expensive high resolution monitors that are carefully
> calibrated. End users probably have crappy monitors that have never been
> calibrated (assuming that the user even knows what this means)

I don't feel strongly about this one way or the other, but it should be mentioned that the color was not chosen for subjective appeal. This choice was informed by accessibility research, which indicated that a darker font would not statistically improve readability. Whether the findings are correct is another matter.

Comment 26

[Eric Shepherd [:sheppy]]

The problem is that differences in text rendering between platforms can cause these color choices to have substantial consequences in terms of readability. Due to the way text is rendered and smoothed on Windows, grey text tends to be substantially lighter in color than on the Mac, from a subjective point of view, due to a smaller number of pixels being rendered at the specified color.

Comment 27

[John Karahalis [:openjck]]

Yeah. I also wonder if that has something to do with it. I doubt the research accounts for the huge variety of environments available today.

Comment 28

[Jean-Yves Perrier [:teoli]]

John, can you link to the research conducted?

Comment 29

[John Karahalis [:openjck]]

I'm not sure where the findings are documented, but Sean might know. Just to be clear, this was not a UserTesting experiment or something else we ran, but was instead work done by researchers outside of Mozilla and unrelated to this project.

Comment 30

[Eric Shepherd [:sheppy]]

I'm not sure it really matters what the study or experiment says. If we're getting this many complaints about legibility, there's a problem that needs to be addressed. We went through this same back and forth with the last design, too, and the one before it. The design team says the slightly gray text is more readable, but users complain that the contrast isn't strong enough, and after months of back and forth we finally change it to black and user complaints stop.

Can we just skip a few months of this process and just make it black and be done with it this time? :)

Comment 31

[John Karahalis [:openjck]]

To be pedantic, while a high number of bug reports is evidence of something, it's not necessarily evidence of poor readability. I wouldn't rule out that users are simply unaccustomed to the color, especially considering that seven of the eight bugs were submitted less than one month after the redesign launched.

That's not to say that readability cannot be the explanation---it might be---but with only subjective reports it can be hard to say. What would be really interesting would be an experiment measuring and comparing words-read-per-minute in the two different designs.

Comment 32

[Eric Shepherd [:sheppy]]

(In reply to John Karahalis [:openjck] from comment #31)
> To be pedantic, while a high number of bug reports is evidence of something,
> it's not necessarily evidence of poor readability. I wouldn't rule out that
> users are simply unaccustomed to the color, especially considering that
> seven of the eight bugs were submitted less than one month after the
> redesign launched.
> 
> That's not to say that readability cannot be the explanation---it might
> be---but with only subjective reports it can be hard to say. What would be
> really interesting would be an experiment measuring and comparing
> words-read-per-minute in the two different designs.

Well, I've had multiple conversations with people who have specifically said that their eyes hurt trying to strain to read the text on MDN, so I do in fact think this is about readability.

"Words-per-minute-read" is not the issue here. It's eye strain. You can read fast even when your eyes hurt doing it.

Comment 33

[Sean Martell]

As I've said in the past on these reports, we're above and beyond the accessibility standards for contrast ratio on readability - it was baked in to the initial design.

Since we exceed those standards, anything else reported should be treated as user preference and not an accessibility bug. If we want to allow customization in a preferences panel, that is extra work on our end but we should not feel the need to alter the design as is.

There are accessibility options baked into the browser itself if need be for users who have issues with contrast beyond our standards compliance.

Comment 34

[MDN Team (:mdn-dev)]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/91ed9b57c3485309eba10838f33bd3465f3248b5
Bugs 924767 & 924583: Increase contrast on text and links

Fix Bug 924767 - text contrast
Bug 924583 - link contrast
Fix Bug 1306286 - homepage contrast

Subtle increase to contrast of body text since we were already meeting WCAG guidelines here.

Less subtle increase to link colour. Still don't met WCAG guidelines but significant improvement, especially on non-white backgrounds.

Homepage contrast issues should be fixed by combination of text contrast changes and changing colour of callout background.

https://github.com/mozilla/kuma/commit/87f5709dbd47e7b6073cf4cc114835c2b1e8002f
Merge pull request #4021 from mozilla/924767-924583-1306286-contrast

Bugs 924767, 924583, 1306286: Increase contrast on text and links r=escattone

Comment 35

[Florian Scholz (Open Web Docs)]

This bug is from the prior redesign. We redesigned again this year. I'm closing this ancient bug.