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

Rediuce text contrast with CSS

  • 7 பதிலளிப்புகள்
  • 1 இந்த பிரச்சனை உள்ளது
  • Last reply by omotrl

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?

தீர்வு தேர்ந்தெடுக்கப்பட்டது

All Replies (7)

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.

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(

   * {color: gray!important;}


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

omotrl மூலமாக திருத்தப்பட்டது

தீர்வு தேர்ந்தெடுக்கப்பட்டது

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.

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

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).

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 see. I'll use an add-on then. Thank you for your replies!