Improvements to high contrast mode support

[Dão Gottwald]

Over the last quarter, I've been focused on making Firefox properly support high contrast mode again. The tracking bug for this is <https://bugzilla.mozilla.org/show_bug.cgi?id=1016556>.

In case you didn't know, high contrast mode is a collection of Windows themes tailored for users with not so good eyesight: https://support.microsoft.com/en-us/help/13862/windows-use-high-contrast-mode

There are four high contrast themes available, three of which have black as their base color and one black-on-white variant: http://thewindowsclub.thewindowsclubco.netdna-cdn.com/wp-content/uploads/2015/01/high-contrast-themes-windows.jpg

High contrast mode considered an important accessibility feature. Formally we have always supported this, but in reality our support has been far from perfect and in many cases gotten worse over the years.

Here are a few screenshots to illustrate what kinds of bugs we've fixed:

Menu bar, search bar and about:home (before): http://imgur.com/vMXgZMm
Menu bar, search bar and about:home (after): http://imgur.com/a4Volo5
Menu panel and customize mode (before): http://imgur.com/iBXWbeA
Menu panel and customize mode (after): http://imgur.com/n881M4v

As you can see, issues range from text being completely illegible and icons disappearing, over icons and text lacking contrast, to some parts of the UI not adjusting at all to high contrast themes.

Support still isn't perfect but a lot better than it used to be. Going forward we as a team will need to remind ourselves that high contrast mode is a thing and that we're committed to supporting it. Please keep this in mind when writing and reviewing patches. Please test your features in high contrast mode.

You might want to take a look at the fixed bugs to get a sense of what's needed to support high contrast mode. It often comes down to picking platform colors instead of hardcoding color values, or carefully picking color values that don't assume that everyone is using the same default OS theme. If you're unsure what's needed to make your feature properly support high contrast mode, feel free to ask me for feedback.

Regards,
Dao

[Mike de Boer]

\o/ Nice work, Dão! I really like the before/ after screenshots, they really show the improvements made for the share of users that are, unfortunately, visually impaired.

I’ll be keeping this in mind and will probably reach out to you soon for your advise in making sure the findbar highlighter supports high contrast modes properly too ;-)

Cheers,

Mike.

_______________________________________________
firefox-dev mailing list
firef...@mozilla.org
https://mail.mozilla.org/listinfo/firefox-dev

[Tim Guan-tin Chien]

Great write-up and nice work!

I wonder what more we could do than "...keep this in mind when writing and reviewing patches"? Can we scan for hardcoded colors in tests? Do a screenshot comparison?

[Dão Gottwald]

Scanning for hardcoded colors is likely unfeasible. Realistically we can't replace all of them, and if used carefully they shouldn't be a problem.

mozscreenshots potentially supports testing in high contrast mode, but alas, that's currently not enabled: https://bugzilla.mozilla.org/show_bug.cgi?id=129456

[Tim Guan-tin Chien]

That doesn't seem to be the right bug # ...

The higher order of the same question is that there seem to be too much things to check manually, both for reviewers or patch authors. This is probably the fact of life of UI programming, but I wish these "things to note" can be represented in a more concentrated places than mailing list threads. It would definitely helps more if we are talking about "go faster", and when every review round trip cause a day for engineers in Asia!

[Francesco Lodolo [:flod]]

Right bug (I assume)
https://bugzilla.mozilla.org/show_bug.cgi?id=1294568