This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Method to change site text color only if current background / foreground contrast is below certain value

  • 3 tontu
  • 1 am na jafe-jafe bii
  • 1 view
  • i mujjee tontu mooy JoeB

more options

I find a lot of sites that use text color from fairly light to medium gray, on white or light gray background which doesn't show up well. Some have so little contrast, it's like they're ashamed of the content.

The problem I expect from using a blanket statement in userContent.css, even if it mostly worked, is there will be some background colors that won't contrast well with black text; trading one problem for another.

If I try to set all backgrounds one color & all body or paragraph text to another, there will be other elements on pages that won't show up. One example - in Preferences / Colors, when "Override the colors specified by the page with your selections above - Always" is checked, it makes addon's UIs totally unreadable. Clearly, that won't work for pages with elements besides text. Elements on some sites just disappear. I'm not sure what type of sites today would work using override all colors with black & white or where any 2 fixed colors would work on most sites.

Is there a way to detect when sites use background / foreground colors with contrast below a certain value and only then change text to black? That would assume the background was a light color. If a dark background was detected, light text would be needed. It may be that sites have so many different types of elements / graphics, something like this would be impossible.

I find a lot of sites that use text color from fairly light to medium gray, on white or light gray background which doesn't show up well. Some have so little contrast, it's like they're ashamed of the content. The problem I expect from using a blanket statement in userContent.css, even if it mostly worked, is there will be some background colors that won't contrast well with black text; trading one problem for another. If I try to set all backgrounds one color & all body or paragraph text to another, there will be other elements on pages that won't show up. One example - in Preferences / Colors, when "Override the colors specified by the page with your selections above - Always" is checked, it makes addon's UIs totally unreadable. Clearly, that won't work for pages with elements besides text. Elements on some sites just disappear. I'm not sure what type of sites today would work using override all colors with black & white or where any 2 fixed colors would work on most sites. Is there a way to detect when sites use background / foreground colors with contrast below a certain value and only then change text to black? That would assume the background was a light color. If a dark background was detected, light text would be needed. It may be that sites have so many different types of elements / graphics, something like this would be impossible.

All Replies (3)

more options

If you disable website colors in Firefox then this affects background images. There are extensions that can modify the text and background color on web pages. You can search the add-ons website.

more options

Joebt said

I find a lot of sites that use text color from fairly light to medium gray, on white or light gray background which doesn't show up well...

One option is to use View > Page Style > No Style if you don't mind the page layout being 'stripped'. You'll see black-on-white text instead of the hard-to-read light gray text.


~Pj

more options

Thanks, I'll look at the addons to see if they do what I need. Generally, it's only something like changing the general text color from gray to black, for instance. I'm not sure why some web developers think that having low font to background color contrast is a good idea.

There can be many elements, using different HTML code, where changing just the body or paragraph font color leaves a lot of the page unchanged.