Closed Bug 800577 Opened 12 years ago Closed 11 years ago

Improve text readability in [Sandstone] [Bedrock] footer

Categories

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

defect
Not set
normal

Tracking

(Not tracked)

RESOLVED WONTFIX

People

(Reporter: david.weir, Unassigned)

References

(Depends on 1 open bug)

Details

(Keywords: access)

Attachments

(1 file)

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
Summary: footer → footer issues
OS: Windows 7 → All
Hardware: x86_64 → All
Whiteboard: access
Depends on: 721518
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
http://www.mozilla.org/en-US/

for the main one down the bottom
Attached image footer image
added a screenshot with the issue
Can you make the text darker for both the grew and the blue 

also make the mozilla logo darker
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.
Icaaq: Do you have additional feedback here?
Summary: footer issues → Improve text readability in [Sandstone] [Bedrock] footer
Whiteboard: access
Whiteboard: [access]
(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.
Keywords: access
Whiteboard: [access]
Icaaq can you do this bug if possible
Flags: needinfo?(icaaaq)
i can have a look at it next week
Flags: needinfo?(icaaaq)
any update on this
John- 

Could someone from your team please comment?

Thx,
Jen
Flags: needinfo?(jslater)
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!
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.
Marking resolved -> won't fix based on the comments from Sean.

Thanks everyone for your discussion of this issue.
Status: NEW → RESOLVED
Closed: 11 years ago
Flags: needinfo?(jslater)
Resolution: --- → WONTFIX
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 :(
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: