Enable or Disable Prefers-Contrast Feature in Firefox

For one reason or another, some people wanted to view websites in high or low contrasts. This is why the prefers-contrast feature was introduced in CSS (cascading style sheets) to be used along with HTML.  Using this feature a user can request a web site to be displayed in a contrast of his choice. So far only Chrome (and all the web browsers derived from its code) supported this new feature. But now with the version 101, Firefox has also started supporting this new feature.

However, if you do not want to use this feature then we can toggle it off using the following steps:

  1. Launch Firefox web browser and enter about:config in its address bar.
  2. Click on the button Accept the risk and continue to move forward to the next step.
  3. In the search box type layout.css.prefers-contrast.enabled. When the setting is displayed, double-click on the layout.css.prefers-contrast.enabled and change its value to false.Firefox Prefers-Contrast
  4. This should disable the use of this new contrast feature on Mozilla Firefox.

This preference enabled the use of prefers-contrast in CSS so that the user can choose whether he likes high contrast or the low contrast. This can be used to choose the level of contrast between the adjacent colors or the background/foreground colors. The requests can be either high, low or we can express no preference.

We can use this to request a high contrast as well as low contrast version of the website. The high contrast is usually requested by the people who want a clear distinction between the text and the background which makes it easy to read text on sites like blogs and news. The low contrast is requested by the people who want to reduce the strain on their eyes specially at the night time or in darker surroundings.