Ask HN: How to change web page's grey text to black? | Hacker News Reader

Ask HN: How to change web page's grey text to black?

19 pointswolpoli16 comments

I am at my wit's end with modern web designer's love for thin grey text on white background.

I am sure it looks fine for the designers using Macbooks with high resolution IPS displays with a glossy finish.

But for the rest of us, these thin grey text, combined with Cleartype in a well lit room, on a still modern 1080p monitor with matte finish, are very tough to read.

So I ask HN: Is there a browser extension or any software trick that could turn these grey text into black text?

Thank you.

View on HN

This line of JS will make the text in every paragraph become black:

document.querySelectorAll('p').forEach(elem => {elem.style.color = '#000'})

You can turn this into a bookmarklet or run it from the console(necessary on sites like github.com which do not allow code running from bookmarklets).

Of course, it will not fix all your text color problems. To cover more elements like lists and headings, you'll need to add them to `querySelectorAll`.

document.querySelectorAll('p, ul, ol, h1, h2, h3, h4').forEach(elem => {elem.style.color = '#333'})

`#333` is what Firefox Reader Mode uses because it's less heavy than full black (#000).

This is a very handy script. Thank you!

> sites like github.com which do not allow code running from bookmarklets

I tried a variant of it on GitHub.com. It worked fine. This one turns text red, but you can change it back to black. You can select the text below and drag it to the bookmark toolbar to create the bookmarklet--at least on Chrome/Firefox on Windows. If that doesn't work, you can copy/paste.

  javascript:document.querySelectorAll('*').forEach(elem => elem.style.color = 'red')

This one uses a different approach, it adds a dark mode style sheet.

   javascript:/* /Dark Mode# */(function () {document.head.appendChild(document.createElement('style')).innerHTML = '* {background-color: #121212 !important; color: #888 !important;}';})();

You are correct, it does work.

My mistake was basing my statement on past experiences using an older Firefox ESR version which would give "Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”)." when clicking on a bookmarklet for sites like Twitter or Github.

That's what I figured you meant. I used to load scripts from other domains, but now some sites use CSP to block them.

Using TamperMonkey, GreaseMonkey, or another user scripting tool allows running Javascript on any web page automatically without opening the console or any other manual requirement.

The easiest option is to use Reader Mode in Firefox or other browsers which support this. Reader Mode should allow you to tailor style to suit your preferences. If not, in Firefox, you can also apply a userContent.css to the Reader Mode format.

There are several extensions which may be able to help.

Dark Reader is one of these. It's principally intended to apply dark modes to websites, but can also apply high contrast if that's your preference.

The Stylus CSS manager can be used to individually tweak websites, and I actually use it for just this, with fixing greyed-out text being a principle use. I've also created a few generic stylesheets to fix standard gripes, including font/text idiocy. This presumes CSS knowledge, though it's also a great way to develop a working proficiency.

There are browsers which specifically address text/contrast issues, with EInkBro being one such that's aimed at e-ink based tablets. It has two settings, "white background" and "bold font" which can be toggled on for a given website, as well as its own reader mode. It's available for Android. There are some quirks and issues which make browsing and navigating inconvenient, but once you've found an article you want to read, it's excellent.

The other feature it has is a "save to ePub" feature (as well as save to PDF), which allows you to save an article to either a freestanding or compiliation (multi-article) ePub. That's quite useful, you can tune display / text preferences in your ePub reader of choiice, and I'm rapidly becoming a fan. See:

https://toot.cat/@dredmorbius/107958709435468728

From another comment, I see you are on Firefox, but maybe these two plugins are available there too (or similar ones).

First, there is "dark reader", which also has a light mode. You can change things like brightness and contrast and this should make it possible to get the text to black on basically all websites by default. I say should, because I didn't try the light mode myself, just noticed it's there.

Secondly, a more manual and fine-grained option would be "Stylus" which lets you manage CSS snippets per URL (or part of URL) and injects them on pageload for you.

I do use both of them myself and wouldn't want to miss them. Of course they both need "read and write all content on all visited websites"-privileges, so that is something to consider as well.

Handy link with the name for the concept: https://contrastrebellion.com/

Personally when this happens and reader mode not available, I typically open devtools, use element picker to select text, and change color of text manually in CSS panel.

I'm 100% agreeing with root cause. Thin fonts render like crap on non-Macs. I never saw a designer testing anything on a non-Apple machine. Hell, in most companies, no devs have a Windows machine those days! "How to repro this Windows-only bug" is a recurring theme. In my last job I was the only Windows-based dev out of ~100. (And I'm based in France where Mac/iPhone are not the #1 choices among consumers). In current job (remote at US-HQ company) everyone's on a Mac (me including, no choice plus it would have been an uphill battle, makes no sense; I must say though, MBP are pretty good; wouldn't buy one personally though due to price tag).

Generally, you'd use "user styles" for that, e.g. with https://addons.mozilla.org/en-US/firefox/addon/styl-us/, such as anything from https://userstyles.org/styles/ or just `* { color: black !important; background: white !important; }`. The problem is that while this works great for the majority of sites, it breaks the layout of some edge cases. For example, this also renders normally-transparent backgrounds as white and thus suddenly some elements are hidden.

Writing global style rules that work everywhere is hard and afaik typically avoided in favor of site-specific styles. I'm currently attempting to create one anyway (win95 appearance).

Click the “reader mode” button in Firefox. I think most other browsers have something similar. Alternatively, use the browser’s dev tools to edit the page’s style sheets. This can be much more flexible, but requires learning a lot about html and css. Also, you would have to make the same edits every time you visit the page, which is annoying.

There are also extensions like Greasemonkey or Custom Style Script that allow you to automatically apply a stylesheet to pages when you visit them, to save you the manual effort. Someone still has to write the style sheet, but there are webpages where people show off their creations and let you download them for yourself.

Unfortunately, Reader Mode in Firefox doesn't work for all pages, only pages that have markup that it understands.[1]

I use a Firefox extension called "Dark Background and Light Text"[2] that lets you override the foreground/background colors for HTML pages. (Despite the name, you can pick whatever colors you like. And you can selectively enable/disable it based on the domain.) Another similar extension, that's also available for Chrome, is "Dark Reader".[3] But its colors are not configurable. Both of these extensions are open source.

[1] There was actually an interesting article the other day on how Reader Mode works: https://news.ycombinator.com/item?id=30864311

[2] https://addons.mozilla.org/firefox/addon/dark-background-lig...

[3] https://addons.mozilla.org/en-US/firefox/addon/darkreader or https://chrome.google.com/webstore/detail/dark-reader/eimadp...

I do like the delicious irony that your question renders in light grey.

https://devblog.brahmancreations.com/ii/down-with-grey-on-wh...

Cute, but #3b3b3b is still grey.

Either the author has moved over to the dark (lighter?) side in the several years since publishing this, or it's just hypocrisy.

If it's a site you use often, and you have basic css skills, you can use a plugin like stylus to apply your own custom css. I use it on a lot of websites that only have a dark mode option.

Reply on news.ycombinator.com