872037 - Links on the new Firefox first run pages has insufficient contrast

Status: RESOLVED FIXED

(www.mozilla.org :: Pages & Content, defect, P3)

Description

[Isac Lagerblad (:icaaq)]

On the following pages:

https://www.mozilla.org/en-US/firefox/21.0/firstrun/a1/
https://www.mozilla.org/en-US/firefox/21.0/firstrun/a2/
https://www.mozilla.org/en-US/firefox/21.0/firstrun/a3/
https://www.mozilla.org/en-US/firefox/21.0/firstrun/a4/
https://www.mozilla.org/en-US/firefox/21.0/firstrun/a5/
https://www.mozilla.org/en-US/firefox/21.0/firstrun/a6/
https://www.mozilla.org/en-US/firefox/21.0/firstrun/b1/
https://www.mozilla.org/en-US/firefox/21.0/firstrun/b2/
https://www.mozilla.org/en-US/firefox/21.0/firstrun/b3/
https://www.mozilla.org/en-US/firefox/21.0/firstrun/b4/


the contrast on the links (.sky a{}) needs to be enhanced to follow the WCAG 2.0 recommendations.

Contrast Analyzer [1] says:

Foreground: #67A7D0 - Background: #FFFFFF

The contrast ratio is: 2.6:1

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

1.4.3 Contrast (Minimum):  Text (and images of text) have a contrast ratio of at least 4.5:1, except if the text is pure decoration.  Larger scale text (at least 18 point or 14 point bold) or images of text can have a contrast ratio of 3:1. (Level AA)

1.4.6 Contrast (Enhanced): Text (and images of text) have a contrast ratio of at least 7:1, except if the text is pure decoration.  Larger scale text (at least 18 point or 14 point bold) or images of text can have a contrast ratio of 4.5:1. (Level AAA)

Note: Fonts that are extraordinarily thin or decorative are harder to read at lower contrast levels.

Open Sans Light is one of these thin fonts.

Comment 1

[Jennifer Bertsch [:jbertsch]]

Hi Isac-

Thanks so much for your feedback on these versions of the /firstrun page.

We are kicking off testing this week to better understand how users will interact with "product education" and "brand education" modules on the /firstrun page.  The URLs you've cited above are all part of the first iteration of this test.  We'll incorporate your feedback in the second iteration of the testing.

I'm adding this bug to the mozilla.org Kanban board for tracking.

Again, thanks for your help,
Jen

Comment 2

[Alex Gibson [:agibson]]

For reference, this was the direction taken to improve link contrast the firefox nightly first run page:

https://bugzilla.mozilla.org/show_bug.cgi?id=871756#c6

Comment 3

[Jonathan Petto [:jpetto]]

This bug was addressed in PR 1098 (https://github.com/mozilla/bedrock/pull/1098/files#L8L24), which was merged to master on 7/23.

Comment 4

[Felix Miata]

Attachment: screenshot of page that loads when https://www.mozilla.org/en-US/firefox/23.0/firstrun/ is entered into urlbar

I find it impossible to see evidence this has been fixed. Several links are barely discoverable, much less legible.

Comment 5

[Gérard Talbot]

When I go to
https://www.mozilla.org/en-US/firefox/new/
I find it very difficult to believe that "Systems & Languages" link and the text "English (US)" have sufficient background vs color contrast, furthermore if font-size for those are set, just like that, to 11px.

Allow me to be utterly precise here.

I say the Systems & Languages' color: rgb(153, 153, 153) is not enough contrasting with div#outer-wrapper's background-image: radial-gradient(rgb(234, 239, 242) 0px, rgba(212, 221, 228, 0.5) 50%), linear-gradient(rgb(202, 225, 244) 0px, transparent 100%);

I say span.download-lang's color: rgb(52, 96, 18); is not enough contrasting with a.download-link's background-color: rgb(101, 147, 36); background-image: linear-gradient(rgb(129, 188, 46), rgb(101, 147, 36));

Comment 6

[Kohei Yoshino]

Gérard: Contrast issues on the download button is tracked by Bug 629727.

Comment 7

[Jonathan Petto [:jpetto]]

The new firstrun pages have been reduced to 2 variations. They are currently living at:

http://www.mozilla.org/en-US/firefox/22.0/firstrun/a/
http://www.mozilla.org/en-US/firefox/22.0/firstrun/b/

Apologies for not clarifying in my last comment.