Improvements to high contrast mode support

Skip to first unread message

Dão Gottwald

Oct 12, 2016, 11:40:36 AM10/12/16
to firefox-dev
Over the last quarter, I've been focused on making Firefox properly support high contrast mode again. The tracking bug for this is <>.

In case you didn't know, high contrast mode is a collection of Windows themes tailored for users with not so good eyesight:

There are four high contrast themes available, three of which have black as their base color and one black-on-white variant:

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):
Menu bar, search bar and about:home (after):
Menu panel and customize mode (before):
Menu panel and customize mode (after):

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.


Mike de Boer

Oct 12, 2016, 4:05:21 PM10/12/16
to Dao Gottwald, firefox-dev
\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 ;-)



firefox-dev mailing list

Tim Guan-tin Chien

Oct 20, 2016, 2:11:52 AM10/20/16
to Dao Gottwald, firefox-dev
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

Oct 20, 2016, 5:23:22 AM10/20/16
to Tim Guan-tin Chien, Matthew Noorenberghe, firefox-dev
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:

Tim Guan-tin Chien

Oct 20, 2016, 11:36:03 PM10/20/16
to Dão Gottwald, Matthew Noorenberghe, firefox-dev
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]

Oct 21, 2016, 12:55:11 AM10/21/16
Reply all
Reply to author
0 new messages