871756 - Links on the Firefox nightly first run page has insufficient contrast

Status: VERIFIED FIXED

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

Description

[Isac Lagerblad (:icaaq)]

The contrast on links needs to be enhanced to follow the WCAG 2.0 recommendations.

Contrast Analyzer [1] says:

Foreground: #67A7D0 - Background: #E3E3E3

The contrast ratio is: 2.0: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.

[1] http://www.paciellogroup.com/resources/contrastAnalyser

Comment 1

[Jennifer Bertsch [:jbertsch]]

adding to mozilla.org kanban board

Comment 2

[Jennifer Bertsch [:jbertsch]]

Hi Sean-

Could you please give us some guidance on color selection?

Thx,
Jen

Comment 3

[Alex Gibson [:agibson]]

For reference I've taken a quick look at this:

Making the @linkSkyBlue variable in sandstone 21% darker would enable the main links on this page to pass WCAG 2 Level AA.

The new link color in this instance would be: rgb(48, 114, 156)

In order to meet WCAG 2 Level AAA, the link color would need to be 32% darker than current.

The new link color in this instance would be: rgb(35, 82, 113)

This would also likely fix bug#872037

Comment 4

[Alex Gibson [:agibson]]

Attachment: Screengrab - Left: current link colour. Right: 21% darker (Passes WCAG 2 Level AA)

To make things a bit easier I've attached an image showing a before/after. 

This shows how the links could look if we altered the contrast enough to meet WCAG2 Level AA, by making them a slightly darker blue.

Comment 5

[Alex Gibson [:agibson]]

Ping - just wondering if we could get an update on direction here?

Thanks!

Comment 6

[Sean Martell]

Please use http://www.mozilla.org/en-US/styleguide/identity/firefoxos/color/ and have the dark firefox blue as default, hover to the light blue.

Thanks!

Comment 7

[Alex Gibson [:agibson]]

PR opened here: https://github.com/mozilla/bedrock/pull/1019

Comment 8

[[github robot]]

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

https://github.com/mozilla/bedrock/commit/becb2684ebcbe8a2d789cec0da8d41e94a97e2f1
Links on Firefox nightly first run has insufficient contrast bug 871756

https://github.com/mozilla/bedrock/commit/a5edb32f666d9cdc955422f95c4045c64cc00625
Merge pull request #1019 from alexgibson/links-firefox-nightly-first-run-insufficient-contrast-bug-871756

Links on Firefox nightly first run has insufficient contrast bug 871756

Comment 9

[raymond [:retornam] (inactive)]

fixed on stage https://www.allizom.org/en-US/firefox/nightly/firstrun/

Comment 10

[raymond [:retornam] (inactive)]

verified fixed https://www.mozilla.org/en-US/firefox/nightly/firstrun/