14 ms·
Change the colour of grey text back to black on website using poor contrast text
- xigoi 4y agoCan we also make an extension for simulating bad eyesight that everyone who makes websites with thin gray text would be forced to install?
- parkersweb 4y agoIn 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-centage 4y agoThose already exist. You can simulate things like color blindness, tunnel vision, low contrast vision, and blurred vision, among other effects.
- xigoi 4y agoYeah, I was talking about the forced part :)
- SSLy 4y agoI'm all for promoting accessibility solutions to that thin gray font mid-10's design menace that is still plaguing web "design".
- sssilver 4y agoI 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.
- mikae1 4y agoI 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. :)
- hnbad 4y agoThere'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).
- mikae1 4y ago> 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.html https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum...
- httpsterio 4y agohttps://dm-ed.com/info/contrast-sensitivity/ https://dm-ed.com/info/contrast-sensitivity/ 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.
- rectang 4y agoI'm sympathetic to the idea that some people need reduced contrast to read comfortably. They are in the same boat as people who need maximum contrast because of other visual impairments, most commonly focal issues. 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.
- helldritch 4y agoGenerally 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.
- jraph 4y agoVery 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 https://news.ycombinator.com/item?id=31421666 [2] https://news.ycombinator.com/item?id=31420938 https://news.ycombinator.com/item?id=31420938 (397 points by marban 1 day ago, 376 comments) - https://tangledweb.xyz/please-stop-using-grey-text-3d3e71acfca8 https://tangledweb.xyz/please-stop-using-grey-text-3d3e71acf...
- waffle_ss 4y agoWhat is the point in linking this? Imagine the mess that comment threads would be if everyone who made similar comments about something did this.
- kingcharles 4y agoI actually really appreciated the comment above. Downvote it if you don't like it. If it gets enough downvotes because the community hates it, then it'll go away.
- waffle_ss 4y agoYou really appreciated a comment that effectively said "hey look I said the same thing two days ago" ...? Yikes dude. Reddit infiltration has totally ruined this place.
- jraph 4y agoCome on, take it easy. I thought that could be helpful. This comment also links to a related, recent story that probably caused this one and that's probably what is most important in this comment. It has been upvoted several times and the person you respond to tells you they found it helpful too. You can't really argue with this. In the past I also linked to comments or stories I've not posted myself and I thought relevant to the context so it's not just me seeking for validation or something. I just like linking connected stuff. I can understand full well how one could find my comment a bit cringy. But please reconsider because what's actually happening is probably not what you think it is. But if you don't, it's fine, I don't really mind. I attempted something, found out that some people liked it (which encourages me to do it again), some don't (which encourages me to be careful not to send the wrong signals - thanks for your feedback), in the end that's expected. 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.
- eurasiantiger 4y agoThis 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.
- simmo9000 4y agoAnd then there was Goya. :)
- hulitu 4y agoAnd nothing is true white so don't use #ffffff. We can continue with blue, green, red. /s
- rob74 4y agoTrue magenta (#f0f) and true cyan (#0ff) are the worst if you ask me...
- Forgeties79 4y agoI’m getting flashbacks to AIM and my putting what could only be described as “neon green” on a black background. But hey, at least it had some contrast I guess?
- wolpoli 4y agoI 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
- HPsquared 4y agoOn 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.
- sp332 4y agoOLED 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.
- ciwolsey 4y agoPure 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.
- jerrygoyal 4y 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.
- izzydata 4y agoAlright how about #010101 ;)
- hdjjhhvvhga 4y agoIt'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.
- perihelions 4y agoI 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)
- totetsu 4y agoHow can I change everything that is notification bell red to grey.
- dgb23 4y agoThat'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://mui.com/material-ui/react-badge/#main-content https://getbootstrap.com/docs/4.0/components/badge/ 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.
- greggsy 4y agoDark 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.
- 4y ago
- chrisseaton 4y agoSome times less is more, when it comes to things like contrast.
- NavinF 4y agoDepends 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.
- cwillu 4y agoMeta-irony at its finest.
- chrisseaton 4y agoWhat 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?
- NavinF 4y agoA billion to one sounds reasonable to me. Now if only I could find a reasonably sized OLED panel...
- rectang 4y agoThere's actually a book that studies this by measuring readability of print articles by seeing how far readers got: Type and Layout by Colin Wheildon. https://www.amazon.com/dp/1875750223/ 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.
- hexo 4y agoYes, billion to one. Or at least like 1000:1, which todays monitor easily achieves. Whatever maximum contrast value of whatever monitor I look atm is OK, anything lower is not (including OLEDs). I don't get why we should be "forced" to look at #aaa text on #eee background "contrasting" text. For me, even #222 is "too much", to the point I usually notice something is off and then Imma mess with inspector and fix colors, which is annoying, takes my time, and wastes CPU cycles, especially when one tries to use some plugin to fix this automatically. The extension is usually CPU hog, so the "low contrasting text websites" are actually harmful to society much like needlessly JSheavy sites.
- jug 4y agoGreat concept! This should be a standard browser option that has been there for as long as the default font setting overrides.
- edwinyzh 4y agoI use Darken Text for Chrome for the very same task, a must-have extension. https://chrome.google.com/webstore/detail/darken-text/kmonkhbnghcmlhgbmlpagpapfomioidg https://chrome.google.com/webstore/detail/darken-text/kmonkh...
- jmlucjav 4y agoAnybody 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.
- tempodox 4y agoI'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.
- frankfrankfrank 4y agoI’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.
- ImaCake 4y agoYes, 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/ https://darkreader.org/
- deleted 4y ago[deleted]
- pestatije 4y agoOh so that's why monitor makers are fighting the contrast wars...: websites using poor contrast text
- hirako2000 4y agoNot 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.
- tomrod 4y agoI'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.
- brycewray 4y agoFor 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.
- gnicholas 4y agoAnother 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 http://www.beelinereader.com 2: https://chrome.google.com/webstore/detail/beeline-reader/ifjafammaookpiajfbedmacfldaiamgg?hl=en https://chrome.google.com/webstore/detail/beeline-reader/ifj... 3: https://addons.mozilla.org/en-US/firefox/addon/beelinereader/ https://addons.mozilla.org/en-US/firefox/addon/beelinereader...
- JJMcJ 4y agoSometimes 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.
- spiderfarmer 4y agoHacker 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.
- nottorp 4y agoYou're reading it on mobile then?
- deepsun 4y agoLet's start with this website? E.g. "Ask HN" font shade is unreadable.
- Razengan 4y agoHN could use something like this.
- Avamander 4y agoYou are free to install an extension if your display or eyesight needs extra accommodation. It shouldn't be the default. Same with font size.
- deleted 4y ago[deleted]