926319 - A11y: the Search field in the middle of the home have not enough contrast

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Design, defect)

Description

[Jean-Yves Perrier [:teoli]]

The search bar, which is the most important widget on the home page has not enough contrast.

People with less than average vision have problem to spot it.

(Even I with a correct color vision, I find it too dimmed)

Comment 1

[John Karahalis [:openjck]]

Thanks for reporting this, Jean-Yves. Do you know of specific people who have trouble seeing it? Otherwise, Sean would like to keep this as-is.

Comment 2

[Jean-Yves Perrier [:teoli]]

Can you give the rationale for it?

Because:
1. This is the most important action (as defined by the UX survey at the start of the redesign)
2. Contrast ratio is 2.16 instead of the 4.5 required by WCAG. It is not a small difference, it is a huge (I mean it is not 4.45 or so), and the background is not unicolor, so it makes it even more difficult to see.
3. All other widgets on the page have a higher contrast ratio making this difficult to see, it is the central element of the page (because of pt. 1) and the one with less contrast, which is kind incoherent.

I need a refutation of these arguments, I can't answer to the community: "I don't know why they refused, sorry, but they did.".

And yes I know specific people who have trouble seeing it. Some were at the summit.

Comment 3

[ali spivak]

Sean, can you please take a look at this bug and make a proposal for how we can make the recommended changes to accommodate for accessibility/screen readers? If this is not something you are willing to do, please explain why.

Comment 4

[David Walsh :davidwalsh]

So what do we want to do here?  Just white?

Comment 5

[Isac Lagerblad (:icaaq)]

Ali: Why is this a wontfix?

Comment 6

[John Karahalis [:openjck]]

Having thought about this for a while, I agree that additional contrast would be for the best. I have heard the same feedback outside of this bug, and feel that this is as much a usability issue as an accessibility one (conventions are important, and I rarely come across non-white search boxes).

I can run some A/B tests on how different contrasts impact usage, assuming usage is what we want to optimize.

Comment 7

[David Walsh :davidwalsh]

How would we quantify success?  More searches?

Comment 8

[John Karahalis [:openjck]]

It depends on what we want to optimize, really. I would imagine we want to optimize usage without significantly impacting visual appeal. Perhaps success = increased usage + OK from Sean.

Comment 9

[John Karahalis [:openjck]]

I should mention that even if greater contrast does not increase usage, we may still need to make changes for the sake of accessibility. More next week.

Comment 10

[ali spivak]

I agree. Let's increase the contrast and monitor if it increases searches.

Comment 11

[John Karahalis [:openjck]]

We started A/B testing this with promising results, but paused the test a couple of weeks ago due to a bug. I'll spint it back up and report here with the results.

Comment 12

[John Karahalis [:openjck]]

The results are in. The homepage search box is used by about 42% more people when it has a white background.

Appearance being tested: http://i.imgur.com/LkFBFOB.png
Optimizely results: https://www.optimizely.com/results?experiment_id=633130785&token=13a17023a9a39c348db8

This shines light on how users behave, but does not necessarily indicate that the white search box is more accessible than the one we have now. Qualitative user testing or expert analysis might be better for that. But if we want to increase the number of users who use search, this would be a good way of doing it.

Comment 13

[Isac Lagerblad (:icaaq)]

I think :teolis #comment 2 says quite a bit if it's accessible or not "Contrast ratio is 2.16 instead of the 4.5 required by WCAG. It is not a small difference, it is a huge (I mean it is not 4.45 or so), and the background is not unicolor, so it makes it even more difficult to see."

Comment 14

[Luke Crouch [:groovecoder]]

Sean - is this enough data to make the change? Or do we need more analysis?

Comment 15

[John Karahalis [:openjck]]

And in particular, aside from how this affects user behavior, is this a visual design we feel comfortable with?

Comment 16

[Holly Habstritt Gaal [:Habber]]

What would the search field look like to meet the 4.5 required by the WCAG? Just curious since the test was conducted at 100% opacity.

Comment 17

[David Walsh :davidwalsh]

How did your experiment work out?  Can we implement it?

Comment 18

[John Karahalis [:openjck]]

(In reply to David Walsh :davidwalsh from comment #17)
> How did your experiment work out?  Can we implement it?

See comment 12 and comment 15. Happy to go with that if we decide we are comfortable with it visually.

Comment 19

[[github robot]]

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

https://github.com/mozilla/kuma/commit/6c5b6249fc930dd359fd3b77638be380f02a4cd8
Fix bug 926319: Make homepage search box white

https://github.com/mozilla/kuma/commit/e320e646c203631284b1a45d0ceb179980c4ed73
Merge pull request #2833 from openjck/926319-white-search-box

Fix bug 926319: Make homepage search box white