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

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.

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

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

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

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.

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

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

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

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.

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