Accessibility/ColorFilters

What is this?

Color filters are a way for users with visual impairments to adjust the browser's contents in order to enhance perception. Users who have a system high contrast theme enabled will be offered this feature. We will also expose a WebExtension API that will allow extension authors to experiment with this functionality and offer more ways to use this functionality.

Background

Currently, Firefox has a "high contrast" mode that is enabled if the Windows high contrast theme is used. In this mode, web content is displayed with background images removed and a high contrast ratio for text and background (eg. white/black or black/white or yellow/black). This works well for simple documents breaks quickly with more modern pages with heavy visuals.

• 

  A New Yorker article in High Contrast Firefox

• 

  Flickr in regular mode

• 

  Flickr in high contrast mode

Chrome has chosen to support "high contrast" differently: when the theme is detected, they suggest that the user install the "High Contrast" extension from the chrome store. The extension offers color filtering described above. It is implemented as CSS filters that are applied to the entire viewport. The graphics performance is degraded when a filter is used, in addition certain workarounds needed to be implemented in the plugin to achieve the desired effect.

The goal of this project is to offer users a feature that is automatically available, easy to use, configurable, and performant.

Links

• Feature proposal slides
• Chrome High Contrast extension
• Paul Bone's blog post about using the web with low vision

Tasks

There are multiple moving parts to get this done spanning multiple modules. The table below is for tracking this.