Search Support

Beware of phishing attacks: Mozilla will never ask you to call a number or visit a non-Mozilla website. Please ignore such requests.

Learn More

Rediuce text contrast with CSS

  • 7 odgovori
  • 1 ima ovaj problem
  • Posljednji odgovor poslao omotrl

more options

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)

more options

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.

more options

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?

Izmjenjeno od strane omotrl

more options

Odabrano rješenje

more options

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.

more options

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

more options

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.

more options

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