1444376 - Download buttons have insufficient text contrast

Status: RESOLVED FIXED

(www.mozilla.org :: Pages & Content, enhancement)

Description

[Alex Gibson [:agibson]]

One of the main a11y failures we're seeing on Lighthouse reports [1] are issues with insufficient contrast for the text on our download buttons:

```
Background and foreground colors do not have a sufficient contrast ratio.
Failing elements:
<strong class="download-title">
```

This could be having a negative effect on download rates from people who find low contrast text difficult to read.

[1] https://www.webpagetest.org/lighthouse.php?test=180309_K2_bebfa1bb933fbfdbfd80ce3b579f33c4

Seems like something that could be low effort to fix.

Comment 1

[Vince Joy]

(In reply to Alex Gibson [:agibson] from comment #0)
 
Hey Alex. This has been on my radar for some time now. The Photon guidelines clearly state that when we use that particular green as a background color, we need to use dark text on top of it. The current contrast ratio is terrible. This button involves no small amount of politics, but I do believe it should be easy to solve. 

If we say we care about accessibility, certainly our main CTA needs to live up to basic WCAG standards. 

At the moment, I'm getting pushback from the brand team on using black text on that green button. I don't know enough about the history of why/when we came to the decision to use that particular shade of green. I'd love to have a conversation about this button with whoever wants/needs to be there.

Comment 2

[Eric Renaud [:erenaud]]

Is this still a valid concern? I don't want close it if so. We are steadily changing but the green button in question is still in use on /firefox/ and /new

Comment 3

[Alex Gibson [:agibson]]

Yes this is still a valid bug.

Comment 4

[John Gruen [:jgruen]]

Hey Alex...will the redesign that's happening for Trailhead resolve this?

Comment 5

[Alex Gibson [:agibson]]

(In reply to [:jgruen] from comment #4)

Hey Alex...will the redesign that's happening for Trailhead resolve this?

The Trailhead campaign will port our main download page [1] to Protocol, which features the blue download button as opposed to green. So it will fix the issue for that one page. There are still many old pages on www.mozilla.org that use the old green button however, so technically this bug should remain open until it's fixed everywhere.

[1] https://www.mozilla.org/en-US/firefox/new/

Comment 6

[Alex Gibson [:agibson]]

Finally all fixed, as per: https://github.com/mozilla/bedrock/issues/5703