Change the colour of grey text back to black on website using poor contrast text (opens in new tab)

(addons.mozilla.org)

163 pointsfuntoos4y ago113 comments

113 comments

63 comments · 17 top-level

sssilver4y ago· 18 in thread

I love the “nothing in nature is true black so don’t use #000000” argument.

Correct, nothing is, and your #000000 won’t be either once it’s shown on a physical screen.

Very much related to my comment [1] two days ago on Please Stop Using Grey Text [2] that says essentially the same thing with more verbiage

[1] https://news.ycombinator.com/item?id=31421666

[2] https://news.ycombinator.com/item?id=31420938 (397 points by marban 1 day ago, 376 comments) - https://tangledweb.xyz/please-stop-using-grey-text-3d3e71acf...

waffle_ss4y ago

What is the point in linking this? Imagine the mess that comment threads would be if everyone who made similar comments about something did this.

1 more reply

mikae14y ago

I find there's often a high degree of educated comments here on HN. But, when it comes to monitors, readability and the physics of light something happens. #000 on #fff won't burn out your retinas. :)

kuschku4y ago

> #000 on #fff won't burn out your retinas. :)

There’s a massive difference between the contrast of that outdoors on a shitty panel (where you’re lucky to get 5:1 contrast) and indoors in a light-controlled environment (where 200:1 contrast is easily reached).

And yes, that 200:1 contrast can get painful, especially if you’ve got astigmatism.

1 more reply

da39a3ee4y ago

I think the trouble is that even educated humans struggle to talk intelligently about medical and psychological problems. We all worry about our health and mortality, and the idea that a psychological or medical condition threatens your life is somewhere between an existential threat, and a worrying cloud over your life. As a result, people easily become wedded to the idea that a particular condition is affecting them, or someone close to them. And they lose their normal objectivity when it comes to swallowing up medical jargon and scientific-sounding names for nebulous psychological / educational phenomena.

1 more reply

hnbad4y ago

There's a difference between using "soft black" and using low-contrast gray like you're Apple in the 2010s.

The thing about pure black isn't that it's unnatural, but that when paired with white its contrast can actually be uncomfortable and less accessible than a slightly toned down color combination (especially on full brightness).

4 more replies

ciwolsey4y ago

Monitors or anything backlit are terrible to read from for any length of time. Paper or e-ink is superior. I don't see anything wrong with lowering the contrast of text on a screen to compensate for that fact.

1 more reply

eurasiantiger4y ago

This thinking likely stems from art studies: in classical painting, black is generally taught as one of the forbidden pigments because of ”nothing in nature is black” and, more functionally, because it cannot be used to darken other colors without losing vibrancy and thus a black area cannot smoothly blend to another color.

simmo90004y ago

And then there was Goya. :)

hulitu4y ago

And nothing is true white so don't use #ffffff. We can continue with blue, green, red. /s

wolpoli4y ago

I am sure designers will stop using grey text on solid white as soon as someone shows them that paper isn't really pure white, but is a bit off white and it has texture and gradients, depending on the light source. Maybe they'll start embracing skeuomorphism again. /s

rob744y ago

True magenta (#f0f) and true cyan (#0ff) are the worst if you ask me...

1 more reply

helldritch4y ago

Generally I prefer a mid-saturation blue-tinted grey in the #111111 horizontal line for my base text colours, which is basically indistinguishable from black but works better with the other hues on our website.

That being said, it's easy using the prefers-contrast CSS property to override that to #000000 for people who are hard of sight.

It's supported by edge, safari, chrome, opera but it's a bit finnicky in Firefox.

HPsquared4y ago

On one of my old phones (Samsung S4), the display would treat pure black differently to dark grey. Pure black would smear across the display when scrolling, a kind of ghosting effect. Probably some effect of the pixels being turned fully off.

Dark greys didn't have this effect.

I suspect a lot of these "dark grey text" conventions may be related to this hardware issue.

sp3324y ago

OLED pixels take slightly longer to turn back on from fully off. I remember some VR headsets had trouble with this and they just set the minimum brightness to "1" instead of "0".

Edit: note this is per-subpixel, so you need to set some value in each color channel.

ciwolsey4y ago

Pure black and white on a screen is far more fatiguing on a screen than on off a screen so I don't see what's wrong with compensating for that fact.

jerrygoyal4y ago

> nothing in nature is true black so don’t use #000000” argument.l

this comment reminds of the statement made by Jobs about the round corners in the physical world.

izzydata4y ago

Alright how about #010101

;)

perihelions4y ago· 13 in thread

I recommend people with similar interests take a look at uBlock's filter language (yes, the ad blocker). It's a short and shallow learning curve until you can inject your personal CSS into webpages, and incrementally tweak them.

Two small examples:

"Show all text on the internet as black"

    *##*:style(color: black !important)

"Show comment text on HN as bold"

    ycombinator.com##.comment:style(font-weight: bold !important)

TAKEMYMONEY4y ago

If you want to inject CSS, use a "user styles" manager like Stylus. There's almost no learning curve if you know CSS.

You can write entire sheets for all pages, multiple or single domains. For example to make HN legible (basic text, spacing and contrast):

    @-moz-document domain("ycombinator.com") {
        :root {
            --font-size: 1.2rem;
            --text-color: #333;
        }
        .comment {
            font-size: var(--font-size);
            line-height: 1.5;
        }
        body {
            font-family: sans-serif !important;
            font-size: 100%;
        }
        .comhead a:link,
        .subtext a:visited,
        .c00,
        .c00 a:link,
        td {
            color: #333;
            font-size: var(--font-size);
        }
        td {
            background-color: transparent;
        }

}

(Personally I remove all fading from downvoted comments as well, they're unreadable)

https://chrome.google.com/webstore/detail/stylus/clngdbkpkpe... https://userstyles.org/

eadmund4y ago

> If you want to inject CSS, use a "user styles" manager like Stylus.

Unfortunately, Firefox on Android only supports a limited number of extensions, and Stylus is not currently one of them.

It's really sad, because I used to have some nice site-specific user styles.

I really don't understand Mozilla's decisions. They destroyed their password security, they destroyed their extension advantage. One wonders what's next — a pivot to Gopher? Oh well, despite all their numerous mistakes, Firefox is still preferable to Chrome.

2 more replies

rasz4y ago

>"user styles" manager like Stylus

or stylish? https://robertheaton.com/2018/07/02/stylish-browser-extensio...

I rather use the one extension I can fully trust instead of installing additional ones

1 more reply

jjcm4y ago

For a more future oriented version (as setting a font to black wont work with dark pages), check out the CSS Color Module Level 5 spec for color-contrast(), which will automatically choose a color that has a proper contrast ratio: https://www.w3.org/TR/css-color-5/#funcdef-color-contrast

One caveat is it's currently only supported in Safari technical preview.

Another thing worth mentioning is the relative brightness algo used in the repo for the linked plugin is using the WCAG 2 formula for relative luminance. This works pretty well in light mode for non-colored backgrounds, but doesn't incorporate perceived luminosity differences of different hues very well. A better algorithm to use here is the Advanced Perceptual Contrast Algorithm (APCA), which is the one used in the WCAG 3 working spec. It more accurately accounts for hue: https://github.com/Myndex/SAPC-APCA

eurasiantiger4y ago

These tools have existed in Sass/LESS for a decade, and in modern design tools too. There is no excuse.

dgb234y ago

If contrast is the main issue, then you can use CSS filter functions. Put stuff like this on the body element:

filter: contrast(200%);

(200% is typically too strong.)

You can also go down in saturation like so:

filter: saturate(40%);

Or use both:

filter: saturate(40%) contrast(200%);

greggsy4y ago

Dark Reader renders 90% of pages fine with no tweaking, the remainder aren’t hard to switch to an alternative mode. Best $7.99 I’ve spent.

ciwolsey4y ago

Isn't it free though?

1 more reply

irq-14y ago

    *##p:style(color:black !important; font-weight: normal !important;)

Hacker news will show the first line(s) of text gray and the rest black, because the first "paragraph" isn't wrapped in <p>.

totetsu4y ago

How can I change everything that is notification bell red to grey.

dgb234y ago

That's going to be pretty specific CSS wise.

Maybe collect some common CSS framework techniques:

https://mui.com/material-ui/react-badge/#main-content

https://getbootstrap.com/docs/4.0/components/badge/

etc. They are apparently often called "badges" or "indicators" and so on.

Or on sites you visit regularly you can just inspect the source and look for specificity.

tyingq4y ago

Chrome's devtools also has a concept of local overrides. It has limitations, but doesn't require an extension.

https://developer.chrome.com/blog/new-in-devtools-65/#overri...

a_w4y ago

Thank you so much! Just applied on hotwired.dev

hotwired.dev##p:style(font-family: "Jost", serif; !important)

chrisseaton4y ago· 6 in thread

Some times less is more, when it comes to things like contrast.

NavinF4y ago

Depends on the monitor. If you’re using a normal LCD or you’ve spent your money on features other than contrast (namely resolution and latency), black text already looks grey. No need to make it any more grey than it already is.

cwillu4y ago

Meta-irony at its finest.

ntoskrnl4y ago

I installed the extension and it works great, but I think I'll leave it disabled for HN ;)

chrisseaton4y ago

What contrast do you want? A billion to one? At some point it's excessive, right? So there's some value less than infinite that you're after. Why is your monitor's maximum contrast the right value?

5 more replies

hexo4y ago

Yea, glad you can lower contrast setting on your monitor and leave normal contrast to the rest of us.

kuschku4y ago

I can’t, as then I’d have to re-calibrate it again. But you can easily just increase the contrast setting on your monitor and leave sensible defaults for the rest of us :)

1 more reply

xigoi4y ago· 3 in thread

Can we also make an extension for simulating bad eyesight that everyone who makes websites with thin gray text would be forced to install?

parkersweb4y ago

In Chrome with DevTools open you can hit CTRL + SHIFT + P to open command menu and run "emulate blurred vision". It's not enforced though :)

toper-centage4y ago

Those already exist. You can simulate things like color blindness, tunnel vision, low contrast vision, and blurred vision, among other effects.

xigoi4y ago

Yeah, I was talking about the forced part :)

jmlucjav4y ago· 3 in thread

Anybody has some extension to change colors when background is black and text is white? I don't know if this is common or not, but I just cannot look at that for more than a few seconds, my eyes burn. I never found an extension for Chrome that fixed this.

ImaCake4y ago

Yes, you want DarkReader which is an extension available on most web browsers. Aside from being able to dark mode websites it has ways to complete customise the background and text colours. I am writing this with high contrast orange text on dark brown background on ios safari.

https://darkreader.org/

tempodox4y ago

I'm using Reader mode on such sites, but some sites are structured in a way that only part of the text, if any, shows up in the Reader view.

I'm just hoping that sites with a fixed dark-mode design stay the minority because many of those that I've seen are horribly bad and literally hurt my eyes.

frankfrankfrank4y ago

I’m not totally sure if this fully addresses your issue; but safari reader mode on all devices uses a gray text on black or dark grey backgrounds.

spiderfarmer4y ago· 1 in thread

Hacker news is one of the worst readible websites on the planet (especially non-link posts) and somehow this is the place where everyone likes to complain about other websites readability.

nottorp4y ago

You're reading it on mobile then?

pestatije4y ago· 1 in thread

Oh so that's why monitor makers are fighting the contrast wars...: websites using poor contrast text

hirako20004y ago

Not really, tweak everything you read to have proper contrast but not pure black on pure white, and keep your monitor with max contrast, it's a pure pleasure. Tone down contrast overall and what you get is mud no matter what, giving fatigue with prolonged time in front of the screen.

I find dark mode to help too. Not a black theme, a dark theme. Full contrast screen at its best.

Razengan4y ago· 1 in thread

HN could use something like this.

Avamander4y ago

You are free to install an extension if your display or eyesight needs extra accommodation. It shouldn't be the default. Same with font size.

gnicholas4y ago

Another extension that nukes grey text is BeeLine Reader. But instead of replacing grey text with black, it uses user-configurable color gradients, which wrap between lines and improve visual tracking. Disclosure: I'm the creator.

1: http://www.beelinereader.com

2: https://chrome.google.com/webstore/detail/beeline-reader/ifj...

3: https://addons.mozilla.org/en-US/firefox/addon/beelinereader...

SSLy4y ago

I'm all for promoting accessibility solutions to that thin gray font mid-10's design menace that is still plaguing web "design".

tomrod4y ago

I'm so glad to see this. I don't feel alone anymore. This is one of my biggest headache-producing tasks, reading poor contrast websites.

On the flip side, it is a great job candidate filter for design positions to show them a website and see if it's among the improvements they recommend.

deepsun4y ago

Let's start with this website? E.g. "Ask HN" font shade is unreadable.

edwinyzh4y ago

I use Darken Text for Chrome for the very same task, a must-have extension.

https://chrome.google.com/webstore/detail/darken-text/kmonkh...

JJMcJ4y ago

Sometimes this works for me. Highlight the text with your mouse, or whatever works on mobile devices. Then the highlight colors are sometimes easier to read.

On this site I get white text on medium brown, not as good as the standard colors for me at least.

hdjjhhvvhga4y ago

It's great and should be a built-in option - I prefer to minimize the number of plugins but this one is basic usability that will improve the readability of hundreds of thousands of websites.

brycewray4y ago

For comparison:

- The Tailwind CSS framework’s popular “Prose” plugin defaults text colors to #374151.

- Years ago, designers told me that, for text on a white background, they recommended nothing darker than #333.

jug4y ago

Great concept! This should be a standard browser option that has been there for as long as the default font setting overrides.

j / k navigate · click thread line to collapse

113 comments

63 comments · 17 top-level

sssilver4y ago· 18 in thread

I love the “nothing in nature is true black so don’t use #000000” argument.

Correct, nothing is, and your #000000 won’t be either once it’s shown on a physical screen.

jraph4y ago

Very much related to my comment [1] two days ago on Please Stop Using Grey Text [2] that says essentially the same thing with more verbiage

[1] https://news.ycombinator.com/item?id=31421666

[2] https://news.ycombinator.com/item?id=31420938 (397 points by marban 1 day ago, 376 comments) - https://tangledweb.xyz/please-stop-using-grey-text-3d3e71acf...

waffle_ss4y ago

What is the point in linking this? Imagine the mess that comment threads would be if everyone who made similar comments about something did this.

1 more reply

mikae14y ago

kuschku4y ago

> #000 on #fff won't burn out your retinas. :)

And yes, that 200:1 contrast can get painful, especially if you’ve got astigmatism.

1 more reply

da39a3ee4y ago

1 more reply

hnbad4y ago

There's a difference between using "soft black" and using low-contrast gray like you're Apple in the 2010s.

4 more replies

ciwolsey4y ago

1 more reply

eurasiantiger4y ago

simmo90004y ago

And then there was Goya. :)

hulitu4y ago

And nothing is true white so don't use #ffffff. We can continue with blue, green, red. /s

wolpoli4y ago

rob744y ago

True magenta (#f0f) and true cyan (#0ff) are the worst if you ask me...

1 more reply

helldritch4y ago

That being said, it's easy using the prefers-contrast CSS property to override that to #000000 for people who are hard of sight.

It's supported by edge, safari, chrome, opera but it's a bit finnicky in Firefox.

HPsquared4y ago

Dark greys didn't have this effect.

I suspect a lot of these "dark grey text" conventions may be related to this hardware issue.

sp3324y ago

OLED pixels take slightly longer to turn back on from fully off. I remember some VR headsets had trouble with this and they just set the minimum brightness to "1" instead of "0".

Edit: note this is per-subpixel, so you need to set some value in each color channel.

ciwolsey4y ago

Pure black and white on a screen is far more fatiguing on a screen than on off a screen so I don't see what's wrong with compensating for that fact.

jerrygoyal4y ago

> nothing in nature is true black so don’t use #000000” argument.l

this comment reminds of the statement made by Jobs about the round corners in the physical world.

izzydata4y ago

Alright how about #010101

;)

perihelions4y ago· 13 in thread

Two small examples:

"Show all text on the internet as black"

    *##*:style(color: black !important)

"Show comment text on HN as bold"

    ycombinator.com##.comment:style(font-weight: bold !important)

TAKEMYMONEY4y ago

If you want to inject CSS, use a "user styles" manager like Stylus. There's almost no learning curve if you know CSS.

You can write entire sheets for all pages, multiple or single domains. For example to make HN legible (basic text, spacing and contrast):

    @-moz-document domain("ycombinator.com") {
        :root {
            --font-size: 1.2rem;
            --text-color: #333;
        }
        .comment {
            font-size: var(--font-size);
            line-height: 1.5;
        }
        body {
            font-family: sans-serif !important;
            font-size: 100%;
        }
        .comhead a:link,
        .subtext a:visited,
        .c00,
        .c00 a:link,
        td {
            color: #333;
            font-size: var(--font-size);
        }
        td {
            background-color: transparent;
        }

}

(Personally I remove all fading from downvoted comments as well, they're unreadable)

https://chrome.google.com/webstore/detail/stylus/clngdbkpkpe... https://userstyles.org/

eadmund4y ago

> If you want to inject CSS, use a "user styles" manager like Stylus.

Unfortunately, Firefox on Android only supports a limited number of extensions, and Stylus is not currently one of them.

It's really sad, because I used to have some nice site-specific user styles.

2 more replies

rasz4y ago

>"user styles" manager like Stylus

or stylish? https://robertheaton.com/2018/07/02/stylish-browser-extensio...

I rather use the one extension I can fully trust instead of installing additional ones

1 more reply

jjcm4y ago

One caveat is it's currently only supported in Safari technical preview.

eurasiantiger4y ago

These tools have existed in Sass/LESS for a decade, and in modern design tools too. There is no excuse.

dgb234y ago

If contrast is the main issue, then you can use CSS filter functions. Put stuff like this on the body element:

filter: contrast(200%);

(200% is typically too strong.)

You can also go down in saturation like so:

filter: saturate(40%);

Or use both:

filter: saturate(40%) contrast(200%);

greggsy4y ago

Dark Reader renders 90% of pages fine with no tweaking, the remainder aren’t hard to switch to an alternative mode. Best $7.99 I’ve spent.

ciwolsey4y ago

Isn't it free though?

1 more reply

irq-14y ago

    *##p:style(color:black !important; font-weight: normal !important;)

Hacker news will show the first line(s) of text gray and the rest black, because the first "paragraph" isn't wrapped in <p>.

totetsu4y ago

How can I change everything that is notification bell red to grey.

dgb234y ago

That's going to be pretty specific CSS wise.

Maybe collect some common CSS framework techniques:

https://mui.com/material-ui/react-badge/#main-content

https://getbootstrap.com/docs/4.0/components/badge/

etc. They are apparently often called "badges" or "indicators" and so on.

Or on sites you visit regularly you can just inspect the source and look for specificity.

tyingq4y ago

Chrome's devtools also has a concept of local overrides. It has limitations, but doesn't require an extension.

https://developer.chrome.com/blog/new-in-devtools-65/#overri...

a_w4y ago

Thank you so much! Just applied on hotwired.dev

hotwired.dev##p:style(font-family: "Jost", serif; !important)

chrisseaton4y ago· 6 in thread

Some times less is more, when it comes to things like contrast.

NavinF4y ago

cwillu4y ago

Meta-irony at its finest.

ntoskrnl4y ago

I installed the extension and it works great, but I think I'll leave it disabled for HN ;)

chrisseaton4y ago

What contrast do you want? A billion to one? At some point it's excessive, right? So there's some value less than infinite that you're after. Why is your monitor's maximum contrast the right value?

5 more replies

hexo4y ago

Yea, glad you can lower contrast setting on your monitor and leave normal contrast to the rest of us.

kuschku4y ago

I can’t, as then I’d have to re-calibrate it again. But you can easily just increase the contrast setting on your monitor and leave sensible defaults for the rest of us :)

1 more reply

xigoi4y ago· 3 in thread

Can we also make an extension for simulating bad eyesight that everyone who makes websites with thin gray text would be forced to install?

parkersweb4y ago

In Chrome with DevTools open you can hit CTRL + SHIFT + P to open command menu and run "emulate blurred vision". It's not enforced though :)

toper-centage4y ago

Those already exist. You can simulate things like color blindness, tunnel vision, low contrast vision, and blurred vision, among other effects.

xigoi4y ago

Yeah, I was talking about the forced part :)

jmlucjav4y ago· 3 in thread

ImaCake4y ago

https://darkreader.org/

tempodox4y ago

I'm using Reader mode on such sites, but some sites are structured in a way that only part of the text, if any, shows up in the Reader view.

I'm just hoping that sites with a fixed dark-mode design stay the minority because many of those that I've seen are horribly bad and literally hurt my eyes.

frankfrankfrank4y ago

I’m not totally sure if this fully addresses your issue; but safari reader mode on all devices uses a gray text on black or dark grey backgrounds.

spiderfarmer4y ago· 1 in thread

Hacker news is one of the worst readible websites on the planet (especially non-link posts) and somehow this is the place where everyone likes to complain about other websites readability.

nottorp4y ago

You're reading it on mobile then?

pestatije4y ago· 1 in thread

Oh so that's why monitor makers are fighting the contrast wars...: websites using poor contrast text

hirako20004y ago

I find dark mode to help too. Not a black theme, a dark theme. Full contrast screen at its best.

Razengan4y ago· 1 in thread

HN could use something like this.

Avamander4y ago

You are free to install an extension if your display or eyesight needs extra accommodation. It shouldn't be the default. Same with font size.

gnicholas4y ago

1: http://www.beelinereader.com

2: https://chrome.google.com/webstore/detail/beeline-reader/ifj...

3: https://addons.mozilla.org/en-US/firefox/addon/beelinereader...

SSLy4y ago

I'm all for promoting accessibility solutions to that thin gray font mid-10's design menace that is still plaguing web "design".

tomrod4y ago

I'm so glad to see this. I don't feel alone anymore. This is one of my biggest headache-producing tasks, reading poor contrast websites.

On the flip side, it is a great job candidate filter for design positions to show them a website and see if it's among the improvements they recommend.

deepsun4y ago

Let's start with this website? E.g. "Ask HN" font shade is unreadable.

edwinyzh4y ago

I use Darken Text for Chrome for the very same task, a must-have extension.

https://chrome.google.com/webstore/detail/darken-text/kmonkh...

JJMcJ4y ago

Sometimes this works for me. Highlight the text with your mouse, or whatever works on mobile devices. Then the highlight colors are sometimes easier to read.

On this site I get white text on medium brown, not as good as the standard colors for me at least.

hdjjhhvvhga4y ago

It's great and should be a built-in option - I prefer to minimize the number of plugins but this one is basic usability that will improve the readability of hundreds of thousands of websites.

brycewray4y ago

For comparison:

- The Tailwind CSS framework’s popular “Prose” plugin defaults text colors to #374151.

- Years ago, designers told me that, for text on a white background, they recommended nothing darker than #333.

jug4y ago

Great concept! This should be a standard browser option that has been there for as long as the default font setting overrides.

j / k navigate · click thread line to collapse