X
Tap here to go to the mobile version of the site.

Support Forum

Rediuce text contrast with CSS

Posted

Hi, is it possible to reduce text contrast (or increase its opacity), making it less black, on every site, but only where the text is 100% black?

Hi, is it possible to reduce text contrast (or increase its opacity), making it less black, on every site, but only where the text is 100% black?
jscher2000
  • Top 10 Contributor
8772 solutions 71719 answers

I don't think pure CSS can detect the color of text, except that you could try to match an inline style using numerous variations, such as [style*="color:black"], [style*="color: black"], [style*="color:#000"], [style*="color: #000"], etc. Colors applied through style sheets can't be matched that way.

A script can compute the text color of an element (getComputedStyle()), but considering the number of elements in a page, it would take some time.

You might look at extensions that can color sites to see whether any of those have the logic in them.

I don't think pure CSS can detect the color of text, except that you could try to match an inline style using numerous variations, such as [style*="color:black"], [style*="color: black"], [style*="color:#000"], [style*="color: #000"], etc. Colors applied through style sheets can't be matched that way. A script can compute the text color of an element ([https://developer.mozilla.org/docs/Web/API/Window/getComputedStyle getComputedStyle()]), but considering the number of elements in a page, it would take some time. You might look at extensions that can color sites to see whether any of those have the logic in them.

Question owner

Your explanation is somewhat too advanced for me :) But I see that what I want is not feasible. A simpler problem, then: If I want to reduce contrast (increase opacity) of all text in Wikipedia, how can I do it? If I wanted to make all text gray, I'd go

@-moz-document url-prefix(https://en.wikipedia.org/)

 {
   * {color: gray!important;}

}

but what's the text selector for contrast or opacity functions?

Your explanation is somewhat too advanced for me :) But I see that what I want is not feasible. A simpler problem, then: If I want to reduce contrast (increase opacity) of all text in Wikipedia, how can I do it? If I wanted to make all text gray, I'd go @-moz-document url-prefix(https://en.wikipedia.org/) { * {color: gray!important;} } but what's the text selector for contrast or opacity functions?

Modified by omotrl

FFus3r 50 solutions 757 answers

Chosen Solution

try one of these add-ons: * https://addons.mozilla.org/en-US/firefox/addon/text-contrast-for-dark-themes/ * https://addons.mozilla.org/en-US/firefox/addon/adjust-screen-brightness/
jscher2000
  • Top 10 Contributor
8772 solutions 71719 answers

Hi omotrl, there is a filter called contrast, but it mostly operates by darkening the background rather than lightening the text, at least in a brief test.

https://developer.mozilla.org/docs/Web/CSS/filter

Opacity unfortunately applies evenly to all colors, so lighter colors would become too light.

https://developer.mozilla.org/docs/Web/CSS/opacity

Hi omotrl, there is a filter called contrast, but it mostly operates by darkening the background rather than lightening the text, at least in a brief test. https://developer.mozilla.org/docs/Web/CSS/filter Opacity unfortunately applies evenly to all colors, so lighter colors would become too light. https://developer.mozilla.org/docs/Web/CSS/opacity

Question owner

Hi, jscher2000! Yes, I know, my question is about the text selector (or font selector). I am thinking along the following lines: select only the text and then apply contrast or opacity only to the text (it's okay that a light text will become even lighter).

Hi, jscher2000! Yes, I know, my question is about the text selector (or font selector). I am thinking along the following lines: select only the text and then apply contrast or opacity only to the text (it's okay that a light text will become even lighter).
jscher2000
  • Top 10 Contributor
8772 solutions 71719 answers

I don't think CSS has any way to select text nodes. As a rough approximation, you could name specific types of inline elements that commonly contain text:

a, label, button, input, span, b, i, u, strong, em {}

And block or table-cell elements that typically contain text:

p, td, th {}

And some text will be in a larger structural element such as:

div, body, section, article, main, header, footer {}

The problem is that as you get larger, more non-text things are affected.

I don't think CSS has any way to select text nodes. As a rough approximation, you could name specific types of inline elements that commonly contain text: a, label, button, input, span, b, i, u, strong, em {} And block or table-cell elements that typically contain text: p, td, th {} And some text will be in a larger structural element such as: div, body, section, article, main, header, footer {} The problem is that as you get larger, more non-text things are affected.

Question owner

I see. I'll use an add-on then. Thank you for your replies!

I see. I'll use an add-on then. Thank you for your replies!