800577 - Improve text readability in [Sandstone] [Bedrock] footer

Status: RESOLVED WONTFIX

(www.mozilla.org :: Legacy PHP system, defect)

Description

[David Weir (satdav)]

the footer is hard to read on the bottom of the mozilla.org sites on all pages the global one

its hard to read the logel bit of infromation and also the links are a bit hard to read

Comment 1

[Chris More [:cmore]]

David:

Can you provide specific URLs on the pages that are hard to read? I want to make sure we are looking at the same pages. We have multiple footers still because Mozilla.org is still multiple sites rolled together into one.

Chris

Comment 2

[David Weir (satdav)]

http://www.mozilla.org/en-US/

for the main one down the bottom

Comment 3

[David Weir (satdav)]

Attachment: footer image

added a screenshot with the issue

Comment 4

[David Weir (satdav)]

Can you make the text darker for both the grew and the blue 

also make the mozilla logo darker

Comment 5

[Chris More [:cmore]]

This could be resolved by adjust the CSS hex values for the footer text and footer text links. Just a bit darker on both would create more contrast and improve accessibility. We need to make sure the colors are updated and inline with the style guide too:

http://www.mozilla.org/en-US/styleguide/websites/sandstone/colors/

Jslater's team could recommend some colors that are a bit darker and create more contrast.

Comment 6

[Chris More [:cmore]]

Icaaq: Do you have additional feedback here?

Comment 7

[Isac Lagerblad (:icaaq)]

(In reply to Chris More [:cmore] from comment #6)
> Icaaq: Do you have additional feedback here?

Only some more technical information. and a tool to test different colors.

Online - http://leaverou.github.com/contrast-ratio/
App - http://paciellogroup.com/resources/contrastAnalyser

Here are the values on the different elements in the footer.

Mozilla logotype:
Foreground: #BBBBBB - Background: #FFFFFF

colour difference:204 / brightness difference:68

The difference in brightness between the two colours is not sufficient. The threshold is 125, and the result of the foreground and background colours is 68.

The difference in colour between the two colours is not sufficient. The threshold is 500, and the result of the foreground and background colours is 204.

-----------------------------------------------------------------------

Regular text:
Foreground: #666666 - Background: #FFFFFF

colour difference:459 / brightness difference:153

The difference in brightness between the two colours is sufficient. The threshold is 125, and the result of the foreground and background colours is 153.

The difference in colour between the two colours is not sufficient. The threshold is 500, and the result of the foreground and background colours is 459.

Note: Whilst the colour difference doesn't comply with the W3C specified range, it does comply with the range used by Hewlett Packard. Hewlett Packard recommends a colour difference limit of 400.

-----------------------------------------------------------------------

Links:
Foreground: #0096DD - Background: #FFFFFF

colour difference:394 / brightness difference:142

The difference in brightness between the two colours is sufficient. The threshold is 125, and the result of the foreground and background colours is 142.

The difference in colour between the two colours is not sufficient. The threshold is 500, and the result of the foreground and background colours is 394.

Comment 8

[David Weir (satdav)]

Icaaq can you do this bug if possible

Comment 9

[Isac Lagerblad (:icaaq)]

i can have a look at it next week

Comment 10

[David Weir (satdav)]

any update on this

Comment 11

[Jennifer Bertsch [:jbertsch]]

John- 

Could someone from your team please comment?

Thx,
Jen

Comment 12

[Sean Martell]

Hey all,

Thanks for testing the contrast/colors with the above tools. Based on the results, some comments:

wordmark - this is a secondary brand element to the tabzilla branding and should be treated as a graphical watermark here. It's meant to be light and not overly dominant.

legal text - this is lighter than the main body text as it is secondary in importance to the main content. Considering it is grey and the brightness difference between it and the white background is sufficient, I'd prefer we keep it as is.

links - I'd prefer if we stick with the Firefox light blue if possible, esp if the contrast/brightness difference is again acceptable. I'd rather not have to change this from our default brand colors. Again, if the contrast is sufficient on the white, I think this should be fine.

Thanks all!

Comment 13

[Sean Martell]

Some background - I had been passing these designs by dbolter when I was initially designing the pages to check accessibility concerns and we discussed the contrast ratio + the tools to check. It was tweaked to current values during the initial design process based on our discussions.

Just thought I'd share that to clarify.

Comment 14

[Jennifer Bertsch [:jbertsch]]

Marking resolved -> won't fix based on the comments from Sean.

Thanks everyone for your discussion of this issue.

Comment 15

[Isac Lagerblad (:icaaq)]

Hi again, 

So I just want to state that the link color (#0095DD) in the sandstone styleguide is not sufficient and maybe we could discuss this somehow :)

I've measured the contrast against the two most common colors on mozilla.org, white background (#ffffff) and the sandstone-background (#F1EFE8)

Against #ffffff the contrast ratio is 3.31:1.

Text failed at level AA
Text failed at level AAA
Large text passed at level AA
Large text failed at level AAA

Only large text passed. 

Against #F1EFE8 the contrast ratio is 2.88:1

Text failed at level AA
Text failed at level AAA
Large text failed at level AA
Large text failed at level AAA

Nothing passed :(