629727 - Version and OS details on Firefox download button is illegible for the visually impaired

Status: RESOLVED WONTFIX

(www.mozilla.org :: Information Architecture & UX, defect)

Description

[Matthew Middleton (:zzxc)]

The version and OS text on the green download button at mozilla.com/firefox (eg. 3.6.13 for Linux i686 English (US)) is black on a dark green background, which a visually impaired user reported as hard to read.  A color choice with better contrast should be used for this text instead.

Comment 1

[raymond [:retornam] (inactive)]

Can you please attach a screenshot, as it would be very helpful in correctly identifying and fixing the issue

Comment 2

[Matthew Middleton (:zzxc)]

Attachment: Screenshot showing hard-to-read text

Comment 3

[Steven Garrity [:sgarrity]]

Attachment: Experiment with darker text

This text is intentionally visually minimized as it is not usually relevant. That said, we don't want it to be illegible.

Matthew, would a minor increase in contrast as illustrated in this attachment (current text color on the left, new/darker on the right) be sufficient?

It's a tricky balance of making sure the content is accessible, but not distracting visitors by drawing too much attention to non-critical information.

Comment 4

[Chris More [:cmore]]

Closing old Mozilla.org website bugs due to them not being relevant to the new Python-based Bedrock system. Re-open if this is a critical bug and should be resolved on the new system too.

Comment 5

[Samuel Sidler (:ss)]

Still very much relevant, thanks for investigating Chris More!

Comment 6

[Gérard Talbot]

I am not visually impaired. When I go to
https://www.mozilla.org/en-US/firefox/new/
I am convinced that "Systems & Languages" link and the text "English (US)" have insufficient background vs color contrast, furthermore if font-size for those are set, just like that, to 11px.

Systems & Languages' color: rgb(153, 153, 153) is clearly 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%);

span.download-lang's color: rgb(52, 96, 18); is clearly 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 7

[Alex Gibson [:agibson]]

The small text underneath the buttons is no longer present. All that remains is a "Firefox Privacy" link that has high contrast (#fff).