Change the colour of grey text back to black on website using poor contrast text
addons.mozilla.org
addons.mozilla.org
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)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.
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%);
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/
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.
(Last time I try, if you want to add an extension, you have to create a new collection and ... reinstall Firefox, but maybe that's just me.)
The rewrite also took other things like the ability to past IPv6 addresses in the URL bar or the ability to open about:config (only accessible in beta/nightly/forks) because you could edit settings and mess up badly enough that the entire app stops breaking.
It's been a few years now and I simply don't expect Firefox for Android to regain its previous functionality anymore. It's now a slightly more privacy friendly, slightly slower Chrome replacement that occasionally asks you to please sign up for its VPN. If you want something fixed, you'll have to open a pull request and hope the Fenix people don't see your bug as a feature.
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
Right, that's why I didn't link to Stylish. uBO is great for blocklists but all my custom styles go in stylesheets eventually. You can use both (I do)!
https://developer.chrome.com/blog/new-in-devtools-65/#overri...
*##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>.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
hotwired.dev##p:style(font-family: "Jost", serif; !important)
Correct, nothing is, and your #000000 won’t be either once it’s shown on a physical screen.
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).
Can you find a citation for that statement? WCAG 2.1[0] mentions minimum contrast, but not maximum. The success criterion page itself is written in #000 on #fff. :)
https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum...
A lot of high contrast combinations are less accessible and even if it doesn't make the text illegible, too much contrast is going to be a strain on the eyes for most people.
Generally, WCAG AA or AAA is enough for most people and you hit that already with #555 on a white background. Something like #1a1a1a is close to the darkest I'd use in most cases.
Why wouldn't people who need less contrast simply reduce the contrast on their monitors, though?
It seems to me as though designing for those who need low contrast excludes those who need high contrast, but not the other way around.
From your link:
> The solution for contrast sensitivity
> If you feel that your child may be suffering from this issue, the first thing to do is test some tinted acetate sheets placed over the page of text.
Because I don't want to make everything else look worse just to lower contrast in text?
And support for low contrast doesn't mean excluding others, it can just be a setting. Like Windows has been doing for a long time with its high-contrast mode. Websites and apps are increasingly adopting dark themes, next we should push for a switch between high and lower contrast. It's just as easy from a technical standpoint. Browsers are already pretty far, letting the user set specific fonts and font sizes, and Firefox' reader mode and its options are great as well.
If a site provides a widget where contrast can be beefed up, probably part of the dark-mode / light-mode widget, that seems OK.
However, I agree with the generell sentiment that in modern web design, contrast is often too low.
As far as I can tell based on what I've read, there can be a conflict between users with accessibility needs, where you may want as high contrast as possible, and typical users, where excess contrast may impair readability in some cases. The WCAG minimums are within the realm of reasonable for both sets of users though, so there isn't really an excuse not to meet those minimums.
For those with fuzzy vision (obviously an extremely common situation), contrast is reduced naturally when the black and white bleed into each other. Reducing contrast harms those users, belying your "actually less accessible" assertion.
Then turn down the brightness. Pure black/white should never be uncomfortable, if it is then your monitor needs adjusted. In fact I suspect a lot of this stupid low-contrast trend comes from designers who don't know that and are trying to compensate for it in software.
Monitors come with the brightness set ridiculously high so they'll look good in a showroom (and possibly to make the backlight wear out faster, but that's another rant...), but it's definitely not where normal use should be, unless you're in direct sunlight.
On all my computers? And my phone? And my tablet? And my...
You could say the same about sites where the body text is set unreadably small. "Just zoom in!" It does not persist across devices, sessions, users etc the way a well-designed site would.
I don't know what ultra HDR monitor you're using or what light sensitivity issue you may have, but I don't want to have to install addons in my browser because you can't find the brightness slider.
> I don't want to have to install addons
Sounds like you don't need to, you're happy changing the setting in many places (every device), than one (a stylesheet)
> because you can't find the brightness slider
"Make the user fix it" was the old thinking. Now we consider a more robust set of platforms, devices and users.
What a bunch of doublespeak BS for "now we want to keep the users stupid and unknowing."
Users aren't unknowing, they know how to adjust the brightness whether the site is designed well or not. I said one was "changing the setting in many places."
But now I need to change my settings or your site's stylesheet to make your text readable
> "Make the user fix it" was the old thinking. Now we consider a more robust set of platforms, devices and users.
Exactly, that's why you choose clearly contrasting text over blurry grey-on-white so that every device can display the text comfortably according to the characteristics and preferences set by the manufacturer (or the user, if the user disagrees with the manufacturer about what constitutes "too much contrast")
> every device can display the text comfortably according to the characteristics and preferences set by the manufacturer (or the user, if the user disagrees with the manufacturer)
Right, every device; seems complicated, requires intervention. That or, design the site well.
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.
There are knobs for these on most displays.
If you bought a monitor at any point in the past 18 years that can’t show enough contrast, that’s on you.
What you described here is greatly related to The Gell-Mann Amnesia.
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.
[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...
Your comment about Reddit, in addition to be outside HN's guidelines, is however totally wrong. I don't frequently browse Reddit, I don't have any account there, that cannot be some Reddit infiltration so I suggest you to consider another analysis. Of this thread of course, but of HN in general.
A better analogy for your comment would be in a Twitter conversation, you replying to an OP with a quote tweet of a similar comment you made in the past. Yes, I do find those annoying.
I'm really not concerned whether the severe drop in SNR comes primarily from entryists from Reddit, Twitter, or some obscure web forum (likely it's diffuse). But on its face, the rise of jokes, puns, and other low-effort comments - having to collapse threads to find the comments with something useful to add to the convo - is very reminiscent of Reddit threads, where entertainment and cheap memetics are valued equally or greater than logos. HN used to distinguish itself by obliterating that type of cruft, with a "lurk moar" sting, but it no longer does thanks to lazy gatekeeping.
Now I'm not going to change any of this by pointing it out - the horse bolted years ago and closing the stable door won't change anything now - but you should know the "signals" you're intent on following are worthless as they're from a Reddit-lite entity, not HN classic.
But hey, at least it had some contrast I guess?
Dark greys didn't have this effect.
I suspect a lot of these "dark grey text" conventions may be related to this hardware issue.
Edit: note this is per-subpixel, so you need to set some value in each color channel.
this comment reminds of the statement made by Jobs about the round corners in the physical world.
;)
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...
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.
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.
https://chrome.google.com/webstore/detail/darken-text/kmonkh...
On this site I get white text on medium brown, not as good as the standard colors for me at least.
- 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.
I find dark mode to help too. Not a black theme, a dark theme. Full contrast screen at its best.
https://www.amazon.com/dp/1875750223/
The research upheld the "any color as long as its black" popular wisdom for text, but found that black text on a ~15% tinted background (any color) did not impede readability. (Deeper background tints impeded readability.)
> Why is your monitor's maximum contrast the right value?
Please give me maximum contrast and let me adjust my monitor.
And for example some people require larger fonts for accessibility reasons - but we don't make all website with 100 point fonts do we? Instead we use tools to magnify the screen - the same way your OS can increase contrast for you if you need it. There's moderation there.
We don't actually have an issue with "too much" accessibility.
No, it isn't. This is not like a wheelchair ramp.
I apologize for any intelligent discussion I may have caused.
As low-budget option I can recommend the Fujitsu Siemens P17-2, it’s from 2004, available used around 20 € and has better contrast, brightness, and viewing angles than any TN panel even today.
It’s ridiculous that a monitor from 2004 is still better than anything the complainers in this thread are using today.